Bootstrap概览

①   Bootstrap的文档类型为HTML5

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。

②    移动设备优先

③   响应式图片

通过添加.img-responsive类就可以将图片设置为响应式

④   全局显示,排版和链接

Bootstrap将所有的标签基本上都是重新书写了一遍

⑤   避免浏览器的不一致

⑥    容器

Bootstrap的代码基本上都是写在一个div.container的容器里面,这个容器默认是居中。

⑦    浏览器的支持

 

1.       引入bootstrap

Bootstrap框架含有3个文件夹,分别是css,fonts,js

bootstrap里面,很多js特效都是基于jquery的,所以,如果想要正常显示bootstrap里面的js特效,需要先引入jQuery

 

 

2.       栅格系统

所谓栅格系统,就是在bootstrap里面,系统将空间划分成了12列。默认md的页面宽度为970px

可以通过col-md-*来指定占多少个栅格

效果:

        

 

栅格系统选项

 

列偏移

可以使用.col-md-offset-*来指定列向右偏移多少,但是必须要和.col-md-*一起使用

官方示意图:

 

排版:

①    标题

bootstrap里面,基本上将所有的标签都重写了一遍

如下:

 

bootstrap里面,除了通过h1-h6标签来实现上面的效果以外,还可以通过.h1~.h6也可以实现标题的效果,但是要注意的是只是样式上一样,语义是不同的

效果:

 

可以通过small标签或者.small类来标记副标题

效果:

 

原文地址:https://www.cnblogs.com/zuiai/p/6988304.html