bootstrap有几个网格-前端问答-PHP中文网

bootstrap有几个网格

青灯夜游

发布： 2022-01-10 11:15:18

原创

2235人浏览过

bootstrap有12个网格。Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动将页面分为最多12个网格。

bootstrap有几个网格

本教程操作环境：Windows7系统、bootsrap3.3.7版、DELL G3电脑

Bootstrap提供了一套响应式、移动设备优先的流式网格系统（grip system），随着屏幕或视口尺寸的增加，系统会自动将页面分为最多12个网格，可以根据这十二格进行页面划分，这对于写自适应页面非常方便，只需要配合.row类和.col类即可，.col-xs-超小屏幕手机 (

例如：如果想在页面实现下列图片的效果，只需将网格分为三份，每份4个网格即可

如果要根据电脑、平板、手机的尺寸来选择显示的行数，就可以使用上面写的col-*-*来分配，例如

这个则表示在手机屏幕上网格分为2份，每份为6个网格，设备上则显示为两列，而平板及电脑桌面的则是分为3份，每份4个网格，设备上显示为三列（下面有网格视图），也就是说.col是根据col-设备参数-网格数进行控制页面划分的。

.col必须包含在.row才能使用，同时.col和.row必须在.container中使用，下面有实例可以参考理解:

<div class="container">
	<h1 class="page-header">标签1<small>使用bootstrap网格系统布局网页</small></h1>
	<p>标签3</p>
	<div class="row">
		<div class="col-xs-12 col-sm-4">
			<h1>列表1</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表2</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表3</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表3</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
	</div>
</div>

登录后复制

【相关推荐：《bootstrap教程》】

以上就是bootstrap有几个网格的详细内容，更多请关注php中文网其它相关文章！