Quick use of bootstrap to build conveyor _javascript tips

Bootstrap Introduction

Bootstrap is a very broad framework for front-end development, one of the earliest tools within the Twitter company, which was quickly recognized by all parties after open source. This book is based on the latest Bootstrap 3 writing, in a brief introduction of the installation and configuration to go straight to the theme, respectively, discussed the site of personal works, WordPress theme, corporate Web site, E-commerce site and one-page marketing site, such as several of the most representative application cases, Combined with these cases, the bootstrap also has a detailed analysis of the use of less and techniques.

Said so much, is the digression, below look at the bootstrap to build conveyor belt code.

Progress indicator

<div id= "Homepage-feature" class= "Carousel Slide" >
<ol class= "carousel-indicators" >
<li data-target= "#homepage-feature" data-slide-to= "0" class= "active" ></li>
<li data-target= "# Homepage-feature "data-slide-to=" 1 "></li>
<li data-target=" #homepage-feature "data-slide-to=" 2 " ></li>
<li data-target= "#homepage-feature" data-slide-to= "3" ></li>
</ol>

The Data-target property of the progress indicator must use the conveyor ID Homepage-featurejs plug-in to add an active class to the conveyor belt.

<div class= "Carousel-inner" >
<div class= "Item Active" >

</div>
< div class= "Item" >

</div> ...
</div>

And then a button that shows the previous one.

<a class= "left Carousel-control" href= "#homepage-feature" data-slide= "prev" > <span class= "Glyphicon
Glyphicon-chevron-left "></span>
</a>
<a class=" right Carousel-control "href=" # Homepage-feature "data-slide=" Next ">
<span class=" Glyphicon glyphicon-chevron-left "></span>
</a></div>

So it would be good. The above content is small set to introduce the bootstrap to build a conveyor belt of relevant knowledge, hope to help everyone, here also thank you for the cloud Habitat Community website support!