Bootstarp全局css样式

Bootstrap 是移动设备优先的。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
/*user-scalable=no 可以禁用其缩放（zooming）*/

Normalize.css 重置浏览器之间的样式 让浏览器保持一致。
bootstrap 里面的css全部是响应式布局 媒体查询做响应式。
布局容器：
container：类用于固定宽度并支持响应式布局的容器
固定模式布局
container-fluid：类用于 100% 宽度，占据全部视口（viewport）的容器。
流式布局

样式以class名称来使用

栅格系统
类似表格布局 一行12个列
row 必须放在式布模式里面 列必须放在行内
布局模式之间的padding 可以使用子元素的Margin负值来抵消

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

<div class="container-fluid ">
    <div class="row">
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">1</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">2</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">3</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">4</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">5</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">6</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">7</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">8</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">9</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">10</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">11</div>
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 l">12</div>
    </div>
</div>    

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

<div class="container-fluid l">
	<div class="row">
        <div class="col-lg-4 s col-lg-push-8">5</div>
        <div class="col-lg-8 s col-lg-pull-4">7</div>
    </div>
</div>

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

<div class="container-fluid l">
	 <div class="row hidden-md">
        <div class="col-lg-12 s">10</div>
    </div>
    <div class="row hidden-lg">
        <div class=" col-lg-3 col-md-3 col-xs-3 l">1</div>
        <div class="col-md-9 col-lg-9 col-xs-9 l">2</div>
    </div>
 </div>

标题

<div class="container">
    <p class="h1">主标题<span class="small">副标题</span></p>
    <p class="h2">主标题<span class="small">副标题</span></p>
    <p class="h3">主标题<span class="small">副标题</span></p>
    <p class="h4">主标题<span class="small">副标题</span></p>
    <p class="h5">主标题<span class="small">副标题</span></p>
    <p class="h6">主标题<span class="small">副标题</span></p>
</div>

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

<p>我在学习<span class="mark">bootstrap框架</span></p>
<p>我在学习<span class="lead">bootstrap框架</span></p>
<p>西安</p>
<s>西安</s>
<ins>西安</ins>
<em>西安</em>
<i>西安</i>

文本对齐类

	<p class="text-center">陕西西安</p>
    <p class="text-left">陕西西安</p>
    <p class="text-right">陕西西安</p>
    <p class="text-justify">陕西西安</p>
    <p class="text-nowrap">陕西西安</p>

改变字母大小写

	<p class="text-lowercase">school</p>
    <p class="text-uppercase">school</p>
    <p class="text-capitalize">high school</p>

后省略语

 	<abbr title="attribute">attr</abbr>
    <abbr title="HyperText Markup Language" class="initialism">HML</abbr>

写地址

  <address>
        <strong>陕西西安雁塔区</strong><br>
        1999.0808<br>
        男<br>
        <abbr title="Phone">P:</abbr>159695323
    </address

效果

 	<blockquote>
    	<p>今天是10月23号星期三</p>
	</blockquote>
	/*将任何 HTML 元素包裹在 <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>

表格相关类

    <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
        <tr class="active">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="success">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="info">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="warning">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>

按钮的类

 	<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 bth-primary">按钮</button>
    <button class="btn bth-link">按钮</button>
    <button class="btn btn-default">按钮</button>
   

图片的类
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">西安 </p>
    <p class="text-warning">西安 </p>
    <p class="text-info">西安 </p>
    <p class="text-success">西安 </p>

背景色辅助

	<p class="text-danger bg-primary">西安 </p>
    <p class="text-warning bg-danger">西安 </p>
    <p class="text-info bg-success" >西安 </p>
    <p class="text-success bg-warning">西安 </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="show">a</div>
    <div class="hidden">a</div>