Bootstrap のグリッドシステムとは何ですか?グリッドシステムの詳しい説明-htmlチュートリアル-php.cn

Bootstrap のグリッドシステムとは何ですか?グリッドシステムの詳しい説明

青灯夜游

リリース： 2018-10-13 17:29:19

転載

4858 人が閲覧しました

この記事では、Bootstrap のグリッドシステムとは何なのかについて説明します。グリッドシステムの詳細な説明。Bootstrap グリッドシステム、グリッドパラメータとは何か、列オフセットと列のネストを設定する方法を誰もが理解できるようにします。困っている友人は参考にしていただければ幸いです。ブートストラップ関連のビデオチュートリアルをさらに学習して入手したい場合は、ブートストラップチュートリアルにアクセスしてください。

グリッドシステムとは何ですか?

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 列を占めることを意味します。

ラスターパラメーター

#クラス接頭辞##.col-xs-.col-sm-.col-md-.col-lg-列数最大列幅ガター幅ネスト可能 # オフセットは yes##

现在有一个需求：

如果是大屏幕，一行显示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份再计算。

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

	超小型画面携帯電話 (	小型画面タブレット (≥768px)	中画面デスクトップモニター (≥992px)	大画面大型デスクトップモニター (≥1200px)
グリッドシステムの動作	常に水平方向に配置	積み重ねられ始め、これらのしきい値を超えると水平方向に配置されますC
`.container` 最大幅	なし (自動)	750px	970px	1170px

12
自動	~62px	~81px	~97px
30px (各列の左右に15px)

	#列の並べ替え