Bootstrap3を使用して複数のレスポンシブ列を作成する方法
公開: 2022-02-16
Bootstrapを使用してWebサイトの応答性を向上させますか？ Bootstrapの最も重要な側面は、12列のモバイルファーストグリッドシステムです。 これは、レスポンシブレイアウトを作成するために使用するものです。
このビデオチュートリアルでは、Bootstrapを使用して基本的なWebサイトを作成し、Bootstrapグリッドシステムを使用して複数の列を持つレスポンシブレイアウトを作成する方法を学習します。
チュートリアルを見る前に
以下のビデオチュートリアルに従って、独自のレスポンシブ列を作成する方法を学ぶ前に、次のものが必要です。
- Bootstrapとは何かに関する基本的な理解
- Bootstrapグリッドシステムとは何かに関する基本的な理解
- Bootstrapをハードドライブにダウンロードします
- 構築する基本的なBootstrapindex.htmlファイルを作成します
ブートストラップとは
- Bootstrapは、Webサイトの応答性に取り組むHTML、CSS、およびJavaScript開発者向けのフレームワークです。
- これは、列、リスト、ナビゲーション、Webフォーム、およびその他の多くのWeb要素用に事前に構築されたレスポンシブCSSスタイルで構成されています。
ブートストラップグリッドシステムを理解する
- ブートストラップグリッドシステムは、画面サイズを極小、小、中、大の4つのタイプに分類します。
- エクストラスモールは携帯電話用です。 Smallは、I-Padのようなタブレット用です。 Mediumはデスクトップモニター用です。 また、Largeは、大型のデスクトップモニター専用です。
- Bootstrapは、これら4種類の画面の応答性を微調整できるように、Web表示デバイスの幅を12列のグリッドシステムに分割します。
- これらの4つのブートストラップグリッドタイプはすべて、独自に指定されたCSSクラスを割り当てた場合にのみレスポンシブになります。
- たとえば、非常に小さなデバイスに対してdivを応答させるには、divに<div class = "col-xs-6">のような独自のBootstrap.col-xs- <number_of_columns_to_take>クラスが必要です。
ブートストラップのダウンロード
- getboostrap.comにアクセスし、[ブートストラップのダウンロード]ボタンをクリックします。
- 「はじめに」ページが表示されます。 [ブートストラップのダウンロード]ボタンをクリックします。
- このファイルをコンピュータのハードドライブの好きな場所に保存します。 Webサーバーに保存する必要はありません。
- このファイルを解凍し、解凍したフォルダの名前を「bootstrap」に変更します。
基本的なブートストラップindex.htmlページの準備
ステップ1。 Bootstrapindex.htmlファイルを作成します
- 「はじめに」（http://getbootstrap.com/getting-started/#download）ページに戻り、右側のサイドバーにある「基本テンプレート」リンクをクリックします。
- 「基本テンプレート」コードが表示されます。 「コピー」ボタンをクリックして、コードをコピーします。
- 「基本テンプレート」コードをテキストエディタに貼り付け、「bootstrap」フォルダを保存したのと同じフォルダにindex.htmlとして保存します。 これで、Bootstrapサイトのフロントページになります。
- 新しく作成されたindex.htmlを開き、基本的なBootstrapWebサイトを確認します。
- テキストエディタでindex.htmlファイルを開き、開始<body>タグと<h1>タグの間に<div class = "container">（1）を追加します。 </ h1>タグ（2）を閉じた後、この新しいdivを閉じて、ファイルを保存します。
- ページのフロントエンドを確認して、「HelloWorld！」に注目してください。 ページの端に固定されなくなり、少し右に移動して、少しきれいに見えるようになりました。 このdivに割り当てたBootstrapの「container」クラスにより、このテキストにマージンが追加されました。
- index.htmlファイルに戻ります。 <h1>タグと</ h1>タグの間で、「HelloWorld！」を置き換えます。 「Trusthub」へ。 ファイルを保存し、サイトのフロントエンドを確認します。
ステップ2。 コンテンツとサイドバーを追加する
- index.htmlファイルに戻り、<h1> Trustub </ h1>コードの下に次のコードをコピーして貼り付けます。
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>
- サイトのフロントエンドに戻ります。 更新してください。 これで、コンテンツと「チーム」サイドバーが表示されますが、レスポンシブレイアウトが列になっているわけではありません。
- getbootstrap.com Webサイトに戻り、トップメニューで[CSS]ボタンをクリックします。
- サイドバーで[グリッドシステム]ボタンをクリックします。
- ページを下にスクロールして[グリッドオプション]セクション（1）に移動し、4つの画面サイズタイプ、幅、および指定されたCSSクラスプレフィックス（2）を備えたBootstrap12列グリッドシステムに注意してください。
- Bootstrapグリッドシステムオプションがまだ意味をなさなくても心配しないでください。 あなたがあなたのサイトでそれらをいじり始めるとき、それはあなたのためにすぐに一緒になります。
- index.htmlファイルをもう一度開き、<div class = "row">の下に、既存の<div>にクラス「col-md-9」と入力します。 新しいdivは「divclass = "col-md-9">」のようになります。
- 次に、<h2>「OutTeam」ヘッダーのすぐ上にあるdivに移動し、「col-md-3」ブートストラップグリッドCSSクラスを指定します。 ファイルを保存します。
- サイトに戻って、この変更が実際に行われていることを確認してください。 キーボードのF5キーを押して、Webサイトを更新します。 これで、コンテンツ領域とサイドバーが並んでいることがわかります。
- コンテンツdivは、ブートストラップグリッドの12列で利用可能なもののうち9つを占めています（デスクトップ画面全体の幅の75％）。 また、サイドバーは、ブートストラップグリッドの12列のうち3列（デスクトップ画面全体の幅の25％）を使用します。
素晴らしい！ これで、次のビデオチュートリアルに従う準備が整いました。 始めましょう。
おめでとう！ Bootstrapを使用して、複数の列を持つレスポンシブWebページレイアウトを作成する方法を学びました。 Bootstrapについてもっと知りたいですか？ はいの場合は、OSTraining YouTubeチャンネルにアクセスして、「BootstrapFrameworkTutorials」をご覧ください。