Bootstrap前端开发框架

简介:

是一个框架,基于HTML,CSS,JAVASCRIPT,可以针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的

bootstrap使用流程:

1.创建文件夹结构
2.创建html骨架结构
3.引入相关样式文件
4.需要一个布局容器之后进行书写内容

布局容器(预先定义好了):

 修改container的最大宽度(根据设计稿来改的)

书写内容:

Bootstrap栅格系统

简介:

是一套响应式,移动设备优先的流式栅格系统,指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.
Bootstrap里面container宽度是固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等份 

和rem的区别是:rem是将整个屏幕划分,而这个是将整个内容划分

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

 列嵌套:

注意:列是可以嵌套的, 不过最好加一个row这样可以取消父元素的padding值而且高度自动和父级一样高

 列偏移:

语法:.col-md-offset-*类可以将列向右侧偏移(实际是通过使用*选择器为当前元素增加了左侧的边距( margin) )

列排序:

语法::.col-md-push-*和.col-md-pull-*类就可以很容易的改变列的顺序

显示和隐藏:

语法:hidden,visible

 与之相反的，是visible-xs visible-sm visible-md visible-lg是显示某个页面内容