Boostrap中中文网
1. Bootstrap 是什么
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,使用这个框架可以简单高效的开发出适配各种屏幕的网站应用,即是编写一套代码,适用多重平台(PC,平板,手机等)。Bootstrap 相比其他框架,自由度更高,它提供了基本的样式和基本的组件,而不会在创造上约束开发者的思维。
简单的用面向对象的来说,Bootstrap 为我而们封装了一些常用的类(class的名字)和接口(js的插件),这些类就是这个模版自定义的 css 样式,比如文本居中,css 代码是 text-align: center; 经过 Bootstrap封装后的类(class)名为 text-center,这样我们就可以直接使用text-center来使一个 p 标签或者 div 标签里面的内容居中了,从而实现我们软件工程中所说的代码重用。Bootstrap 中的js插件,不需要我们写 js 代码就能帮我们实现要用 js 来实现的效果,而是通过使用 Bootstrap 自定义的属性。
学习的时候直接到这里查 Bootstrap 的文档 Bootstrap中文网。
2. Bootstrap 常用的基本模版
相比官网的基本模版,增加了一些常用的设置。
Bootstrap常用的模版写给女朋友的Bootstrap学习文档
3. 栅格系统
Bootstrap 的布局容器
1.container-fluid 自适应宽度100%
container 适应屏幕的固定宽度,要比container占的宽度小一些
屏幕宽度 >= 1200px 固定宽度为1270px
992px <= 屏幕宽度 <= 1200px 固定宽度为970px
768px <= 宽度 <= 992px 固定宽度为750px
宽度< 768px 固定宽度auto(自适应)
注意:这两个class不能放在一起,可以是兄弟关系,但不能是嵌套的关系。如果不想让宽度随着屏幕而变化,可以给它一个!important来提升优先级,这样的话在所有尺寸下都是一个定值
示例代码如下:
下面是错误写法
Bootstrap 的栅格系统
在 Bootstrap 中一行分为 12列,也即是屏幕的宽度被分为了 12份,一份就是十二分之一的屏幕宽度,源码是通过宽度为百分比以及浮动实现的。
1. row 代表一行
2. col-- 代表列,第一个 * 和屏幕尺寸有关,第二个 * 是列数
如果列的和超过了12,那就会换行,如果有一列,这个数值超过了12,那就会按12去显示
lg 宽度>1200px
表现形式:
屏幕的宽度大于1200,一行显示n(结构里有几个div)列
屏幕的宽度小于1200,一行显示1列
md 992px <= 宽度 <= 1200px
表现形式:
屏幕的宽度大于992并且小于1200,一行显示n(结构里有几个div)列
屏幕的宽度小于992,一行显示1列
sm 768px <= 宽度 <= 992px
表现形式:
屏幕的宽度大于768并且小于992,一行显示n(结构里有几个div)列
屏幕的宽度小于768,一行显示1列
xs 宽度 <= 768px
表现形式:
屏幕的宽度小于768,一行永远显示n(结构里有几个div)列
记忆口诀:LG(手机品牌)(lg),妈的(md),什么(sm),想死(xs)。(不是自己独创的,参考的网上的笑话。)
示例代码如下:
缩小浏览器宽度改变div的宽度,观察列数的变化。
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
3. 组合使用
示例代码如下:
缩小浏览器宽度改变div的大小,仔细观察,四列,变三列,再变两列,最后变成一列的效果
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
4. 列偏移
col--offset- 向右偏移,第一个 * 是和屏幕尺寸有关,第二个 * 是偏移的列数,如果偏移的数量大于12则会不起作用。
示例代码如下:
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
5. 列排序
col--push(pull)- 第一个 * 是和屏幕尺寸有关,第二个 * 是往右或者往左的列数,不能超过12,否则就不起作用,push是往右推,pull是往左拉。
示例代码如下:
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
6. 列偏移和列排序的区别
列偏移只能往右走,而列排序(pull、push)既可以往右边走,也可以往左边走
如果一行中有多列,offset偏移如果大的话,会换行再偏移,而push不会有这个问题,可以溢出父级的容器。
示例代码如下:
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
7. 嵌套
每一列里面都可以在嵌套一行和n(不能超过12)列,那嵌套里面的元素就会以父级的宽度为基准,再分12个列。
示例代码如下:
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
第1行第1列
本篇结束,写在最后
栅格系统用来网页布局,这是网页设计的第一步,另外Bootstrap的中文网上(官网的翻译版)里面的布局方式也值得我们学习,可以仔细观察一下。
Bootstrap 系列: