Bootstrap サイトを 20 分で構築するという記事を拝見しました。内容は少し古いですが、Bootstrap3 を再利用して、できるだけ詳しく内容を説明しました。
1. 基本的なページを作成します
まず、このページは sublime + emmet を使用して直接作成できます。
1.1 新しいファイルを作成します、Ctrl + N
1.2 ページファイルに保存します、Ctrl + S、名前を付けます。index.html
1.3 この空白のページで、「html:5」と入力し、直接 Tab キーを押します, 基本的な HTML5 テンプレート ページが表示されるはずです。
1.4 もう一度保存し、Ctrl + S を押します。
ページのコンテンツは次のようになります:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2. Bootstrap ファイル参照を追加します
index.html ファイルが配置されているフォルダーに css を作成しますすべてのスタイル ファイルを保存し、css サブフォルダーに bootstrap という名前のフォルダーを作成して、ブートストラップ ファイルを保存します。
ブートストラップ パッケージはブートストラップ公式 Web サイトからダウンロードできます。この Web サイトには dist フォルダーがあり、その中には css、font、js の 3 つのサブフォルダーが含まれています。これら 3 つのサブフォルダーを css/bootstrap フォルダーにコピーします。
このページには、スタイルとスクリプトという 2 つのコンテンツ部分が含まれています。
2.1 スタイル参照を追加
ヘッダーにブートストラップ スタイル参照を追加します。パスに注意してください。
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <link href="css/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
bootstrap.min.css は、すべてのブートストラップ スタイル定義を含むブートストラップのスタイル ファイルで、bootstrap-theme.min.css はテーマ定義です。
2.2 スクリプトリファレンスの追加
ブートストラップはjQueryスクリプトを使用するため、jqueryスクリプトライブラリもダウンロードする必要があります。
index.html ファイルが配置されているディレクトリに、将来使用するためにスクリプト ライブラリを保存するための lib という名前のサブディレクトリを作成し、ダウンロードした jquery.min.js をこのディレクトリにコピーします。
<script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body>
3. ブートストラップ コンテナを追加します
bootstrap の .container クラスは非常に便利で、ページ内に中央の領域を作成し、その中に他の場所のコンテンツを配置できます。コンテナ クラスは、静的な幅と auto の magin 値を持つ中央揃えの p ボックスを作成するのと同じです。 twitter bootstrapのコンテナクラスの利点はレスポンシブであり、現在の画面の幅から最適な幅を計算して使用します。
.container-fluid は、幅全体を使用する全幅コンテナです。
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}bodyタグ内に、コンテナクラスを使用してpを作成します。これは、ページに他のコードを配置するためのメインの外側のパッケージとして機能します
ちなみに、ページは次のようになります。
Twitter Bootstrap Tutorial - A responsive layout tutorial <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script> </body>
ログイン後にコピーブラウザにはまだ多くのコンテンツが表示されませんが、その後の操作の基礎は築かれています。
4. タイトルとナビゲーション
これで、表示されるコンテンツをページに追加できます。4.1 タイトル
タイトルの追加は非常に簡単で、h1 要素を追加するだけです。<p class="container"> <h1>Twitter bootstrap tutorial</h1> </p>ログイン後にコピーページを更新すると、目を引くタイトルが表示されるはずです。次にナビゲーションについて見ていきます。
4.2 ナビゲーション
ナビゲーションは nav 要素を使用して作成できます。ブートストラップでは、ナビゲーション バーを navbar と呼びます。引き続き、コンテナーにナビゲーション バーを追加します。<p class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> </nav> </p>ログイン後にコピーnavbar は、ナビゲーション バーの作成に役立ちます。navbar-inverse は、背景色が黒になり、テキストが白になるように反転に設定されています。ここでページを更新すると、ナビゲーション コンテンツのない黒いナビゲーション バーが表示されます。
次のようにナビゲーション コンテンツを追加します
<p class="container"> <h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <p class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </p> </nav> </p>ログイン後にコピーul は実際のナビゲーション コンテンツで、.nav はこれがナビゲーションのセットであることを示し、.navbar-nav は navbar のナビゲーションに使用されることを示します。 li は実際のナビゲーション項目であり、.active を使用して現在アクティブなナビゲーションを記述することができます。
.navbar-collapse に注意してください。これは、ビューポートの幅が 768 ピクセル未満の場合、ナビゲーションが垂直になることを意味します。
は768pxより大きい
は768pxより小さい
4.3 サンドイッチメニュー
を縦型ナビゲーションにするのは不便です、このように人気のあるスタイルになることを願っています。
一方で、ビューポートが特定の幅より小さい場合、特定のナビゲーションが表示され、追加のナビゲーション コンテンツが追加されることを示す必要があります。
<!-- Brand and toggle get grouped for better mobile display --> <p class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </p>ログイン後にコピー実はボタン部分は2つの部分で構成されており、右側のサンドイッチボタンを描画するために使用されます。次の a 要素は左側のナビゲーションです。
通常は表示されません。
然后，我们需要制定点击三明治按钮的时候，需要显示我们原来的导航。button 元素中，我们有一个 attribute ，data-target="#navbar-menu" ，就是用来完成这一步工作的，这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。
这样，我们的导航就是这样的了。
<h1>Twitter bootstrap tutorial</h1> <nav class="navbar navbar-inverse"> <!-- Brand and toggle get grouped for better mobile display --> <p class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </p> <p id="navbar-menu" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </p> </nav> </p>ログイン後にコピー5. 内容和边栏
主要内容部分，我们使用 p 来进行布局。<p id="content" class="row-fluid"> <p class="col-md-9"> <h2>Main Content Section</h2> </p> <p class="col-md-3"> <h2>Sidebar</h2> </p> </p>ログイン後にコピー这里使用了 bootstrap 的栅格布局，栅格系统利用了12列的布局，这意味着一个页面可以被分割成12个相同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展示。
这张表格则给出了详细的说明。
现在页面看起来是这样的。
6. 侧边栏导航
在侧边栏中添加一些导航内容。这里就是普通的导航，使用 .nav 进行声明，.nav-tabs 和 .nav-stacked 是导航的外观。<p class="col-md-3"> <h2>Sidebar</h2> <ul class="nav nav-tabs nav-stacked"> <li><a href='#'>Another Link 1</a></li> <li><a href='#'>Another Link 2</a></li> <li><a href='#'>Another Link 3</a></li> </ul> </p>ログイン後にコピー看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。
相关文章：
使用Bootstrap过渡效果Transition模态框（Modal）的方法
JS组件Bootstrap Table表格行拖拽效果实现代码
このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。著者別の最新記事
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
