Bootstrap で毎日パネルを学ぶ必要がある_JavaScript スキル

1. パネル

パネルは、ブートストラップ フレームワークの新しいコンポーネントであり、その主な機能は、他のコンポーネントでは完了できないいくつかの機能を処理することです。バージョンごとに異なるソース コードもあります:

☑ Less バージョン: 対応するソース コード ファイルは、panels.less

☑ Sass バージョン: 対応するソース コード ファイルは _panels.scss

☑ コンパイルされたブートストラップ: は、bootstrap.css ファイル

の行 4995 から 5302 に対応します。

2. パネル – 基本パネル

基本的なパネルは非常にシンプルで、「パネル」スタイルを使用して枠線付きのテキスト表示ブロックを生成する div コンテナです。 「panel」はテーマの色を制御しないため、色を制御するテーマ「panel-default」が「panel」に基づいて追加され、パネルのメインコンテンツを配置するために「div.panel-body」が内部に追加されます。

<div class="panel panel-default">
 <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

操作効果は次のとおりです:

原理分析:

「パネル」は主に特定の境界線、間隔、丸い角を設定します:

/bootstrap.css ファイルの 4995 行目～5005 行目/

.panel {
 margin-bottom: 20px;
 background-color: #fff;
 border: 1px solid transparent;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
 padding: 15px;
}

3. パネル – 頭と尻尾のあるパネル

基本的なパネルはシンプルすぎるように見えますが、パネルの機能を充実させるために、Bootstrap はパネルに「パネル ヘッダー」と「ページ フッター」効果を特別に追加します。

☑ パネル見出し: はパネルヘッダーのスタイルを設定するために使用されます

☑ パネルフッター: はパネル フッター スタイルを設定するために使用されます

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>

操作効果は次のとおりです:

原理分析:

パネル見出しとパネルフッターには間隔と丸い角のみが設定されています:

/bootstrap.css ファイルの 5006 行目～5030 行目/

.panel-heading {
 padding: 10px 15px;
 border-bottom: 1px solid transparent;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
 color: inherit;
}
.panel-title {
 margin-top: 0;
 margin-bottom: 0;
 font-size: 16px;
 color: inherit;
}
.panel-title > a {
 color: inherit;
}
.panel-footer {
 padding: 10px 15px;
 background-color: #f5f5f5;
 border-top: 1px solid #ddd;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
}

4. パネル – カラーパネル

「基本パネル」セクションでは、パネルのスタイルはテーマのスタイルを設定しないが、テーマのスタイルはpanel-defaultによって設定されることを学びました。デフォルトのテーマ スタイルに加えて、Bootstrap フレームワークのパネル コンポーネントには、カラフルなパネルを構成する次のテーマ スタイルも含まれています:

☑ パネルプライマリー: キーブルー

☑パネル-成功: 成功緑色

☑パネル情報:情報青

☑パネル警告: 黄色の警告

☑パネル危険: 危険レッド

使用方法は非常に簡単で、パネルのクラス名に基づいて必要なクラス名を追加するだけです。

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>
…
…
…
…
…

操作効果は次のとおりです:

これらのスタイルがパネルの背景色、テキスト、境界線の色を変更するだけであることを効果から見つけるのは難しくありません。特定のソース コードについては、bootstrap.css ファイルの 5195 行目から 5302 行目を参照できます。

5. パネル – パネル内のネストされたリスト グループ

前のセクションでは、パネルにテーブルを配置する方法を紹介しました。次に、パネルにリスト グループを配置する方法を学びましょう。

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">
  <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  </p>
  <ul class="list-group">
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
  </ul>
 </div>
 <div class="panel-footer">作者：大漠</div>
</div>

操作効果は次のとおりです:

コードの最適化:

ネストされたテーブルと同様に、間隔が適切でないと思われる場合は、リスト グループを抽出できます。

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <ul class="list-group">
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
 </ul>
 <div class="panel-footer">作者：大漠</div>
</div>

操作効果は次のとおりです:

同じ理由で、Bootstrap はパネルにネストされたリスト グループに対して特定のスタイルの最適化を行いました。特定のソース コードについては、bootstrap.css ファイルの 5031 行目から 5053 行目を参照できます。

パネルについては、Bootstrap パネルをより包括的に学習するのに役立つ基本パネル、カラー パネルなどを紹介しています。