Twitter の Bootstrap は、現在最も人気のあるフロントエンド フレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。
学習ポイント:
1.補助グループクラス
2. レスポンシブツール
このレッスンでは、主に Bootstrap の補助クラスとレスポンシブ ツールについて学習します。補助クラスはページ デザインを支援する一連のクラスを提供し、レスポンシブ ツールはメディア クエリを使用して特定のコンテンツを表示または非表示にします。
1.補助クラス
Bootstrap は、テキストの色と背景色の設定、閉じるアイコンの表示などに使用される、レイアウト内でいくつかの小さな補助グループ スタイルを提供します。
1. シナリオの文字色
样式列表 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危险红 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class="text-primary">Bootstrap 视频教程</p> <p class="text-success">Bootstrap 视频教程</p> <p class="text-info">Bootstrap 视频教程</p> <p class="text-warning">Bootstrap 视频教程</p> <p class="text-danger">Bootstrap 视频教程</p>
2. シーンの背景色
样式列表 样式名 描述 bg-primary 主要蓝 bg-success 成功绿 bg-info 信息蓝 bg-warning 警告黄 bg-danger 危险红 //各种色调的背景 <p class="bg-primary">Bootstrap 视频教程</p> <p class="bg-success">Bootstrap 视频教程</p> <p class="bg-info">Bootstrap 视频教程</p> <p class="bg-warning">Bootstrap 视频教程</p> <p class="bg-danger">Bootstrap 视频教程</p>
3. 閉じるボタン
<button type="button" class="close">×</button>
4. 三角形のシンボル
<span class="caret"></span>
5. クイックフロート
<div class="pull-left">左边</div> <div class="pull-right">右边</div>
注: この float は実際には float ですが、優先度を強化するために ! important が使用されています。
6. ブロックレベルのセンタリング
<div class="center-block">居中</div>
注: は margin:x auto であり、display:block; が設定されています。
7. フロートを掃除します
<div class="clearfix"></div>
注: この div は、クリーンアップする必要があるフローティング ブロックの前に配置できます。
8. 表示と非表示
<div class="show">show</div> <div class="hidden">hidden</div>
2.レスポンシブツール
メディアクエリを実行する場合、さまざまな画面サイズに合わせて一部のコンテンツを表示または非表示にする必要がある場合があります。レスポンシブ ツール クラスは、このソリューションを提供します。
//超小屏幕激活显示 <div class="visible-xs-block a">Bootstrap</div> //超小屏幕激活隐藏 <div class="hidden-xs a">Bootstrap</div>
注: 表示されるコンテンツには、ブロック、インラインブロック、インラインの 3 つのバリエーションがあります。
以上、編集者が紹介したBootStrapコンポーネントの補助グループクラスとレスポンシブツールに関する内容でしたので、皆様のお役に立てれば幸いです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
