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

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

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

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

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

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

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;
}

Bootstrap機能を充実させるためにパネルの、特に「パネル ヘッダー」と「ページ フッター」効果をパネルに追加します。 ##☑

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

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

原理分析:

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

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;
}

「基本パネル」セクションで、

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

：キー青☑

：成功緑☑

:情報青☑

：警告黄色☑

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

のクラス名に基づいて、必要なクラス名を追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;div class=&quot;panel panel-default&quot;&gt; &lt;div class=&quot;panel-heading&quot;&gt;图解CSS3&lt;/div&gt; &lt;div class=&quot;panel-body&quot;&gt;…&lt;/div&gt; &lt;div class=&quot;panel-footer&quot;&gt;作者：大漠&lt;/div&gt; &lt;/div&gt; <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 で確認できます。 ブートストラップの詳細については、ブートストラップの基本チュートリアル

以上がブートストラップパネルとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。