初学bootstrap的一些知识点

一 bootstrap环境搭建：

bootstrap中文官网（http://www.bootcss.com），下载你想要用的版本，然后解压。

将所需要的文件引入，注意引入顺序，并且Bootstrap是基于Jquery的，所以必须引入Jquery,并且版本要大于1.9

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script> 

二 全局样式

文件引入之后，我们就可来搭建样式，bootstrap里定义好了各种模块的和各种标签的样式

例如：<span class='h1'>大标题</span>  在我们给span 标签添加一个h1类名时，文字样式自动渲染成我们熟知的H1标签样式，不需要自己去添加类名定义。还有其他的一些text-left 文字左对齐样式等。

表格tabled 的样式定义，非常方便我们去引用，我简单介绍一下我自己所学的关于table样式的内容：

<table class="table table-bordered table-hover">

table类，直接将我们所写的表格渲染成自适应屏幕的宽高的表格；table-bordered 为表格增加边框包括里面单元格；table-hover 是增加鼠标悬浮效果

另外还有一些 如danger、 warning 、info 、succsee 等类，是为行单位改变颜色样式

三 栅格系统

栅格布局是bootstrap里较为重要的一点，主要用来做响应式布局

bootstrap 默认将浏览器宽度分成12份，并且有默认的大屏幕 中屏幕 和小屏幕等的区别,这个当浏览器窗口变化时会自动检测。

<div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3"></div>

这里的col 就是代表我们列所占的宽度 加上后缀lg代表大屏幕（我是这么认为的，可以用媒体查询调整具体的宽度范围）col-lg-3 则是代表占整个屏幕的四分之一，上面说过 默认将浏览器宽度分成12份；同理col-md-4可以理解为比lg小一号的屏幕大小它占整个浏览器宽度的三分之一；其余的同理；offset 是调整div的位置的，col-lg-offset-3则是在大屏幕中div在距离整个屏幕的四分之一的位置（向右移四分之一）。

四 组件样式

bootstrap为我们提供了许多模块的样式，我们只需要引入这个类名就可。我主要介绍一下有哪些模块的类：

1 字体图标   2下拉菜单   3导航     4分页    5进度条    6列表      7面板

按照前面我们所说的，我们只需要给相应标签添加类名就能得到我们想要的样式（可以根据需求修改）

例如：导航条

<ul class="nav nav-justified">
    <li class="active"><a href="">csdn</a></li>
    <li><a href="">csdn</a></li>
    <li><a href="">csdn</a></li>
    <li><a href="">csdn</a></li>
</ul>
<ul class="nav nav-tabs">
    <li class=""><a href="">csdn</a></li>
    <li><a href="">csdn</a></li>
    <li><a href="">慕课网</a></li>
    <li><a href="">慕课网</a></li>
</ul>
<ul class="nav nav-stacked">
    <li class=""><a href="">慕课网</a></li>
    <li><a href="">慕课网</a></li>
    <li><a href="">慕课网</a></li>
    <li><a href="">慕课网</a></li>
</ul>

当我们添加nav 这个类之后就会给我们一个导航样式而 nav-tabs nav-justified nav-stacked 则是导航的其他样式，自己动手试一试更清楚。active类是默认是选中状态。 其他模块类同理添加相应类名即可，这里就不多讲（实际上我也忘记了  o(╥﹏╥)o 哭死）

bootstrap 用来开发响应式界面，我们用到的主要是样式库，交互效果其实其本身也自带，但是一般情况下会根据各个需求不同，效果不同所以一般不用bootstrap做交互效果（我也是听其他大神说的，我是一个前端小白）。

最后 这是我能总结的一些关于bootstrap的一些知识点，希望能够有所帮助。时代在变，不变的是本质；生命不息，学习不止；