bootstrap栅格布局

Normalize.css 重置浏览器之间的样式 让浏览器保持一致
固定模式布局 流式布局
bootstrap里面的css 全是响应式的 媒体查询做响应式
container 固定模式布局
container-fluid 流式布局

以class 名称来使用

栅格系统 类似表格布局 一行12个列

row 必须放在布局模式里面 列必须放在行内

布局模式之间的padding 可以使用子元素的margin 负值来抵消

超小屏 <768 col-xs-*
小屏 >768 <992 col-sm-*
中屏 >992 col-md-*
大屏 >1200 col-lg-*

偏移类
col-lg-push-2 left值
col-lg-pull-2 right值
col-lg-offset-2 marginleft值

不同屏幕显示隐藏类
hidden-md 中屏隐藏
visible-lg 大屏显示

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="./css/normalize.css"/>
    <link rel="stylesheet" href="./css/bootstrap.css"/>

mark lead 突出显示文本
删除标签 del s
ins 添加下划线
strong 加粗标签
em i 斜体标签

    <p>1000</p>
    <s>bootstrap</s>
    <ins>bootstrap</ins>
    <em>bootstrap</em>

文本对齐类

    <p class="text-center">bootstrap</p>

    <p class="text-left">bootstrap</p>

    <p class="text-right">bootstrap</p>

    <p class="text-justify">bootstrap</p>

    <p class="text-nowrap">bootstrap</p>

改变大小写

    <p class="text-lowercase">bootstrap</p>

    <p class="text-uppercase">bootstrap</p>

    <p class="text-capitalize">bootstrap load</p>

后省略语

    <abbr title="attribute">attr</abbr>
    <abbr title="HyperText Markup Language" class="initialism">HTML is ccccc</abbr>

写地址

    <address>
        <strong>Twitter, Inc.</strong><br>
        1355 Market Street, Suite 900<br>
        San Francisco, CA 94103<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>

摘要效果

    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>

列表的类
list-inline  内联列表（水平列表）
list-unstyled  去点 去内边距

    <ul class="list-group">
        <li class="list-group-item"><a class="list-group-item" href="#">1</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">2</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">3</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">4</a></li>
    </ul>

  自定义列表  dl-horizontal  水平类

    <dl class="dl-horizontal">
        <dt>...</dt>
        <dd>...</dd>
    </dl>

按钮的类

    <button class="btn btn-default btn-lg">按钮</button>
    <button class="btn btn-danger btn-md">按钮</button>
    <button class="btn btn-warning btn-sm">按钮</button>
    <button class="btn btn-success btn-xs">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-link">按钮</button>
    <a href="" class="btn btn-default">百度</a>

图片的类
img-responsive 图片响应式

    <img class="img-circle" src="./img/baidu.png" alt=""/>
    <img class="img-rounded" src="./img/baidu.png" alt=""/>
    <img class="img-thumbnail" src="./img/baidu.png" alt=""/>
    <img class="img-responsive" src="./img/baidu.png" alt=""/>

文本颜色类

    <p class="text-danger">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-warning">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-info">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-success">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>

背景色辅助类

    <p class="text-danger bg-primary">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-warning bg-danger">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-info bg-success">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-success bg-warning">apibus, tellus ac cursus commodo, tortor mauris nibh.</p>

关闭按钮

    <span class="close">&times;</span>

快速浮动，清除浮动

<div class="clearfix">
        <div class="pull-left" style="width: 100px;height: 100px; background: red"></div>
        <div class="pull-right" style="width: 100px;height: 100px; background: blue"></div>
    </div>
    <div  style="width:400px;height: 100px; background: orange"></div>

让块元素居中 center-block

 <div class="center-block" style="width: 100px;height: 100px; background: deeppink"></div>

显示隐藏

    <div class="show">apibus, tellus ac cursus commodo, tortor mauris nibh</div>
    <div class="hide">apibus, tellus ac cursus commodo, tortor mauris nibh</div>