Bootstrap が基本レイアウトを実装する方法の詳細な説明-PHP开发-php.cn

Bootstrap が基本レイアウトを実装する方法の詳細な説明

PHPz

リリース： 2018-10-13 14:47:18

オリジナル

9730 人が閲覧しました

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 をこのディレクトリにコピーします。

の間に jquery とブートストラップスクリプトライブラリの参照をすぐに追加します。

<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より大きい

Bootstrap が基本レイアウトを実装する方法の詳細な説明

は768pxより小さい

Bootstrap が基本レイアウトを実装する方法の詳細な説明

4.3 サンドイッチメニュー

を縦型ナビゲーションにするのは不便です、このように人気のあるスタイルになることを願っています。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

一方で、ビューポートが特定の幅より小さい場合、特定のナビゲーションが表示され、追加のナビゲーションコンテンツが追加されることを示す必要があります。

<!-- 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官方文档中拿到的图片给出了一个很好的展示。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

这张表格则给出了详细的说明。

Bootstrap が基本レイアウトを実装する方法の詳細な説明

现在页面看起来是这样的。

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=&#39;#&#39;>Another Link 1</a></li>
 <li><a href=&#39;#&#39;>Another Link 2</a></li>
 <li><a href=&#39;#&#39;>Another Link 3</a></li>
 </ul>
</p>

ログイン後にコピー

看看最终的效果，一个基于 bootstrap 的响应式布局页面就完成了。

Bootstrap が基本レイアウトを実装する方法の詳細な説明