ブートストラップパネルとは何ですか-ブートストラップのチュートリアル-php.cn

ブートストラップパネルとは何ですか

青灯夜游

リリース： 2022-04-12 13:18:28

オリジナル

5108 人が閲覧しました

ブートストラップでは、panel は DOM コンポーネントをボックスに挿入するために使用される「panel」コンポーネントを指します。このコンポーネントを作成するには、「panel」および「panel-xxx」スタイルを div 要素に追加するだけです。以上で、枠線付きのテキスト表示ブロックが生成され、「panel-xxx」スタイルを使用してテーマカラーを設定します。

ブートストラップパネルとは何ですか

#このチュートリアルの動作環境: Windows7 システム、bootsrap3.3.7 バージョン、DELL G3 コンピューター

#1、パネル

Panel (

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

☑

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

☑

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

☑ コンパイルされた

Bootstrap: bootstrap.css ファイルに対応します 4995 行目～ 5302 行目

2. パネル – 基本パネル

基本パネルは非常にシンプルで、「

panel」スタイルを使用する div コンテナです。枠線付きのテキスト表示ブロックを生成します。「panel」はテーマの色を制御しないため、「panel」をベースに色を制御するテーマ「panel-default」が追加され、 inside パネルのメインコンテンツを配置するために「dpanel-body」スタイル div を追加しました:

<div>
    <div>我是一个基础面板，带有默认主题样式风格</div>
</div>

ログイン後にコピー

実行時の効果は次のとおりです:

ブートストラップパネルとは何ですか原理分析:

panel"主に境界線、間隔、角の丸みに関する特定の設定を行います:

/bootstrap.cssFileLine 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機能を充実させるためにパネルの、特に「パネルヘッダー」と「ページフッター」効果をパネルに追加します。 ##☑

panel-Heading

: パネルヘッダースタイルの設定に使用されます☑

panel-footer

: パネルのテールスタイルを設定するために使用されます <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div></pre><div class="contentsignin">ログイン後にコピー</div></div> 操作の効果は次のとおりです:

原理分析: ブートストラップパネルとは何ですか

パネル見出し

と パネルフッター には間隔と角丸の設定のみがあります:

/bootstrap.css

File No. 5006 Line ~ Line 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

スタイルが次のことを行うことを学びました。テーマのスタイル設定は変更せず、テーマのスタイルは panel-default を通じて設定されます。 Bootstrap フレームワークでは、デフォルトのテーマスタイルに加えて、パネルコンポーネントには色付きパネルを構成する次のテーマスタイルも含まれています: ☑

panel-primary

：キー青☑

panel-success

：成功緑☑

panel-info

:情報青☑

panel-warning

：警告黄色☑

panel-danger

：危険赤使用方法は非常に簡単で、

をクリックするだけです。パネル

のクラス名に基づいて、必要なクラス名を追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div> <div class="panel panel-primary">…</div> <div class="panel panel-success">…</div> <div class="panel panel-info">…</div> <div class="panel panel-warning">…</div> <div class="panel panel-danger">…</div></pre><div class="contentsignin">ログイン後にコピー</div></div>実行中の効果は次のとおりです。

見つけるのは難しくありません。これらのスタイルは単なる変更であるという効果から、パネルの背景色、テキスト、境界線の色が変更されます。特定のソースコードは、ブートストラップパネルとは何ですか bootstrap.css
file 行 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 で確認できます。 ブートストラップの詳細については、ブートストラップの基本チュートリアル