<b>bootstrap中文版官网:</b><a href="http://www.bootcss.com/">http://www.bootcss.com/</a><br>
<b>boootstrap官网:</b><a href="http://getbootstrap.com/">http://getbootstrap.com/</a><br>
bootstrap是Twitter推出的一个基于jQuery的响应式框架,利用预先定义的css和一些js实现响应式布局,大大简化了布局的时间,同时也规范了代码的命名。以下是css部分的一些了解。
要想使用bootstrap框架,需要将bootstrap框架下载,下载后文件夹中有js、fonts、css三个文件夹,其中css和js需要在html中引入,其中bootstrap的js是
基于jQuery的,所以在引入bootstrap之前,需要引入适应版本的jQuery,如果jQuery版本太低控制台会报错,引入代码如下:
<code lang="html"><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script src="jQuery.1.10.2/Content/Scripts/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script></code>
然后就可以使用bootstrap了。
以下是css部分的的一些了解:
bootstrap的调用是根据类来调用的,所以只要在想要的标签后加入对应的类就可以调用了
1.字体:关于bootsstrap的字体,由于html本身的字体就有很多选择,如加粗,斜体,等等,所以bootstrap只是加入了一些对应的类以使普通文本也可以变成加粗
等变化,如.h1、.h2、.h3让其标签里的字变成h1标题大小,.lead强调文本内容,.text-left/center/right改变文本对齐风格。
2.导航,在ul上定义特殊类,变成了导航,首先是加入一个.nav,这是导航的基本样式,接下来,加入一个.nav-tabs/.nav-pills/.nav-justified增加其美观性
3.下拉菜单,分为两部分,一个按钮点击显示菜单,一个列表作为菜单,其中还要加入一个事件触发响应器,而在bootstrap中,定义了一个css属性以触发响应,
这就是data-toggle属性,data-toggle属性说明响应以什么事件触发,如常用的model,popover,tooltips等事件,<b>但是</b>~~~~在导航里有个专门的事件对应,那就是dropdown,添加data-toggle="dropdown",激活下拉项,还有一个data-target,是指事件的目标,data-toggle和data-target属性是怎么实现的,下次再写一篇,专门讲~~
4.栅格系统,在bootstrap的世界中,造物主为每一行都分成了12个基本的等份,而我们可以去分配我们每个组件占了其中多少份,只需要在类中加上col-lg/ms/xl/xs-1~12就可以了,其中lg/xl/ms/xs分别代表了不同的分辨率,bootstrap也是以此来完成它的响应式布局的,col-lg-*是通过css3的@media的媒体查询来判断并完成响应式布局的。
5.按钮,html中其实就已经有button组件,所以bootstrap中添加了.btn类让普通的组件也可以变成一个按钮,同时还增加了btn-default/danger等属性来改变其样式
6.进度条,bootstrap增加了一个.progress类来创建一个基本样式的进度条,.progress-*来设置不同样式的进度条
7.字体图标,bootstap的fonts文件夹中存放了许多存储字体图标的文件,通过.glyphicon使组件具有一个无图标的基本样式,.plyphicon-*使组件具有某种图标