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>

첫 번째 줄은 기본 설정 상태

세 번째 줄은 마우스를 위에 올렸을 때의 상태

버튼 스타일 목록

		<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. 패널 컴포넌트패널 컴포넌트는 저장소입니다. content 컨테이너 구성 요소의 기본 예

: panel

		<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>

효과는 비슷합니다. 위에 제목 글꼴은 한 사이즈 더 커졌습니다

각주가 있는 패널: panel-footer

		<p class="panel panel-success">

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

		</p>

시나리오 효과

panel panel-default / 성공 / 경고 / 위험 / 정보 / 기본

테이블 유형 패널

		<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. 반응형 내장 구성 요소

는 내장 콘텐츠의 외부 컨테이너 너비를 기반으로 고정 비율을 자동으로 생성하여 브라우저가 허용하도록 합니다. 콘텐츠 크기를 자동으로 결정하고 다양한 장치에서 확장할 수 있습니다.

이러한 규칙은