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

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

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

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

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

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

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

DW6 エンコーディング実装

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

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

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

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

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

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

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

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

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

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

効果は以下のとおりです

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

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

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

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

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

効果は以下のとおりです

確かに一列に並んでいて、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 ファイルを準備する必要があります。