Line 28: | Line 28: | ||
<body> | <body> | ||
− | <!-- Navigation --> | + | <!-- Navigation --> |
− | <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation | + | <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> |
− | + | <div class="container"> | |
− | + | <!-- Brand and toggle get grouped for better mobile display --> | |
− | + | <div class="navbar-header"> | |
− | + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
− | + | <span class="sr-only">Toggle navigation</span> | |
− | + | <span class="icon-bar"></span> | |
− | + | <span class="icon-bar"></span> | |
− | + | <span class="icon-bar"></span> | |
− | + | </button> | |
− | + | <a class="navbar-brand" href="#">Start Bootstrap</a> | |
− | + | </div> | |
− | + | <!-- Collect the nav links, forms, and other content for toggling --> | |
− | + | <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
− | + | <ul class="nav navbar-nav"> | |
− | + | <li> | |
− | + | <a href="#">About</a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a href="#">Services</a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a href="#">Contact</a> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </div> | |
− | + | <!-- /.navbar-collapse --> | |
− | + | </div> | |
− | + | <!-- /.container --> | |
− | + | </nav> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </nav> | + | |
− | <!-- | + | <!-- Half Page Image Background Carousel Header --> |
− | <header id="myCarousel" class="carousel slide"> | + | <header id="myCarousel" class="carousel slide"> |
− | + | <!-- Indicators --> | |
− | + | <ol class="carousel-indicators"> | |
− | + | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> | |
− | + | <li data-target="#myCarousel" data-slide-to="1"></li> | |
− | + | <li data-target="#myCarousel" data-slide-to="2"></li> | |
− | + | </ol> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <!-- | + | <!-- Wrapper for Slides --> |
− | <div class=" | + | <div class="carousel-inner"> |
− | + | <div class="item active"> | |
− | + | <!-- Set the first background image using inline CSS below. --> | |
− | + | <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> | |
− | + | <div class="carousel-caption"> | |
− | + | <h2>Caption 1</h2> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="item"> | |
− | + | <!-- Set the second background image using inline CSS below. --> | |
− | + | <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> | |
+ | <div class="carousel-caption"> | ||
+ | <h2>Caption 2</h2> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <!-- Set the third background image using inline CSS below. --> | ||
+ | <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> | ||
+ | <div class="carousel-caption"> | ||
+ | <h2>Caption 3</h2> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | < | + | |
− | + | <!-- Controls --> | |
− | + | <a class="left carousel-control" href="#myCarousel" data-slide="prev"> | |
+ | <span class="icon-prev"></span> | ||
+ | </a> | ||
+ | <a class="right carousel-control" href="#myCarousel" data-slide="next"> | ||
+ | <span class="icon-next"></span> | ||
+ | </a> | ||
+ | |||
+ | </header> | ||
+ | |||
+ | <!-- Page Content --> | ||
+ | <div class="container"> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <h1>Half Slider by Start Bootstrap</h1> | ||
+ | <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>half-slider.css</code>file.</p> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <hr> | |
+ | |||
+ | <!-- Footer --> | ||
+ | <footer> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <p>Copyright © Your Website 2014</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- /.row --> | ||
+ | </footer> | ||
+ | |||
</div> | </div> | ||
− | + | <!-- /.container --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <!-- /.container --> | + | |
− | <!-- jQuery --> | + | <!-- jQuery --> |
− | <script src=" | + | <script src="js/jquery.js"></script> |
− | <!-- Bootstrap Core JavaScript --> | + | <!-- Bootstrap Core JavaScript --> |
− | <script src=" | + | <script src="js/bootstrap.min.js"></script> |
− | <!-- Script to Activate the Carousel --> | + | <!-- Script to Activate the Carousel --> |
− | <script> | + | <script> |
$('.carousel').carousel({ | $('.carousel').carousel({ | ||
interval: 5000 //changes the speed | interval: 5000 //changes the speed | ||
}) | }) | ||
− | </script> | + | </script> |
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 12:46, 5 August 2017
Half Slider by Start Bootstrap
The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the half-slider.css
file.