bootstrap总结

*Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 *

Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

Bootstrap的源代码是使用less编写的

Bootstrap的js效果都是基于jquery的,所以一般要先引入jquery代码

使用:

引入 bootstrap.min.css文件

简单案例1:

--看看会有什么效果

table-striped可以使奇数行的背景设为灰色。
table-bordered可以使边框显示。
table-hover可以使鼠标悬停的行的背景变为灰色
table-condensed可以使行间距变小。

  成功或积极动作
 注意
 危险
姓名 年龄职业
张三18 程序员

响应式表格 Bootstrap3.0新特效

--这样做在小屏幕上看的时候会自动出现水平滚动条,大屏幕自动消失
Bootstrap栅格系统

bootstrap3.0使用了四种栅格选项来形成栅格系统 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg

xs(超小屏幕)
sm(小屏幕)
md(中屏幕)
lg(大屏幕)
案例1:

LESS

SASS

bootstrap3.0

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加系统会自动分为最多12列。它包含了易于使用的预定义classe

案例2:

作出我们经典的上中下样式网页

回顾开发要领

提供一个让网页居中的容器
设置行,宽度固定
---设置里边列占用的宽度
两个特殊的地方值得我们注意 Bootstrap重新定义了标题,采用了半加粗的字体 行高都采用了1.1倍 字体默认设置为14px

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的