TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
パネルコンポーネントの主な機能は、異なるバージョンの異なるソースコードを使用して、他のコンポーネントが完了できないいくつかの機能を扱うことです。
LESS：PANELS.LESS
sass：_panels.scss
基本パネルは非常にシンプルです。 Divコンテナのクラス.Panelのスタイルを使用して、境界付きのテキストディスプレイブロックを生成します。パネルはテーマの色を制御しないため、テーマの色を制御するためのクラス.panel-defaultが.panel制御テーマに追加され、div.panel-bodyを追加してパネルのメインコンテンツを配置します。
.Panelは、主に境界、間隔、丸い角、左右に特定の設定を設定します。
.Panel {マージンボトム：20px;バックグラウンドカラー：#ffff;境界：1px固体透明;ボーダーラジウス：4px; -webkit-box-shadow：0 1px-1px rgba（0、0、05）; box-shadow：0 1px 1px rgba（0、0、0、.0、.05）; 15px;}基本パネルの適用：
<h1>基本パネル</h1> <div> <div>これは、デフォルトのテーマスタイルを備えた基本パネルです</div> </div>
頭と尾のあるパネル
パネルの機能を豊かにするために、ブートストラップはパネルのパネルヘッドとテールの効果をパネルに特別に追加します。
.Panel-Heading：パネルヘッドスタイルを設定します
.Panel-Footer：パネルのテールスタイルを設定します
.Panel-Headinghと.Panel-Footerは、間隔や丸い角などのスタイルのみを設定します。
.Panel-Heading {Padding：10px 15px; Border-Bottom：1PX Solid Transparent; Border-Top-Reft-Radius：3PX; Border-Top-Right-Radius：3PX;}。ドロップダウン.Dropdown-Toggle {color：coler：infernit;}。 exenset;}。パネルタイトル> a {color：enternit;}。パネルフッター{padding：10px 15px; background-color：＃f5f5f5; border-top：1px solid #ddd; border-bottom-right-radius：3px; border-bottom-left-radius：3px;}例：
頭と尾のある<h1>パネル</h1> <div> <div>パネルのヘッドタイトルはあります</div> <div>パネルコンテンツはパネルコンテンツですパネルコンテンツはパネルコンテンツですパート</div> </div>これは、パネルテールパーツ</div> </div>です
カラーパネル
.panelスタイルはテーマの色をスタイリングしないため、ブートストラップフレームワークのパネルコンポーネントはデフォルトのテーマ（.panel-default）スタイルを処理し、次のテーマスタイルも含まれています。
.Panel-Primary：青
.Panel-Success：成功グリーン
.Panel-INFO：情報ブルー（ライト）
.Panel Warning：警告黄色
.Panel-Danger：危険な赤
これらのスタイルは、パネルの背景色、テキスト、境界色を変更するだけです
使用方法は非常に簡単です。必要なテーマクラス名を.panelクラス名に追加するだけです
例：
<h1>カラフルなパネル</h1> <div> <div>白い頭のチャント</div> <div>山の雪のように、雲の中の月と同じように明るい。あなたには2つの意図があると聞いたので、私は決断を下すようになりました。今日の飲み物パーティー、ミンダンゴウの水面。水は溝を東と西に流れます。それは悲しくて悲しいです、そしてあなたが結婚するときに泣く必要はありません。私は一人の心を勝ち取り、永遠にお互いを離れることはありません。竹の棒は揺れていますか？魚の尾とは何ですか？男性は衝動を大切にしているので、なぜマネーナイフを使うのですか！ </div> <div>著者：Zhuo Wenjun </div> </div> <div> <div>昨夜、昨夜の星、昨夜の風、絵画ビルの西側はギタンの東にありました。カラフルなフェニックスのないフェニックスの2つの空飛ぶ翼は、互いに調和しています。春のワインはシート全体で暖かく、ワックスライトは赤です。悲しいかな、私はドラムに耳を傾け、役人に答えて、マランタイの上を歩いてチュニックになった。 </div> <div>著者：Li Shangyin </div> </div> <div> <div> qingyuケースBMWカーカートには香りがたくさんあります。フェニックスのフルートの音が動き、jaの鍋の光が回転し、魚とドラゴンが一晩踊ります。 mothsと柳は黄金のwispsであり、笑顔は香りに満ちています。私は彼を何千回も群衆の中で捜していましたが、振り返ると、男は薄暗い光の中でそこにいました。 </div> <div>著者：Xin Qiji </div> </div> <div> <div>私は花を振り返り、私の人生の半分、私の人生の半分、私の人生の半分を見ます。 </div> <div>著者：Yuan Zhen </div> </div> <div> <div>塗装された梅の花</div> <div>わずかな雪が池の半分から消え、フェンスのそばから2つまたは3つの枝が遠くから見られます。香りは天の中心に広がり、未知の植物や木が知られています。 </div> <div>著者：Fang Xiaoru </div> </div> <div> <div> chrysanthemums </div> <div>秋の茂みはタオの家のような家を囲み、太陽は徐々にフェンスの周りに傾いています。花の中で菊を好むわけではなく、花が咲くたびに花はありません。 </div> <div>著者：Yuan Zhen </div> </div>
効果は次のとおりです。
パネルのネストされたテーブル
一般的に言えば、パネルはエリアとして理解できます。パネルを使用する場合、必要なコンテンツは.Panel-Bodyコンテナに配置され、コンテンツは写真、テーブル、リストなどになります。パネルのネストされたテーブルとリストグループの効果を見てみましょう。ネストされたテーブルの例は次のとおりです。
<h1>パネルのネストされたテーブル</h1> <div> <div>花を説明する詩</div> <div> <p>詩人は心から菊を愛しています。彼は竹のフェンスに沿って歩いて、自分で植えられたこれらの秋の菊を賞賛し、太陽が西に沈んだことに気付く前に。 </p> <table> <thead> <tr> <th>花が菊を好むということではなく、花が咲くときに花はありません。 「菊」</th> <th>私は一人の人の心を獲得したいと思っていますが、私の頭は互いに分離されていません。 「白い頭の歌」</th> <th>ベッドの前の明るい月明かりは、地面に霜であると疑われています。 「静かな夜の考え」</th> </tr> </thead> <tbody> <td>心配する前に、そして喜びの後の世界を心配します。 「Yueyang Tower Notes」</td> <td>私はあなたを知りたいです、そして私の人生は決して終わりません。 「Shangxie」</td> <td>人間の顔の顔は不明であり、桃の花はまだ春の風に微笑んでいます。 「首都のnanzhuangに関する碑文」</td> </tr> </tbody> </table> </div> <div>この詩は、タオの詩の芸術的概念を取り入れ、すべての画像を使用してタオゴンのようではなく、深遠ではないエレガントでシンプルな言語で唱えられています。しかし、コンクリートを描写した後、それは一言で言わずに自己表現可能な方法で菊を愛する理由を明らかにし、人々が味わい、噛むための想像力を残し、芸術的魅力を高めます。したがって、それは常に人々に愛されてきました</div> </div>
実際に使用すると、おそらくテーブルの端とパネルの間に間隔がある必要はありませんが、.panel-bodyはパディングを設定します：15px値。この効果を達成するために、実際の使用中にテーブルをパネルボディの外で抽出できます。
例えば：
<div> <div>花を説明する詩</div> <div> <p>詩人は心から菊を愛しています。彼は竹のフェンスに沿って歩いて、自分で植えられたこれらの秋の菊を賞賛し、太陽が西に沈んだことに気付く前に。 </p> </div> <table> <thead> <tr> <th> "Yueyang Tower Notes" </th> <th> "shangxie" </th> <th> "首都のnanzhuangの碑文" </th> </tr> </thead> <tbody> <td>あなた、そして私の人生は衰退することは決してありません</td> <td>私は人間の顔がどこにあるのかわかりませんが、桃の花はまだ春のそよ風で微笑みます</td> </tdoby> </table> <div>この詩はタオの詩の芸術的な概念を取ります。しかし、具体的な画像を描写した後、彼は自己表現可能な方法で菊を愛する理由を説明し、人々が味わい、噛むための想像力を残し、芸術的な魅力を高めます。したがって、それは常に人々に愛されてきました</div> </div>
パネル内のネストされたリストグループ
例：
パネルの<h1>ネストされたリストグループ</h1> <div> <div>花を説明する詩</div> <div> <p>パネルネストリストグループ</p> <ul> <li>リスト項目1 </li> <li>リスト項目2 </li> <li>リスト項目3 </li> <li>リスト項目Shangyin </div> </div>
同じことは、ネストされたリストの組み合わせネストされたテーブルについても同じことが言えます。このような間隔が不要な場合は、.panel-bodyからリストグループを抽出できます。
例：
パネルの<h1>ネストされたリストグループ</h1> <div> <div>花を説明する詩</div> <div> <p>パネルネストリストグループ</p> </div> <ul> <li>リストアイテム2 </li> <li>リストアイテム3 </li> <li> Shangyin </div> </div>
効果は次のとおりです。
上記は、編集者が紹介したブートストラップコンポーネントのパネルコンポーネントです。私はそれが誰にでも役立つことを願っています！