Bootstrap を使ってコンベアベルトをすばやく構築する_JavaScript スキル-jsチュートリアル-php.cn

Bootstrap を使ってコンベアベルトをすばやく構築する_JavaScript スキル

WBOY

リリース： 2016-05-16 15:01:57

オリジナル

1788 人が閲覧しました

ブートストラップの紹介

Bootstrap は、フロントエンド開発で広く使用されているフレームワークで、最初は Twitter の内部ツールとして使用され、その後すぐにあらゆる関係者から認知されました。この本は、最新の Bootstrap 3 に基づいて書かれています。インストールと構成について簡単に紹介した後、すぐに本題に入り、最も代表的な個人の作業サイト、WordPress テーマ、企業 Web サイト、電子商取引 Web サイト、およびシングルページについて説明します。マーケティングWebサイトの活用事例と併せて、BootstrapやLESSの活用方法やテクニックを詳細に分析します。

ここまで話しましたが、話は逸れました。ベルトコンベアを構築するためのブートストラップのコードを見てみましょう。

進行状況インジケーター

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

ログイン後にコピー

進行状況インジケーターの data-target 属性は、コンベアベルトの ID home-featureJS プラグインを使用して、アクティブクラスをコンベアベルトに追加する必要があります。

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

ログイン後にコピー

次に、前と次を表示するボタンがあります

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

ログイン後にコピー

それだけです。以上の内容は、編集者が紹介したBootstrapによるベルトコンベアの構築に関する知識ですので、皆様のお役に立てれば幸いです。また、スクリプトハウスのウェブサイトをよろしくお願いいたします。