bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法...

(1)概括

一句话概括：根据显示屏幕宽度的大小，自动的选用对应的类的样式。

(2)关键字段

1、col是column简写：列；

2、xs是maxsmall简写：超小， sm是small简写：小， md是medium简写：中等， lg是large简写：大；

3、-* 表示占列数，即占每行row分12列栅格系统比；

4、.col-xs-* 超小屏幕如手机 (<768px)时使用；

.col-sm-* 小屏幕如平板 (768px ≤ 宽度＜992px)时使用；

.col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度＜ 1200px)时使用；

.col-lg-* 大屏幕如大显示器 (≥1200px)时使用。

(3)解释

为了更好的理解Bootstrap框架的网格系统工作原理，我们来看一张草图：

最外边框，带有一大片白色区域，就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器(超小屏，小屏，中屏和大屏)，其断点(像素的分界点)是768px、992px和1220px。

通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。

从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。

(4)实例

例一：单独使用

col-md-4

bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-、col-sm-、col-md-、col-lg- 区别及使用方法...相关推荐

Bootstrap中栅格系统xs，sm，md，lg
如题,bootstrap中的xs,sm,md,lg的意义 bootstrap版本 v3 xs:xsmall phone 超小屏(自动) sm: small tables 小屏(750px) md: m ...
cssBootstrap栅格布局的四种大小xs，sm，md，lg,xl
前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现. 使用bootStrap的网格系统时,常见到一下格式的类名 col-*-* visible-*-* hidden_*_* ...
css----栅格布局的四种大小xs，sm，md，lg详解
当你想要内容大小随着屏幕大小自动适应的时候就可以使用也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候: 一行最多占十二个标签,不管是大屏还是超小屏的时候. lg=* 一般用于大 ...
PS中色相饱合度/可选颜色/色彩平衡/曲线的区别和运用方法详解
http://www.jb51.net/photoshop/374517.html PS中色相饱合度/可选颜色/色彩平衡/曲线的区别和运用方法详解整体思路: 1.使用颜色混合模式营造照片基调. 2. ...
bootstrap 横铺行_bootstrap的布局（container、row、col-xs-4）
它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中. 下面就简单介绍一下Bootstrap栅格系统的工作原理: 行(row)必须包含在.c ...
css布局中margin为0，但依然有间距问题的解决方法
在进行布局时经常会出现,div与div之间虽然设置为了margin: 0px ,但是依然有间距的问题,比如以下这种情况: html部分代码如下: <body><div class=& ...
@query传参_vue-router中params传参和query传参的区别及处理方法
在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 his ...
Bootstrap表单的默认布局
Bootstrap 自带了基本的表单样式,不需要添加任何辅助类,即可使用表单的默认布局.默认布局中,表单元素采用垂直布局,标签和输入框使用顶对齐方式.如: <form> <fie ...
初学Bootstrap，制作响应式布局
Bootstrap是目前比较受欢迎的前端框架.它是基于 HTML.CSS.JAVASCRIPT 的,简洁灵活.因为在前几个月的学习中有了解到Bootstrap,并且当时就使用Bootstrap制作了简 ...

bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-、col-sm-、col-md-、col-lg- 区别及使用方法...

bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-、col-sm-、col-md-、col-lg- 区别及使用方法...相关推荐

最新文章

热门文章

bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法...

bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法...相关推荐

最新文章

热门文章

bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-、col-sm-、col-md-、col-lg- 区别及使用方法...

bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-、col-sm-、col-md-、col-lg- 区别及使用方法...相关推荐