Utilisez rapidement Bootstrap pour créer une bande transporteuse_compétences javascript

Introduction au Bootstrap

Bootstrap est un framework largement utilisé dans le développement front-end. Il a d'abord été utilisé comme outil interne chez Twitter. Après avoir été open source, il a rapidement été reconnu par toutes les parties. Ce livre est écrit sur la base du dernier Bootstrap 3. Après une brève introduction à l'installation et à la configuration, il entre directement dans le sujet et aborde les sites de travail personnels les plus représentatifs, les thèmes WordPress, les sites Web d'entreprise, les sites Web de commerce électronique et les sites Web d'une seule page. sites d'application marketing, combinés à ces cas, les méthodes et techniques d'utilisation de Bootstrap et LESS sont analysées en détail.

Cela dit, tout est hors sujet. Jetons un coup d'œil au code de bootstrap pour construire le tapis roulant.

Indicateur de progrès

<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>

L'attribut data-target de l'indicateur de progression doit utiliser le plug-in ID homepage-featureJS du tapis roulant pour ajouter la classe active au tapis roulant.

<div class="carousel-inner">
<div class="item active">
<img >
</div>
<div class="item ">
<img >
</div>
...
</div>

Ensuite il y a un bouton pour afficher le précédent et le suivant

<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>

C'est tout. Le contenu ci-dessus est la connaissance de la construction de bandes transporteuses avec Bootstrap présentée par l'éditeur. J'espère qu'il vous sera utile. Je voudrais également vous remercier tous pour votre soutien au site Web de Script House !