このクラスの前のセクションでは、内部トレーニング会社のコーポレートウェブサイトである最初のプロジェクトの設計を開始しました。このクラスは、レスポンシブナビゲーションの部分を学びます。
基本的なナビゲーションコンポーネント +レスポンシブ：
//基本的なナビゲーションコンポーネント +応答性<Nav> <div> <a href = "＃" style = "margin：0; padding：0;"> <img src = "img/logo.png"> </a> <ボタンタイプ= "button" button "button" data-toggle = "collapse" collapse "＃span" </button> </div> <div id = "navbar-collapse"> <ul style = "margin-top：0;"> <li> <a href = "＃"> </span> home </a> </li> <li> </li> <li> <a href = "＃"> <span> </span> </a> </li> </ul> </div> </div> </nav>
次のセクションでは、ナビゲーションバーの下にカルーセルの写真を作成して、最新の重要なニュースを自動的に再生します。
//レスポンシブカルーセル図<div id = "mycarousel"> <ol> <li data-target = "＃mycarousel" data-slide-to = "0"> </li> <li date-target = "＃mycarousel" data-slide-to = "1"> </li> <li> </li> </li> </pl> </> </plide <div style = "background：＃223240;"> <a href = "＃"> <img src = "img/slide1.png"> </a> </div> <div style = "背景：＃f5e4dc;" style = "background：＃de2a2d;"> <a href = "＃"> <img src = "img/slide3.png"> </a> </div> </div> </div> </a href = "＃mycarousel"＃mycarousel "slide =" pred "> ‹</a> <a href ="
//必要なjQueryコントロール$（ '＃mycarousel'）。カルーセル（{// autoplay/2秒間隔：3000、}）; //カルーセル矢印の位置$（'。Carousel-Control '）を調整します。 $（window）.resize（function（）{var $ height = $（'。carousel-inner img '）。eq（0）.height（）.height（'。Carousel-inner IMG '）。eq（1）.height（）|| $（'。Carousel-inner img '）。eq（1）.height（1）。 img '）。eq（2）.height（）; //必須cssa：focus {outline：none;}。navbar-brand {padding：0;}＃mycarousel {margin：50px 0 0 0;}。それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はすべてこの記事に関するものであり、誰もがブートストラッププログラミングを学ぶことが役立つことを願っています。