Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 그리드 시스템 예제: 중형 및 대형 장치 Bootstrap CSS编码 규범

Bootstrap 그리드 시스템 예제: 스택된 수평

여기서는 간단한 레이아웃을 가진 그리드 예제를 보여드리겠습니다: 두 개의 열이 있으며, 각 열에는 두 개의 문단이 포함되어 있습니다. (각 열에 스타일을 정의하지 않도록 하면 됩니다.)

온라인 예제

예제

<!DOCTYPE　html>
<html>
<head>
　　　<meta　charset="utf-8">
　　　<title>Bootstrap　예제　-　스택된 수평</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h1>Hello, world!</h1>
	<div class="row">
		<div class="col-md-6" style="background-color: #dedef8; box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>;
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
			enim ad minim veniam, quis nostrud exercitation ullamco laboris　
			nisi ut aliquip ex ea commodo consequat.　
			</p>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
			accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
			quae ab illo inventore veritatis et quasi architecto beatae vitae　
			dicta sunt explicabo.　
			</p>
		</div>
		<div class="col-md-6" style="background-color: #dedef8; box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>;
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
			accusantium doloremque laudantium.
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum qui dolor sit amet,　
			consectetur, adipisci velit, sed quia non numquam eiusmodi　
			tempora incidunt ut labore et dolore magnam aliquam quaerat　
			voluptatem.　
			</p>
		</div>
	</div>
</div>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다:

세부 사항

<div>...</div>/div> 요소가 추가되었을 때, 중앙 정렬과 최대 너비를 보장하세요.
컨테이너를 추가한 후, 다음으로 행 단위로 고려해야 합니다. 추가 <div>...</div>/div>로 구성되며 행 내에 열을 추가합니다. <div></div>。
그리드의 각 행은 12 단위로 구성된, 이러한 단위를 사용하여 열의 크기를 정의할 수 있습니다. 예제에서는 두 개의 열이 있으며 각 열은 6 단위로 구성되어 있습니다. 즉 6+6=12。

다른 더 많은 옵션을 시도해 보세요. 예를 들어 <div></div> 및 <div></div> 또는 <div></div> 및 <div></div>。

하시다면 시도해 보세요. 하지만 항상 합이 항상 12。

Bootstrap 그리드 시스템 예제: 중형 및 대형 장치 Bootstrap CSS编码 규범