Bootstrap의 그리드 시스템이란 무엇입니까? 그리드 시스템에 대한 자세한 설명

이 기사에서는 부트스트랩의 그리드 시스템이 무엇인지 알려줄 것입니다. 그리드 시스템에 대한 자세한 설명을 통해 누구나 부트스트랩 그리드 시스템, 그리드 매개변수가 무엇인지, 열 오프셋 및 열 중첩을 설정하는 방법을 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 더 많은 부트스트랩 관련 비디오 튜토리얼을 배우고 얻으려면 bootstrap tutorial을 방문하세요!

그리드 시스템이란 무엇인가요?

Bootstrap에는 화면 장치 또는 뷰포트(뷰포트) 크기에 따라 변경되는 반응형 모바일 우선 유동 그리드 시스템이 내장되어 있습니다. 증가하면 시스템이 자동으로 최대 12개의 열로 나눕니다.
그리드 시스템은 일련의

행을 전달하는 데 사용됩니다. 열 조합(열) 을 사용하여 페이지 레이아웃을 생성하고 생성된 레이아웃에 콘텐츠를 배치할 수 있습니다.

참고:

"행"은 .container(고정 너비) 또는 .container-fluid(100% 너비)에 포함되어야 합니다.

		<p class="container">
			<p class="row">	
				<p class="col-md-3">我是文本</p>
				<p class="col-md-3">我是文本</p>
				<p class="col-md-3">我是文本</p>
				<p class="col-md-3">我是文本</p>
			</p>
		</p>

은 p가 3개의 열을 차지한다는 의미입니다.

래스터 매개변수

None(자동)750px970px1170pxClass prefix.col-xs-.col-sm-.col-md-.col-lg- 열 수12최대 열 너비자동~ 62px~81px~97px여백 너비 30px(각 열의 왼쪽과 오른쪽이 15px)

	초소형 화면 휴대폰(<768px)	소형 화면 태블릿(≥768px)	중형 화면 데스크톱 모니터(≥992px)	대형 화면 대형 데스크탑 모니터( ≥ 1200px)
그리드 시스템 동작	항상 수평으로 정렬됨	스택으로 시작하여 이 임계값보다 크면 수평이 됨 C
.container 최대 너비.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

🎜Nestable🎜🎜is🎜🎜🎜🎜 오프셋( 오프셋)🎜🎜 예🎜🎜🎜🎜열 정렬🎜🎜예 🎜🎜🎜🎜

现在有一个需求：

如果是大屏幕，一行显示6列

如果是中屏幕，一行显示4列

如果是小屏幕，一行显示3列

如果是超小屏幕，一行显2列

		<p class="container">
			<p class="row">	
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
			</p>
		</p>

列偏移

.col-lg-offset-*

" * " 偏移几个位置

		<p class="container">
			<p class="row">	
				<p class="col-lg-2 col-lg-2">我是文本</p>
			</p>
		</p>

在大屏幕的页面下偏移两个格子

列嵌套

		<p class="container">
			<p class="row">	
				<p class="col-lg-5">
					<p class="row">
						<p class="col-lg-2">我是文本</p>
						<p class="col-lg-2">我是文本</p>
					</p>
				</p>
			</p>
		</p>

在列里面再进行一次嵌套，会把列的大小平均分成12份再计算。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

위 내용은 Bootstrap의 그리드 시스템이란 무엇입니까? 그리드 시스템에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!