Wheat Academy ブートストラップ紹介ビデオの推奨教材 (コースウェアソースコード)-htmlチュートリアル-php.cn

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

黄舟

リリース： 2017-08-27 10:03:37

オリジナル

2124 人が閲覧しました

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

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

コース再生アドレス: //m.sbmmt.com/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 サイトの他の関連記事を参照してください。