BootStrap のグループ コンポーネント、パネル コンポーネント、および応答性の高い埋め込みコンポーネントをリストします (詳細なグラフィックとテキストの説明)

この記事では、BootStrap のリスト グループ コンポーネント、パネル コンポーネント、および応答性の高い埋め込みコンポーネントについて紹介します。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のビデオ チュートリアルをさらに入手して学習したい場合は、ブートストラップ チュートリアルにアクセスしてください。

1. リスト グループ コンポーネント

リスト グループ コンポーネントは、リストのグループを表示するために使用されます

基本的な例:

• 我是第一行
• 我是第二行
• 我是第三行
• 我是第四行

リストアイテムとメダル

• 我是第一行 10
• 我是第二行

##リストリンクと優先

		<p>
			<a>我是第一行
			<span>10</span>
			</a>
			<a>我是第二行</a>
			<a>我是第三行</a>
			<a>我是第四行</a>
		</p>

最初の行は優先ステータスです

3行目はマウスホバー 停止時の状態

ボタンリスト

		<p>
			<button>我是第一行
			<span>10</span>
			</button>
			<button>我是第二行</button>
			<button>我是第三行</button>
			<button>我是第四行</button>
		</p>

スタイルはハイパーリンクリストに似ています。

#シナリオクラス

• 我是第一行
• 我是第二行

##設定できる色: 成功、警告、危険、情報

カスタム コンテンツ

			<p>

				</p><h3 id="我是标题">我是标题</h3>
				<p>我是一段文本</p>

			

2. パネル コンポーネントパネル コンポーネントは、コンテンツを保存するコンテナ コンポーネントです

基本的な例: パネル

		<p>

			</p><p>这里是内容区域</p>

		

見出し付きパネル:panel-Heading

		<p>

			</p><p>这个是标题啊</p>
			<p>这里是内容区域</p>

		

タイトル要素を設定します:panel-title

		<p>

			</p><p>
				</p><h3 id="这是标题">这是标题</h3>			
			
			<p>这里是内容区域</p>

		

効果は上記と同様ですが、タイトルのフォントが 1 サイズだけ大きくなります

脚注あり パネル: パネルフッター

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>
			<p>这里是注脚区域</p>

		

状況への影響

パネル パネル - デフォルト / 成功 / 警告/ 危険 / 情報 / プライマリ

テーブル クラス パネル

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>
			

1	2	3
1	2	3

##リスト クラス パネル

		<p>

			</p><p>这是标题</p>
			<p>这里是内容区域</p>

			

• 1
• 2
• 3
• 4
• 5

2. レスポンシブ埋め込みコンポーネント

埋め込みコンテンツの外部コンテナの幅に基づいて固定比率を自動的に作成し、ブラウザがそのサイズを自動的に決定できるようにします。 #これらのルールは、

		<p><!--这里可以修改比例，16:9或是4:3-->

			<!--插入到这里面的媒体都会按照指定的比例缩放-->

		</p>

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

JavaScript ビデオ チュートリアル

、

jQuery ビデオ チュートリアル

、

bootstrap ビデオ チュートリアル

をご覧ください。

以上がBootStrap のグループ コンポーネント、パネル コンポーネント、および応答性の高い埋め込みコンポーネントをリストします (詳細なグラフィックとテキストの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。