1485 sujets

Web Mobile et responsive web design

[Résolu] Slider Bootstrap

Bonjour à tous, j'ai un slider sur bootstrap, mais je n'arrive pas à comprendre comment lui donner la largeur de la page.



  <!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>La maison de l'architecte</title>
    <meta name="description" content="Page Test">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css"> 

      /* Styles de base */
      body {
        background: url('assets/img/fond.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
      }

      /* Images */
      img {
        width: 100%;
      }
       /* *********** */
      /* Ajout Perso */
     /* *********** */

    /* Navbare */

    .navbar-inverse {
  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
}
.btn-primary {

  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);

  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));

  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

  background-repeat: repeat-x;

  border-color: #245580;

}


    </style>
<!-- =================================== END STYLE ================================== -->
  </head>
<!-- ==================================== END HEAD ================================== -->

  <body id="page-top">


    <header>

<!-- =================================== Navigation ================================ -->
<div class="container-fluid" data-spy="scroll" data-target=".navbar">
   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">   
        <div class="navbar-header">   
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Le Titre</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
        <li class="hidden"><a href="#page-top"></a></li>
        <li><a href="#accueil">Accueil</a></li>
        <li><a href="#qui">Qui sommes-nous ?</a></li>
        <li><a href="#contact">Contact</a></li>
              </ul>
            </li> 
        </div>
      </nav>

        <div class="carousel slide">
          <div class="carousel-inner">
            <div class="item active"> <img alt="" src="assets/img/img1.jpg"></div>
            <div class="item"> <img alt="" src="assets/img/img2.jpg"></div>
            <div class="item"> <img alt="" src="assets/img/img3.jpg"></div>
          </div>
          <a class="left carousel-control" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
       </div>
     </div>

    </header>




    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Javascript de Bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script>
      // Scrollspy fluide
      $(function () {
        $('header a').on('click', function(e) {
          e.preventDefault();
          var hash = this.hash;
          $('html, body').animate({
            scrollTop: $(this.hash).offset().top
          }, 1000, function(){
            window.location.hash = hash;
          });
        });
      });

      // caroussel test

            $(function () {
        $('.carousel').carousel({ interval: 2000 });
      });



    </script>
   
   </div>   
  </body>

</html>



Merci d'vance
Modifié par uniuc (08 Apr 2017 - 14:32)
Sujet clos
Aller à