首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
其他好文
> 详细
Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
时间:
2015-12-03 22:55:51
阅读:
18625
评论:
0
收藏:
0
[点我收藏+]
标签:
Bootrap是web前端CSS框架。它是基于css3和html5开发的,,它在jquery基础上进行完善。形成自己的风格,并兼容大部分的Jquery插件。
bootstrap现有第四版。变化从Less到Sass,不支持IE,合并了所以HTML resets到一个新的模块,重写了所以的JS插件。Bootstrap包含了丰富的web组件,还自带了13个Jquery插件。模块代码,可以对Bootstrap中的所以CSS变量进行修改,根据自己的需求剪切代码。Bootstrap Less是一个CSS预处理器,让CSS具有动态性,也可以在CSS中使用Less变量,mixins(混合),nesting(嵌套)。
形式如下:
<div class="wrap">
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-6">6</div>
<div class="col-md-3">3</div>
</div>
栅格一行最多为12列,若<12,则剩余的部分空白。若>12,多余的部分在下一行另起。
<div class="row">
<div class="col-md-3">3</div>
<div class="col-sm-6">6</div>
<div class="col-xs-6">6</div>
</div>
</div>
其中,md/sm/xs的意思是,当页面定义了一个临界值,当>临界值时,一行的格子会水平排列。当<临界值时,一行格子会垂直排列。
xs的临界是768(<手机);sm的临界是992(<平板);md的临界是1200(<桌面)
故xs总是水平排列的。
900px
1080px
.col-md-offset-x;是将列偏移到右侧X个距离。
col-md--push-x是列平移。
Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
标签:
原文地址:http://www.cnblogs.com/lvxiaojie/p/5017842.html
踩
(
2
)
赞
(
8
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
分布式事务
2021-07-29
OpenStack云平台命令行登录账户
2021-07-29
getLastRowNum()与getLastCellNum()/getPhysicalNumberOfRows()与getPhysicalNumberOfCells()
2021-07-29
【K8s概念】CSI 卷克隆
2021-07-29
vue3.0使用ant-design-vue进行按需加载原来这么简单
2021-07-29
stack栈
2021-07-29
抽奖动画 - 大转盘抽奖
2021-07-29
PPT写作技巧
2021-07-29
003-核心技术-IO模型-NIO-基于NIO群聊示例
2021-07-29
Bootstrap组件2
2021-07-29
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!