bootstrap第一天学习笔记

bootstrap第一天学习笔记

1.3栅格系统（grid）
定义：一系列的行和列构建的一种布局，随着屏幕放大，最多展示12个列

1.3.1 container，容器，成东西
网页上所有的内容，建议放到容器里面

两种布局：
    固定布局：container
    流式布局：container-fluid

展示一个案例：

如何创建一个行？
row

栅格参数：
    col-lg-3：lg，large（屏幕>=1200px）PC
    col-md-3：md，middle（992px-1200px）
    col-sm-3：sm，small（768px-992px）平板
    col-xs-3:（小于768px）手机

1.4辅助类（tools）
文本颜色，text-
text-primary 颜色
text-danger 颜色
text-info 颜色
text-success 颜色
text-muted 颜色
text-warning 颜色

背景颜色：bg-
    bg-primary 颜色
    bg-danger 颜色
    bg-info 颜色
    bg-success 颜色
    bg-muted 颜色
    bg-warning 颜色

关闭按钮图片：<button class="close"><span>&times;</span></button>

倒三角：<span class="caret"></span>

快速浮动：
    把块元素转换成行内元素
    左浮动：pull-left
    右浮动: pull-right
    清除浮动：clearfix

块元素居中：center-block
块元素内容居中：text-center
自定义块元素垂直居中：

visible-lg：只有大屏幕的时候显示

1.5表格
只需要增加一个table类，即可实现美化的表格
1.斑马线，隔行换色：table-striped
2.鼠标悬停效果：table-hover
3.增加边框：table-bordered
4.表格的颜色：active，info，danger，success，warning，muted

垂直居中：vertical-align：middle
vertical：垂直
align：对齐

1.6表单
垂直样式表单（默认）：
表单分组：form-group
表单项（input，textarea）：form-control

    复选框
         <div class="checkbox">
          <label>
            <input type="checkbox">足球 
          </label>
          <label>
            <input type="checkbox">蓝球 
          </label>
          <label>
            <input type="checkbox">乒乓球 
          </label>
        </div>

    单选框：    
        <div class="radio">
          <label>
            <input type="radio" name="sport">足球 
          </label>
          <label>
            <input type="radio" name="sport">蓝球 
          </label>
          <label>
            <input type="radio" name="sport">乒乓球 
          </label>
        </div>

    下拉列表
        <div class="form-group">
            <label>下拉列表</label>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>

水平样式表单：
1.给form增加form-horizontal
2.label：col-lg-2
  div：col-lg-10

响应式：样式会根据屏幕的分辨率来显示

1.7列表
ul：list-group
li：list-group-item

徽章：在li里面加一个<span class="badge">10</span>

每个列表项的颜色：list-group-item-颜色