Verwenden Sie Bootstrap, um schnell ein Fließband aufzubauen_Javascript-Fähigkeiten

Bootstrap-Einführung

Bootstrap ist ein Framework, das in der Front-End-Entwicklung weit verbreitet ist. Es wurde zuerst als internes Tool bei Twitter verwendet und erlangte schnell Anerkennung bei allen Parteien. Dieses Buch basiert auf der neuesten Version von Bootstrap 3. Nach einer kurzen Einführung in die Installation und Konfiguration geht es direkt zum Thema und bespricht die repräsentativsten persönlichen Arbeitswebsites, WordPress-Themes, Unternehmenswebsites, E-Commerce-Websites und Single-Page-Websites In Kombination mit diesen Fällen werden die Verwendungsmethoden und -techniken von Bootstrap und LESS im Detail analysiert.

Nachdem ich so viel gesagt habe, werfen wir einen Blick auf den Bootstrap-Code zum Aufbau des Förderbandes.

Fortschrittsanzeige

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

Das Datenzielattribut der Fortschrittsanzeige muss das ID-Homepage-FeatureJS-Plug-In des Förderbands verwenden, um die aktive Klasse zum Förderband hinzuzufügen.

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

Dann gibt es eine Schaltfläche zum Anzeigen des vorherigen und nächsten

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

Das ist es. Der obige Inhalt ist das vom Herausgeber vorgestellte Wissen über den Bau von Förderbändern. Ich hoffe, dass es Ihnen hilfreich sein wird. Ich möchte Ihnen auch sehr für Ihre Unterstützung der Script House-Website danken!