bootstrap框架css始解

<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-*使组件具有某种图标