Bootstrapパネルの詳細説明component_html/css_WEB-ITnose

パネル コンポーネントの主な機能は、他のコンポーネントでは完了できないいくつかの機能を処理することです。バージョンごとに異なるソース コードが含まれています。これは非常に単純です。つまり、div コンテナは .panel クラス スタイルを使用して境界線付きのテキスト表示ブロックを生成します。panel はテーマの色を制御しないため、色のテーマを制御する .panel-default クラスが追加されます。 .panel 内に div.panel-body を追加してパネルのメインコンテンツを配置します

.panel には主に境界線、間隔、角丸、左右に関する特定の設定があります:

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

基本的なパネルの使用法:

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

ヘッドパネルとテールパネル付き

パネルの機能を充実させるために、ブートストラップは特別にパネルヘッドとパネルテールの効果をパネルに追加します。

.panel-Heading: パネルヘッドを設定しますstyle

.panel-footer: パネル末尾のスタイルを設定します

.panel-Headingh と .panel-footer は間隔と角丸を設定するだけです

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

例:

<h1>带有头和尾的面板</h1>    <div class="panel panel-default">        <div class="panel-heading">这里是面板头部标题</div>        <div class="panel-body">这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分这里是面板内容部分</div>        <div class="panel-footer">这里是面板尾部部分</div>    </div>

カラーパネル

.panel スタイルには設定がないため、スタイル設定にはテーマの色が使用されます。デフォルトのテーマ (.panel-default) スタイルに加えて、ブートストラップ フレームワークのパネル コンポーネントには次のテーマ スタイルも含まれます。 .panel-primary: キーポイント 青

.panel-success : 成功 緑

.panel-info: 情報 青 (明るい)

.panel-warning: 警告 黄色

.panel-danger: 危険 赤

これらスタイルは、パネルの背景色とテキスト、境界線の色のみを変更します

使用方法は非常に簡単で、必要なテーマのクラス名を .panel クラス名に追加するだけです

例:

<h1>彩色面板</h1>    <div class="panel panel-default">        <div class="panel-heading">白头吟</div>        <div class="panel-body">皑如山上雪，皎若云间月。            闻君有两意，故来相决绝。            今日斗酒会，明旦沟水头。            躞蹀御沟上，沟水东西流。            凄凄复凄凄，嫁娶不须啼。            愿得一人心，白首不相离。            竹竿何袅袅，鱼尾何簁簁！            男儿重意气，何用钱刀为！</div>        <div class="panel-footer">作者：卓文君</div>    </div>    <div class="panel panel-primary">        <div class="panel-heading">无题</div>        <div class="panel-body">昨夜星辰昨夜风，画楼西畔桂堂东。            身无彩凤双飞翼，心有灵犀一点通。            隔座送钩春酒暖，分曹射覆蜡灯红。            嗟余听鼓应官去，走马兰台类转蓬。</div>        <div class="panel-footer">作者：李商隐</div>    </div>    <div class="panel panel-success">        <div class="panel-heading">青玉案&middot;元夕</div>        <div class="panel-body">东风夜放花千树，更吹落，星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。            　　蛾儿雪柳黄金缕，笑语盈盈暗香去。众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</div>        <div class="panel-footer">作者： 辛弃疾</div>    </div>    <div class="panel panel-info">        <div class="panel-heading">离思</div>        <div class="panel-body">曾经沧海难为水，除却巫山不是云。            取次花丛懒回顾，半缘修道半缘君。</div>        <div class="panel-footer">作者： 元稹</div>    </div>    <div class="panel panel-danger">        <div class="panel-heading">画梅</div>        <div class="panel-body">微雪初消月半池，篱边遥见两三枝。            清香传得天心在，未话寻常草木知。</div>        <div class="panel-footer">作者： 方孝孺</div>    </div>    <div class="panel panel-warning">        <div class="panel-heading">菊花</div>        <div class="panel-body">秋丛绕舍似陶家，遍绕篱边日渐斜。            不是花中偏爱菊，此花开尽更无花。</div>        <div class="panel-footer">作者： 元稹</div>    </div>

効果は次のとおりです以下のように:

パネルに埋め込まれたテーブルのセット

一般に、パネルを使用する場合、パネルは領域として理解でき、必要なコンテンツは .panel-body コンテナーに配置されます。内部のコンテンツは、写真、テーブル、リストなどです。パネル内のネストされたテーブルとリスト グループの効果を見てみましょう。テーブルの端とパネルの間にスペースを設ける必要はありませんが、.panel-body は、padding: 15px 値を設定します。この効果を実現するには、実際に使用するときにテーブルをパネル本体の外側に抽出します。

例:

<h1>面板中嵌套表格</h1>    <div class="panel panel-default">        <div class="panel-heading">描写花的诗句</div>        <div class="panel-body">            <p>诗人对菊花由衷喜爱：开得正旺的菊花一簇簇、一丛丛，遍布屋舍四周，他沿着竹篱，忘情地欣赏这些亲手栽种的秋菊，不觉日已西斜。</p>            <table class="table table-bordered">                <thead>                    <tr>                        <th>不是花中偏爱菊，此花开尽更无花《菊花》</th>                        <th>愿得一人心，白首不相离《白头吟》</th>                        <th>床前明月光，疑是地上霜《静夜思》</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>先天下之忧而忧，后天下之乐而乐《岳阳楼记》</td>                        <td>我欲与君相知，长命无绝衰《上邪》</td>                        <td>人面不知何处去，桃花依旧笑春风《题都城南庄》</td>                    </tr>                </tbody>            </table>        </div>        <div class="panel-footer">这首诗取陶诗的意境，且也以淡雅朴素的语言吟咏，便不似陶公全用意象，蕴藉之至；而是在描绘具象之后，以自述的方式道出爱菊之由而又不一语说尽，留下了想象空间让人们去回味咀嚼，这就增强了它的艺术感染力。因而历来被人们所喜爱</div>    </div>

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

例:

<div class="panel panel-default">        <div class="panel-heading">描写花的诗句</div>        <div class="panel-body">            <p>诗人对菊花由衷喜爱：开得正旺的菊花一簇簇、一丛丛，遍布屋舍四周，他沿着竹篱，忘情地欣赏这些亲手栽种的秋菊，不觉日已西斜。</p>        </div>        <table class="table table-bordered">            <thead>            <tr>                <th>《岳阳楼记》</th>                <th>《上邪》</th>                <th>《题都城南庄》</th>            </tr>            </thead>            <tbody>            <tr>                <td>先天下之忧而忧，后天下之乐而乐</td>                <td>我欲与君相知，长命无绝衰</td>                <td>人面不知何处去，桃花依旧笑春风</td>            </tr>            </tbody>        </table>        <div class="panel-footer">这首诗取陶诗的意境，且也以淡雅朴素的语言吟咏，便不似陶公全用意象，蕴藉之至；而是在描绘具象之后，以自述的方式道出爱菊之由而又不一语说尽，留下了想象空间让人们去回味咀嚼，这就增强了它的艺术感染力。因而历来被人们所喜爱</div>    </div>

このような間隔が必要ない場合、リスト グループは同じにすることができます。 .panel-body から抽出

例:

<h1>面板中嵌套列表组</h1>    <div class="panel panel-default">        <div class="panel-heading">描写花的诗句</div>        <div class="panel-body">            <p>面板嵌套列表组</p>            <ul class="list-group">                <li class="list-group-item">列表项1</li>                <li class="list-group-item">列表项2</li>                <li class="list-group-item">列表项3</li>                <li class="list-group-item">列表项4</li>                <li class="list-group-item">列表项5</li>            </ul>        </div>        <div class="panel-footer">作者：李商隐</div>    </div>

効果は次のとおりです: