Bootstrap 3.0 学習ノートグリッドシステムの原則

前の 2 つの記事の簡単な紹介を通じて、Bootstrap についての基礎的な理解が得られました。 Bootstrap 公式サイトを通じて簡単なことを学びたいだけなので、あまり複雑ではないページを作るだけで済みます。初心者の方はぜひご覧になってみてください。きっとお役に立つと思います。ただし、専門家の方はご遠慮ください。

「Bootstrap 3.0 学習ノート」では、ファイルのダウンロード方法やダウンロードしたファイルの参照方法を簡単に紹介しているだけで、フロントエンドデザインの学習にはまだ本格的には入っていません。また、多くのネットユーザーが Bootstrap 3.0 に大きな関心を持っていることもわかりました。中には、以前から使用していた専門家もいれば、私のようにこれから学習しようとしている友人や初心者もいます。最もよくある返事の一つは、「シリーズ化できたらいいなと思います」というものです。もちろん、シリーズをうまく計画して、このアウトラインに沿えたらいいなとも思っています。しかし、私の能力には限界があるので、自分の好みに合わせて学習しなければなりません。

免責事項：私の文章力は本当に下手なので、ご容赦ください。間違いがありましたら、早めにお知らせください。できるだけ早く修正いたします。もちろん、もっと多くの人が一緒に学べることを願っています。

グリッドシステム（レイアウト）

Bootstrap には、画面サイズやビューポートの拡大に応じてグリッドを最大 12 列に自動的に分割する、レスポンシブでモバイルファーストの流動的なグリッドシステムが組み込まれています。

ここでは、Bootstrap レイアウトのグリッドシステムを呼び出します。一連の行と列の組み合わせによってページレイアウトが作成され、作成したレイアウトにコンテンツを配置できるようになります。 Bootstrap グリッドシステムの仕組みを簡単に紹介します。

行に適切な配置とパディングを施すには、行を .container に含める必要があります。行を使用して、水平方向に列のセットを作成します。コンテンツは列内に配置する必要があり、行の直接の子となることができるのは列のみです。 .row や .col-xs-4 などの定義済みグリッドクラスを使用すると、グリッドレイアウトをすばやく作成できます。 Bootstrap ソースコードで定義されたミックスインを使用して、セマンティックレイアウトを作成することもできます。パディングを設定して列間にガターを作成します。次に、最初の要素と最後の要素に負のマージンを設定して、パディングの効果を相殺します。グリッドシステムの列には、列が及ぶ範囲を表す 1 ～ 12 の値が割り当てられます。たとえば、 .col-xs-4 を 3 つ使用すると、同じ幅の 3 つの列を作成できます。

DW6 エンコーディング実装

さて、コードを書き始めましょう。まずは私が使っているエディタの写真を見てみましょう。学校でHtml+CSSを学んでいたときによく使っていたツールです。

次に、新しいHTMLドキュメントを作成し、HTML5タイプを選択します。

作成後、前のセクションの js および css フォルダーと同じディレクトリに保存します。

layout.html は私が作成したファイルです。 Bootstrap.html は、前のセクションで作成された最初の HTML ページでもあります。

これで、Bootstrap.html 内のすべてのコードを layout.html ページにコピーできます。

次に、bodyタグの下に次のコードを追加します。

コードをコピー

コードは次のとおりです。

<h1>こんにちは、世界！</h1>
<h2 class="page-header">地域 1</h2>
<p>Bootstrap には、すぐに使い始めるための簡単な方法がいくつか用意されており、それぞれがさまざまなスキルレベルと使用例に適しています。全体を読み、自分の特定のニーズに合ったものを見つけてください。</p>
<h2 class="page-header">地域 2</h2>
<p>Bootstrap のコンパイルされていないソースコードを使用する場合は、LESS ファイルをコンパイルして使用可能な CSS ファイルを作成する必要があります。LESS ファイルを CSS にコンパイルする場合、公式にサポートされているのは、less.js に基づく Twitter の CSS ヒントである Recess のみです。</p>
<h2 class="page-header">地域 3</h2>
<p>ダウンロード内には、共通リソースを論理的にグループ化し、コンパイル済みと縮小済みの両方のバリエーションを提供する次のディレクトリとファイルが含まれています。</p>

これらのラベルは最も基本的かつ単純なので、誰でも理解できるはずです。

追加後、layout.htmlページのすべてのコードは次のようになります。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<title>ブートストラップ</title>
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <pre></pre> <pre><font face="Arial">
 
</head>
<本文>
<h1>こんにちは、世界！</h1>
<h2 class="page-header">地域 1</h2>
<p>Bootstrap には、すぐに使い始めるための簡単な方法がいくつか用意されており、それぞれがさまざまなスキルレベルと使用例に適しています。全体を読み、自分の特定のニーズに合ったものを見つけてください。</p>
<h2 class="page-header">地域 2</h2>
<p>Bootstrap のコンパイルされていないソースコードを使用する場合は、LESS ファイルをコンパイルして使用可能な CSS ファイルを作成する必要があります。LESS ファイルを CSS にコンパイルする場合、公式にサポートされているのは、less.js に基づく Twitter の CSS ヒントである Recess のみです。</p>
<h2 class="page-header">地域 3</h2>
<p>ダウンロード内には、共通リソースを論理的にグループ化し、コンパイル済みと縮小済みの両方のバリエーションを提供する次のディレクトリとファイルが含まれています。</p> <script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</本文>
</html>

もちろん効果は非常にシンプルですが、比較できるようにスクリーンショットをここに載せておきます。

最適化 1: 上の画像では、ページ効果が画面全体を占めていることがわかります。Bootstrap スタイルクラスを使用して、上のコンテンツを中央に配置できます。

コードをコピー

コードは次のとおりです。

<div class="container"> .........上記の body タグの下に追加されたコード</div>

効果は以下のとおりです

コンテナクラスが幅を設定し、コンテンツをページの中央に表示できるようにしていることがわかります。

最適化 2: 3 つの領域を同じ行に表示し、3 つの列に均等に分割します。

まず、3 つの領域用のコンテナーを追加します。div を使用して、div にクラス <div > を追加できます。

次に、各小さな領域にコンテナdivを追加し、divにクラス<div>を追加します。

簡単なコードは以下のとおりです

コードをコピー

コードは次のとおりです。

<div class = "container"> <h1> hello、world！</h1> <div class = "row"> <div class = "col-xs-4"> <h2 class = "page-header"> </h2> <p> bootstrapには、すぐに始めるための簡単な方法があります。 <h2 class = "page-header">区域二</h2> <p> Bootstrapの非コンパイルされたソースコードを操作する場合は、使用可能なCSSファイルを作成するために、より少ないファイルを作成する必要があります。区域三</h2> <p>ダウンロード内に、次のディレクトリとファイルが見つかり、一般的なリソースを論理的にグループ化し、コンパイルされたバリエーションと模倣バリエーションの両方を提供します。

効果は以下のとおりです

確かに一列に並んでいて、3 つの列に分かれています。これを上記のグリッドシステムの 6 つの原則と組み合わせてみましょう。少しは理解できましたか？とにかく、かなり理解できました。同様に、より複雑なグリッドレイアウトページを作成することもできます。レイアウトで使用されるコンテナーに、対応するグリッドレイアウトクラスを追加するだけです。たとえば、コンテンツが 6 つのグリッドを占める場合は col-xs-6 クラスを追加し、4 つのグリッドを占める場合は col-xs-4 クラスを追加して、同じ行の周囲に行クラスを持つコンテナーを使用します。

要約する

このセクションでは、主にレイアウト (グリッドシステム) について学習し、簡単な例を使用してその仕組みを理解します。

使用されるクラスは次のとおりです。

1..container: .container を使用してページ上のコンテンツをラップし、中央揃えを実現します。コンテナの最大幅は、グリッドシステムに合わせて、さまざまなメディアクエリまたは値の範囲で設定されます。

2..col-xs-4: このクラスは「-」によって 3 つの部分に分割されます。3 番目の部分の数字は一般的な用語であり、その範囲は 1 から 12 です。つまり、領域を 12 列に分割できます。これは、行クラスと組み合わせて使用する必要があります。

実際、このレイアウトは HTML のテーブルレイアウト TR 行と TD 列に非常に似ています。

今のところはこれですべてです。コードをコピーして貼り付けるだけで効果を確認できます。もちろん、最初に css ファイルと js ファイルを準備する必要があります。

<<: 背景画像のみを180度回転させるCSS3実装例

>>: Docker コンテナのタイムゾーンエラーの問題