Wheat Academy ブートストラップ紹介ビデオの推奨教材 (コースウェア ソース コード)

Bootstrap は、Twitter がリリースした最も人気のあるフロントエンド フレームワークの 1 つです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、一般的な CSS レイアウト、一般的に使用されるコンポーネント、および JavaScript プラグインを完全かつ完全にカプセル化しているため、経験の浅いフロントエンド エンジニアやバックエンド開発エンジニアでもすぐに使用できます。開発効率が大幅に向上し、フロントエンドチームの CSS や JavaScript の記述もある程度標準化されます。つまり、Bootstrapを学ぶことでレスポンシブなWEBプロジェクトを簡単に開発できるようになります。 「Wheat Academy ブートストラップ入門ビデオチュートリアル」は、ブートストラップを簡単に始めるのに役立ちます。

コース再生アドレス: http://www.php.cn/course/324.html

先生の教え方:

先生の講義は鮮やかで機知に富み、機知に富んでいて、感動。鮮やかな比喩は最後の仕上げのようなもので、生徒に知恵への扉を開きます。適切に配置されたユーモアは、まろやかなワインを飲むように、人々に後味と郷愁を与え、哲学者の格言や文化への言及をもたらします。ナレーションの中に時々散りばめられ、人々に考えさせ、警告を与えます。

このビデオのさらに難しい点は、Bootstrap グリッド システムの原理です。

Bootstrap には、応答性の高い、モバイル デバイス優先の流体グリッド システムが組み込まれており、画面デバイスまたはビューポートのサイズが大きくなるにつれて、システムが大きくなります。自動的に最大 12 列に分割されます。

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

グリッド システムの実装原理は非常にシンプルで、コンテナ サイズを定義し、それを 12 等分するだけです (24 等分することもできます)。 32 部分、ただし 12 部分が最も一般的です)、次に内側と外側のマージンを調整し、最後にメディア クエリと組み合わせて、強力な応答性の高いグリッド システムを作成します。 Bootstrap フレームワークのグリッド システムは、コンテナを 12 等分に分割します。

これを使用する場合、LESS (または Sass) ソース コードを再コンパイルして、実際の状況に応じて 12 の値を変更できます (つまり、24 または 32 に変更します。もちろん、それをさらに分割することもできます)ただし、この方法で使用することはお勧めできません)。

Bootstrap には、レスポンシブなモバイル デバイスのセットが組み込まれています。

1. データ行 (.row) は、適切な配置とパディングを行うためにコンテナー (.Container) に含まれている必要があります。例:

<div class="<span style="color: rgb(178, 34, 34);">container</span>">
<span style="white-space: pre;">	
</span><div class="<span style="color: rgb(178, 34, 34);">row</span>"></div>
</div>

2. 行 (.row) に列 (.column) を追加できますが、列数の合計が 2 等分された列の合計数 (12 など) を超えることはできません。例:

<div class="container">
<div class="row">
  <div class="col-md-<span style="color: rgb(178, 34, 34);">4</span>"></div>
  <div class="col-md-<span style="color: rgb(178, 34, 34);">8</span>"></div>

3. 特定のコンテンツは列コンテナー (column) 内に配置する必要があり、列 (column) のみが行コンテナー (.row) の直接の子要素として使用できます。

4. コンテンツのパディングを設定すると、列間にスペースが作成されます。次に、最初と最後の列に負のマージンを設定してパディングの効果を相殺します

以上がWheat Academy ブートストラップ紹介ビデオの推奨教材 (コースウェア ソース コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。