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

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

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

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

基本的な例:

		<ul class="list-group">
			<li class="list-group-item">我是第一行</li>
			<li class="list-group-item">我是第二行</li>
			<li class="list-group-item">我是第三行</li>
			<li class="list-group-item">我是第四行</li>
		</ul>

リストアイテムとメダル

		<ul class="list-group">
			<li class="list-group-item">我是第一行
			<span class="badge">10</span>
			</li>
			<li class="list-group-item">我是第二行</li>
		</ul>

##リストリンクと優先

		<p class="list-group">
			<a class="list-group-item active">我是第一行
			<span class="badge">10</span>
			</a>
			<a class="list-group-item">我是第二行</a>
			<a class="list-group-item">我是第三行</a>
			<a class="list-group-item">我是第四行</a>
		</p>

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

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

ボタンリスト

		<p class="list-group">
			<button class="list-group-item active">我是第一行
			<span class="badge">10</span>
			</button>
			<button class="list-group-item">我是第二行</button>
			<button class="list-group-item">我是第三行</button>
			<button class="list-group-item">我是第四行</button>
		</p>

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

#シナリオクラス

		<ul class="list-group">
			<li class="list-group-item list-group-item-danger">我是第一行</li>
			<li class="list-group-item list-group-item-info">我是第二行</li>
		</ul>

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

カスタム コンテンツ

			<p href="#" class="list-group-item active">

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

			</p>

2. パネル コンポーネント

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

基本的な例: パネル

		<p class="panel panel-success">

			<p class="panel-body">这里是内容区域</p>

		</p>

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

		<p class="panel panel-success">

			<p class="panel-heading">这个是标题啊</p>
			<p class="panel-body">这里是内容区域</p>

		</p>

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

		<p class="panel panel-success">

			<p class="panel-heading">
				<h3 class="panel-title">这是标题</h3>			
			</p>
			<p class="panel-body">这里是内容区域</p>

		</p>

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

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

		<p class="panel panel-success">

			<p class="panel-heading">这是标题</h3></p>
			<p class="panel-body">这里是内容区域</p>
			<p class="panel-footer">这里是注脚区域</p>

		</p>

状況への影響

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

テーブル クラス パネル

		<p class="panel panel-warning">

			<p class="panel-heading">这是标题</h3></p>
			<p class="panel-body">这里是内容区域</p>
			<table class="table">
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</table>

		</p>

##リスト クラス パネル

		<p class="panel panel-warning">

			<p class="panel-heading">这是标题</h3></p>
			<p class="panel-body">这里是内容区域</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>

		</p>

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

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