TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
学習のための重要なポイント：
1。補助グループ
2。レスポンシブツール
このレッスンでは、主にBootstrapの補助グループクラスとレスポンシブツールについて学びます。補助クラスは、グループページのデザインを支援する一連のクラスを提供しますが、レスポンシブツールはメディアクエリを使用して特定のコンテンツを表示または非表示にします。
1つ。補助
Bootstrapは、レイアウトの観点からいくつかの小さな補助グループスタイルを提供します。これは、テキストの色と背景色の設定、閉じるアイコンなどに使用されます。
1。状況テキストの色
スタイルリストスタイル名説明チュートリアル</p> <p> bootstrapビデオチュートリアル</p> <p> bootstrapビデオチュートリアル</p> <p> bootstrapビデオチュートリアル</p> <p> bootstrapビデオチュートリアル</p>
2。状況の背景色
スタイルリストスタイル名の説明チュートリアル</p> <p> bootstrapビデオチュートリアル</p> <p> bootstrapビデオチュートリアル</p> <p> bootstrapビデオチュートリアル</p>
3。ボタンを閉じます
<button type = "button">×</button>
4。三角記号
<span> </span>
5。すぐに浮かんでいます
<div>左</div> <div>右</div>
注：このフロートは実際にはフロートですが、使用されています！
6。ブロックレベルの中心
<div> center </div>
注：マージン：x auto;ディスプレイ：ブロック;設定されています。
7.フロートをきれいにします
<div> </div>
注：このdivは、クリーニングする必要があるフローティングブロックの前に配置できます。
8。表示して非表示にします
<div> show </div> <div> hidden </div>
二。レスポンシブツール
メディアを検索するとき、一部のコンテンツを表示して、さまざまな画面サイズのために非表示にする必要があります。 Responsive Toolsクラスはこのソリューションを提供します。
//スーパースモールスクリーンアクティベーションディスプレイ<div> bootstrap </div> //スーパースモールスクリーンアクティベーションHide <div> bootstrap </div>
注：表示されたコンテンツには、ブロック、インラインブロック、インラインに3つのバリアントがあります。
上記は、編集者が紹介したブートストラップコンポーネントの補助グループクラスとレスポンシブツールの関連コンテンツです。それがあなたに役立つことを願っています！