1. Home
  2. ブートストラップパネル

ブートストラップパネル2024 年の最新の入門チュートリアル。このコースでは 例,パネルのタイトル,例,パネル脚注,例,色付きコンテキストパネル,例,テーブルパネル付き,例,パネルのグループのリストと,例, について学習できます。

ブートストラップパネル

この章では、ブートストラップパネル（パネル）を説明します。 組立用DOMパネルアセンブリは、箱の中に挿入されます。 基本的なパネルを作成し、唯一の<div>要素に必要とクラス .panelクラス.panel-defaultを追加することができ、次の例に示すように：

例

<DIV クラス= "パネルのpanel-default" > <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 </ DIV>

»をお試しください

結果は以下の通りであります：

デフォルトのパネル

パネルのタイトル

私たちは、パネルのタイトルを追加するには2つの偉大な方法があります。

  • 単にパネルコンテナにタイトルを追加することができます.panel-見出しクラスを使用します。 簡単にパネルに見出しコンテナを追加します。
  • .panelタイトルクラスで使用<H1> - <H6>事前定義された見出しスタイルを追加します。

以下の実施例は、2つの方法でこれを示します。

例

<DIV クラス= "パネルのpanel-default" > <DIV クラス = "パネルの見出し"> </ div>の タイトルのないパネルのタイトル <DIV クラス = "パネル体"> コンテンツパネル </ DIV> </ DIV> <DIV クラス= "パネルのpanel-default" > <DIV クラス = "パネルの見出し"> <H3 パネルのタイトルのタイトルを持つ クラス = "パネル・タイトル"> </ H3> </ DIV> <DIV クラス = "パネル体"> コンテンツパネル </ DIV> </ DIV>

»をお試しください

結果は以下の通りであります：

パネルのタイトル

パネル脚注

私たちは、パネル内の脚注を追加するだけで、ボタン上のテキストを置くかの<div>とクラス別 .panel-フッターをすることができますすることができます。 次の例では、この点を示しています。

例

<DIV クラス= "パネルのpanel-default" > <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 <DIV クラス = "パネル・フッター"> パネル脚注 </ DIV> </ DIV>

»をお試しください

結果は以下の通りであります：

パネル脚注
それはフォアグラウンド内容ではないため、パネル脚注は、コンテキストを有するパネルから色と境界線の色を継承しません。

色付きコンテキストパネル

Contextクラスのステータスパネルプライマリ、パネル-成功、使用するパネル情報、パネル警告、パネル危険性は、コンテキストとカラーパネルを設定するには、次のように、例は次のとおりです。

例

<DIV クラス= "パネルパネル-プライマリ」 > <DIV クラス = "パネルの見出し"> <H3 クラス = "パネル・タイトル"> パネルのタイトル </ H3> </ DIV> <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 </ DIV> <DIV クラス= "パネルパネル-成功」 > <DIV クラス = "パネルの見出し"> <H3 クラス = "パネル・タイトル"> パネルのタイトル </ H3> </ DIV> <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 </ DIV> <DIV クラス= "パネルパネル-情報」 > <DIV クラス = "パネルの見出し"> <H3 クラス = "パネル・タイトル"> パネルのタイトル </ H3> </ DIV> <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 </ DIV> <DIV クラス= "パネルパネル警告" > <DIV クラス = "パネルの見出し"> <H3 クラス = "パネル・タイトル"> パネルのタイトル </ H3> </ DIV> <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 </ DIV> <DIV クラス= "パネルパネル-危険" > <DIV クラス = "パネルの見出し"> <H3 クラス = "パネル・タイトル"> パネルのタイトル </ H3> </ DIV> <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 </ DIV>

»をお試しください

結果は以下の通りであります：

色付きコンテキストパネル

テーブルパネル付き

パネルでno境界線を持つ表を作成するには、パネル内のクラス .tableを使用することができます。 <div>を含む.panel-体があると、我々は分離するために、テーブルの先頭に余分な境界線を追加することができます。 それはの<div>のボディを.panelていない場合、コンポーネントは、ヘッドテーブルにパネルから中断せずに移動します。

次の例では、この点を示しています。

例

<DIV クラス= "パネルのpanel-default" > <DIV クラス = "パネルの見出し"> <H3 クラス = "パネル・タイトル"> パネルのタイトル </ H3> </ DIV> <DIV クラスは、= "パネル体"> これは </ div>の 基本的なパネルであり、 <表 クラス = "テーブル"> <Thの> 製品 価格 と <目> </目> </目> <TR> <TD> 製品A </ TD> <TD> 200 </ TD> </ TR> <TR> <TD> 製品B </ TD> <TD> 400 </ TD> </ TR> </表> </ DIV> <DIV クラス= "パネルのpanel-default" > <DIV クラス = "パネルの見出し"> パネルのタイトル </ DIV> <表 クラス = "テーブル"> <Thの> 製品 価格 と <目> </目> </目> <TR> <TD> 製品A </ TD> <TD> 200 </ TD> </ TR> <TR> <TD> 製品B </ TD> <TD> 400 </ TD> </ TR> </表> </ DIV>

»をお試しください

結果は以下の通りであります：

テーブルパネル付き

パネルのグループのリストと

私たちは、<div>要素のパネルを作成し、パネル内のグループのリストを追加するに.panelと.panel-defaultクラスを追加することで、パネルグループの任意のリストに含めることができます。 あなたがから選ぶことができるグループのリストチャプタリスト・グループを作成する方法を学習します。

例

<DIV クラス= "パネルのpanel-default" > <DIV クラス = "パネルの見出し"> パネルのタイトル </ DIV> <DIV クラス = "パネル体"> <P> これは、パネルの基本的な内容です。 これは、パネルの基本的な内容です。 これは、パネルの基本的な内容です。 これは、パネルの基本的な内容です。 これは、パネルの基本的な内容です。 これは、パネルの基本的な内容です。 これは、パネルの基本的な内容です。 これは、パネルの基本的な内容です。 </ P> </ DIV> <UL クラス = "リストグループ」> <李 クラス= "リストグループ項目 」> 無料ドメイン名の登録 ます。</ li> <李 クラス= "リストグループ項目 」> 無料ホスティングスペースウィンドウ ます。</ li> <李 クラス= "リストグループ項目 "> 画像の枚数 ます。</ li> <李 クラス= "リストグループ項目 "> 24 * 7 のサポート ます。</ li> <李 クラス= "リストグループ項目 "> 年間コストを更新し ます。</ li> </ UL> </ DIV>

»をお試しください

結果は以下の通りであります：

パネルのグループのリストと

ホットチュートリアル

お問い合わせ

ブートストラップパネル
10/30