先ほど、Bootstrap と HTML5 ボイラープレートを使用して基本的なプロジェクト フレームワークを構築しましたが、実際のコンテンツはまだなく、コンテンツの追加を開始できます。プロジェクトの開始点である、index.html に戻ります。最初にドキュメントのタイトルを設定するので、気楽にタイトルを選択してください:
<title>有标题文档</title>
とてもカジュアルなので、あまり真剣に考えすぎないでください。次に、次のページ本文コンテンツを追加します:
index.html にある次の予約テキストを削除します。置き換えます:
24 <!-- Add your site or application content here -->25 <p>Hello world! This is HTML5 Boilerplate.</p>
は次のコードで構成されています:
<header role="banner"> <nav role="navigation"> </nav></header><main role="main"> <h1>Main Heading</h1> <p>Content specific to this page goes here.</p></main><footer role="contentinfo"> <p>Copyright © Company Name</p></footer>
ここでは、HTML5 仕様によって追加された、ヘッダー、メイン、フッターなどの要素を使用します。最新のブラウザでサポートされているため、安心して使用できます。まだ全画面 div の時代に留まっている場合、他の友人がこれらを認識できないのではないかと思います。要素があるため、これらの要素にスタイルを適用することはできませんが、私のプロジェクトでは Modernizr.js スクリプトを導入しているため、IE8 はこれらの要素をサポートできます。これは、ユーザーが JavaScript を有効にしていることが前提となります。そうでない場合はさらに悪いことになりますが、このような状況はまれですが、完全に無視することはできません。そのため、HTML5 要素のないバージョンにジャンプするリンクを提供するなど、JavaScript を有効にしていないブラウザー用に代替コンテンツを用意することができます。 。 role 属性は、WAI-ARIA 仕様のランドマーク ロール/ランドマーク ロール部分に属し、たとえば、スクリーン リーダーがロールを含むページ上の HTML 要素に遭遇した場合に、この要素によって果たされるロールをユーザー エージェントに伝えるように設計されています。 ="navigation" の場合、スクリーン リーダーは、この HTML 要素がナビゲーションに使用されることを認識します。ここで、ナビゲーション バーを追加したいのですが、たまたま Bootstrap にこのコンポーネントがあったので、Bootstrap のサンプル コードを直接移動しました。以下はコードのヘッダー部分です。
<header role="banner"> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Project name</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav></header>
上記のコードを注意深く分析した結果、 navbar がナビゲーションであることを見つけるのは難しくありません。 bar コンポーネントのメイン クラス navbar-default が外観クラスです。これが気に入らない場合は、別の外観 navbar-inverse もあります。 CSS ファイルを変更してデフォルトのスタイルを変更することもできます (現時点ではこれはお勧めしません)。また、navbar-awesome クラスまたは他の名前を自分で定義して (awesome とは、私の辞書では背が高いという意味です)、美しいスタイルを追加することもできます。 navbar-static-top は位置スタイルであり、静的が一番上にあり、スクロール バーでスクロールすることを示します。名前が示すように、navbar-fixed-top と navbar-fixed-bottom という 2 つの位置スタイルもあります。見た目のスタイルとポジションのスタイルを完全に分離することを意味します。次のように保存してブラウザで開きます:
とても美しいです!ナビゲーション バーにレスポンシブ機能を追加するには、Bootstrap の公式 Web サイトのドキュメントであるナビゲーション バーを参照する必要があるため、.navbar-header を次のように変更します。
<div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Project name</a></div>
data 属性は、で追加されたカスタム属性です。 HTML5 仕様では、data- の後に任意の有効な名前と任意の値を続けることができます。同時に、将来の新しい属性との名前の競合を避けるために、このメソッドを使用して HTML 要素にカスタム属性を追加することをお勧めします。検証に合格することもできます。
<div data-xxx="xxx">
data-toggle="collapse" 属性は、Bootstrap の Collapse.js プラグインによって定義された使用法であり、すべての Bootstrap プラグインはデータ属性 API を通じて使用でき、data-target 属性の値はそれを示します。したがって、このプラグインを使用するには、いくつかの属性を追加するだけでよく、JavaScript コードを 1 行も記述する必要はありません。 data-target 属性の値に従って、このプラグインの機能に応答するために、class="navbar-collapse" を含む別の要素を追加する必要があります。既存のリンク リストを div でラップし、必要なクラスを追加するだけです。 :
<div class=<strong>"navbar-collapse collapse"</strong>> <ul class="nav navbar-nav"> ... </ul></div><!-- end .navbar-collapse -->
Firefox 15 以降のレスポンシブ デザイン ビュー (Ctrl + Shift + M) を使用してページを開き、ページ幅が 768 ピクセル未満 (768 ピクセルは小さいほう) になるとウィンドウ幅が徐々に狭くなることがわかります。画面デバイスとブートストラップによって定義された超小型画面 (デバイス間の重要なポイント)、ナビゲーション リンクが消え、右上隅に追加のボタンが表示されます:
右上隅のボタンをクリックすると、ナビゲーション リンクが表示されますは別の形式で表示されます:
このようにして、クールな応答が表示されます。 ナビゲーション バーは基本的に完成です。次に、ナビゲーションの下に画像カルーセル効果を追加します。まず、いくつかの画像を準備する必要があります。ブートストラップの公式 Web サイトの例を参照して、メイン要素のコンテンツを次のコードに置き換えます。必要ありません。JavaScript コードを 1 行記述するだけで、問題なく実行されます。
我用的是一张什么内容都没有的灰色图片，所以看起来是这样，也可以给每个 .item 添加一些描述性的文字：
<div class="item"> <img alt="..." src="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div></div>
接下来再添加一个三列的内容展示：
<div class="container"> <div class="row"> <div class="col-sm-4"> <h2>Welcome!</h2> <p>Suspendisse et arcu felis ...</p> <p><a href="#">See our portfolio</a></p> </div> <div class="col-sm-4"> <h2>Recent Updates</h2> <p>Suspendisse et arcu felis ...</p> <p><a href="#">See what's new!</a></p> </div> <div class="col-sm-4"> <h2>Our Team</h2> <p>Suspendisse et arcu felis ...</p> <p><a href="#">Meet the team!</a></p> </div> </div><!-- end .row --></div><!-- end .container -->
这里使用了 Bootstrap 自带的12列响应式网格系统，.col-sm-4 表示一个内容块占据4列：
当窗口宽度小于 768px 的时候：
响应式的布局，非常好！可是我并不想使用类似 .col-sm-x 之类的 class，因为如果哪天我不想一行放3列了，我想一行放2列，那我岂不是要把 .col-sm-4 改成 .col-sm-6？未完待续
Bootstrap Site Blueprints: Design mobile-first responsive websites with Bootstrap 3 by David Cochran & Ian Whitley
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
