bootstrap学习使用——快速入门

前言：

    最近在学习了bootstrap后，立马就使用它重新做了某个项目的页面，不要多想，怎么才学bootstrap！我只是刚参加工作的新手，以前比较喜欢写原生的CSS样式以及JS方法，页面效果的实现，一般一个项目的页面做完需要好几天的时间，改了又改！再加上一些JS效果，功能方法部分也得一周的时间，在使用了boobstrap之后，重新做了页面，只花了两天！好吧，开始我的学习笔记吧。

---

1. 栅格系统

使用外部div 添加类 container ，在内进行页面的划分，行 .row ,列 col-md-*,页面分成12份,例如：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h5>一行四列</h5>
        </div>
        <div class="col-md-4">
            <h5>一行四列</h5>
        </div>
        <div class="col-md-4">
            <h5>一行四列</h5>
        </div>
    </div>
</div>

当然，我们也可以在列中再划分行，或者列。也就是进行细分，非常方便。

---

2.部分样式

类	描述
.text-left	文本居左
.text-right	居右
.text-center	居中
.text-lowercase	文本小写
.text-uppercase	文本大写
.text-capitalize	单词首字母大写
.list-unstyled	去除默认样式
.text-inline	列表项处于一行

---

3.表格

表单元素

<table>
    <thead>
        <tr>
            <th><th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

类	描述
.table	表格横向分割线
.table-striped	添加斑马条纹线
.table-bordered	添加表格边框
.table-hover	鼠标悬浮样式
.active	添加鼠标悬浮样式
.success	绿色样式
.info	绿色样式
.warning	黄色警示样式
.danger	红色危险样式

类 .active .success .info .danger 可应用在提示信息的文本上，还有一个.primary,用做一些按钮组的不同样式

---

4.表单

<form role="form">
    <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-8">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-8">
            <label>
                <input type="checkbox" class="">选购
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-8">
            <select class="form-control">
                <option value="0"></option>
            </select>
        </div>
    </div>
</form>

类	描述
.form-group	表单组，获取最佳间距
.form-control	文本框元素的样式类
.control-label	label标签样式
.form-inline	所有元素处于同一行，（就不需要划分列了）
.form-horizontion	水平表单，（也就是类form-group 中的元素处于同一行）

说明：.form-control样式使得文本框元素占据一行的剩余空间，所以在单选，复选框时，不要加.form-control ,不然回事选框的文字处于第二行。
表单的信息提示样式，.has-success(绿色文字，边框)，.has-error（红色样式）,.has-warning（黄色样式）

---

5.按钮

类	描述
.btn	按钮基本样式
.btn-default	按钮的默认样式
.btn-success	绿色样式
.btn-warning	黄色样式
.btn-danger	红色样式
.btn-block	设置父元素的100%，拉宽元素
.active	激活样式
.disabled	禁止点击样式

6.其他的样式

图片的样式设置：

• .img-rounded 获得圆角图片
• .img-circle 获得圆形图片
• .img-responsive 使得图片响应式，随着父类大小改变

其他页面设计样式：

• .clearfix 清楚浮动
• .pull-left 元素居左
• .pull-right 局右
• .center-block 元素居中
• .show .hide 元素显示，隐藏

好了，这些都是基本的页面结构设计的样式，还需要布局组件，后期在写，更加详细的内容访问菜鸟教程