Bootstrap 笔记二.模块分类及排版布局

一.8大类型

1. 基础
2. 颜色
3. 尺寸  (4中常用尺寸)
4. 状态
5. 特殊元素
6. 并列
7. 嵌套子元素
8. 动画

 

---

 

二.布局排版

2-1. 基础排版

        1. 标题 .h1-.h6 对应 36 30 24 18 14 12 px

        2. 主题 .lead

        3. 提示  title="文字内容"

        4. 有序无序列表 

                清除样式 .list-unstyled

                行内块元素分布 .list-inline 给ul

 

2-2. 表格样式

    给 table 标签

        1. 变身 table    

        2. 隔行变色 table-striped

        3. 带边框 table-bordered

        4. 鼠标经过效果 table-hover

    

    给 td 标签

        1. 选中/激活状态 active

        2. 提示/成功 success 绿色

        3. 信息 info 蓝色

        4. 警告 warning 淡黄色

        5.危险/报错 danger 淡粉色

 

2-3. 表单样式

        1. form-group 给包着label和input的盒子

        2. form-control 给input，变为一整行

        3. btn 和 btn-default  给按钮，实心/幽灵

        4. 内联表单 form-inline 给form标签 配合1、2使用

        5. sr-only 类似删除

        6. 水平排列 form-horizontal 给form标签 配合1、2使用

        7. 基本的标签名字都有一个类名

        8. 校验 has-success has-warning has-error 给有form-group的标签

        9. 成功提示 glyphicon 和 glyphicon-ok 一起给一个span 这个span一般紧跟在input后面

        10. 警告提示 glyphicon 和 glyphicon-warning-sign 一起 ，同上

        11. 错误提示 glyphicon 和 glyphicon-remove 一起 ，同上

 

2-4. 按钮+图像+文本样式

        1. 按钮的7种样式

            .btn 默认

            以下要和 btn 一起写

            .btn-default 默认

            .btn-primary 首选项

            .btn-success

            .btn-info

            .btn-warning

            .btn-danger

            .btn-link

            .btn.active

            控制大小：btn-lg btn-xs 等

            .btn-block 变为块，宽为100%

            disabled 警用

 

            

        2. 图像的3种样式 img 标签的

            .img-rounded 有圆角

            .img-circle 椭圆！要变为圆，只用把他的宽高设为一样

            .img-thumbnail 带有一个有点好看的边框

 

        3. 文本的样式

            .text-primary 淡蓝色

            .text-muted 淡灰色

            .text-success

            .text-danger

            .text-warning

            

        4. 关闭图标按钮

 

        5. 下三角

            <div class="caret"></div>

 

        6. 常用

            .pull-right 右浮动

            .pull-left 左浮动

            .content-block 块元素