ホームページ > 記事 > ウェブフロントエンド > Bootstrap 3 を使用してレスポンシブ Web サイトを開発する実践 02、carousel_html/css_WEB-ITnose
Bootstrap 3 を使用してレスポンシブ Web サイトを開発する実践 02、carousel_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:59:031126ブラウズ
この記事で画像カルーセルを体験してください。 HTML 部分は次のとおりです:
<div class="carousel slide" id="myCarousel" > <!--Indicators--> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> <li data-slide-to="2" data-target="#myCarousel"></li> </ol> <!--wrapper for slides--> <div class="carousel-inner"> <div class="item active" id="slide1"> <img src="images/25.jpg"/> <div class="carousel-caption"> <h4>马塔破门曼联平</h4> <p>2014/15赛季英格兰足球超级联赛第2轮一场焦点战在光明球场展开角逐</p> </div> </div> <div class="item" id="slide2"> <img src="images/26.jpg"/> <div class="carousel-caption"> <h4>鲁尼范佩西召唤天使</h4> <p>客场被桑德兰1-1逼平，曼联虽然拿到一分，但显然红魔从上到下没人会满意2战1分的惨淡结果。</p> </div> </div> <div class="item" id="slide3"> <img src="images/27.jpg"/> <div class="carousel-caption"> <h4>迪马利亚今日飞抵曼联体检</h4> <p>曼联引进迪马利亚的交易已经只差官方宣布,这无疑是替红魔官方宣布了这笔交易。</p> </div> </div> </div> <!--controller--> <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a> </div><!--图片展示区域结束-->
○ カルーセルのすべてのコンテンツは class="carousel slide" の div でラップされます
○ カルーセルは 3 つの部分に分かれています: ドット表示、ol 画像、タイトル、説明 div 実装; 左矢印と右矢印は
を使用して実装されています。 /
http://www.tutorialspoint.com/
http://www.placehold.it/
Bootstrap 3 を使用してレスポンシブ Web サイトの実践を開発する01、事前準備、ナビゲーションエリアなど
Bootstrap 3を使ったレスポンシブWebサイト開発の実践 02、カルーセル
Bootstrap 3を使ったレスポンシブWebサイト開発の実践 03、カルーセル下のコンテンツレイアウト
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：以下の余分な幅を削除する方法についてアドバイスをお願いします。CSS カスケード スタイルを使用して画像の上にアップロードしたコントロールを配置しましたが、下にまだ余分なスペースがたくさんあります。これらのスペースを削除するにはどうすればよいですか?以下は私の webpage_html/css_WEB-ITnose です次の記事：以下の余分な幅を削除する方法についてアドバイスをお願いします。CSS カスケード スタイルを使用して画像の上にアップロードしたコントロールを配置しましたが、下にまだ余分なスペースがたくさんあります。これらのスペースを削除するにはどうすればよいですか?以下は私の webpage_html/css_WEB-ITnose です