首页 / html教程

    Bootstrap的栅格系统是什么?栅格系统详解

    作者:PHP中文网2018-10-13 17:29:20

    php中文网赞助会员本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统、栅格参数是什么,列偏移、列嵌套怎么设置。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程

    什么是栅格系统?

    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

    栅格系统用于通过一系列的行(row)与列(col)的组合来创建页面布局,内容就可以放入这些创建好的布局中

    注意:

    ”行(row)“ 必须包含在 .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列。

    栅格参数

    超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
    栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
    .container 最大宽度None (自动)750px970px1170px
    类前缀.col-xs-.col-sm-.col-md-.col-lg-
    列(column)数12
    最大列(column)宽自动~62px~81px~97px
    槽(gutter)宽30px (每列左右均有 15px)
    可嵌套
    偏移(Offsets)
    列排序

    现在有一个需求:

    如果是大屏幕,一行显示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中文网其它相关文章!

    标签:

PHP中文网

未登录