bootstrap 学习 ---css样式学习

bootstrap 适用于响应式布局，移动设备优先的web项目

1、学习bootstrap需要引入bootstrap的css，jquery，bootstrap的js，注意：jquery文件必须在bootstrap.js之前引入

ie8需要引入response.js配合才能实现对媒体查询的支持，另外还需引入html5shiv.min.js

为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到页面中：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2、现在开始bootstrap的学习

1>bootstrap是栅格系统，是通过css3的媒体查询实现的。bootstrap将屏幕分为四种类型：<768px(col-xs-*)，>=768px(col-sm-*)，>=992px(col-md-*)，>=1200px(col-lg-*)；

代码模板：

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-offset-3"></div>
    </div>
</div>

其中container是元素居中，container-fluid表示的是宽度100%；col-xs-4可以换为col-sm-4，col-ms-4，col-lg-4,中的一种或者多种，col-xs-offset-3 是列偏移，
.col-md-push-8  相当于 left:66.7%
.col-md-pull-4  相当于 right:33.3%
在div中默认的是float:left，因此有的时候要清除浮动
清除浮动有两种:1、clearfix 是清除当前div的浮动 2.在浮动后的div加上兄弟div：<div class="clear"></div>
2>关于图片
　　图片为响应式：<div class="img-response" src="...">
　　图片为圆形： class="img-circle"
　　圆角：.img-rounded
　　有一个边框：.img-thumbnail
3> 文本
　　备注：danger为红色，info为蓝色  success为绿色  warning为黄色 
　　颜色：.text-danger  .text-info .text-muted .text-success  .text-warning .text-primary
标题  字大小 margin-top   margin-bottom
h1　　36px　　20px　　　　　　10px
h2　　30px　　20px　　　　　　10px
h3　　24px　　20px　　　　　　10px
h4　　18px　　20px　　　　　　10px
h5　　14px　　20px　　　　　　10px
h6　　12px　　20px　　　　　　10px
<samll></small>可在标题标签中使用 <h1>一级标题<small>一级副标题</small></h1>

p标签：.lead 强调文本
文本对其方式：.text-left:左对齐；.text-center:居中对其；.text-right:右对齐
列表：ol，ul 
　　.list-unstyled:去掉li标签的点
　　.list-inline: 水平排列
　　.dl-horizontal:水平排列
代码：
　　<code>中间为输出代码</code>
　　<kbd>alt+f</kbd>
　　<pre>原样输出</pre>
　　<samp>程序结果</samp>
表格： <table class="table"></table>
　　带条纹：.table-striped
　　带边框：.table-bordered
　　悬停： .table-hover
　　紧凑： .table-condensed
　　tr： .info  .success .warning .active  .danger
若为响应式表格，需吧table放在class为table-response 的div中
表单空间：form
　　.form-group 表单组 上一表单距下一表单15px
　　.form-control 宽度100%
　　.form-inline  内联表单，排为一行
　　.horizontal  横向表单
label:
　　.control-label 去除空格 相当于右对齐
　　.checkbox-inline  行内水平排列
静态控件： p: .form-control-static
控件状态：.autofocus 自动获取焦点  .disabled 禁用  .readonly 只读
校验：.has-success  .has-warning  .has-danger  .has-error
控件大小：.input-lg  .input-md .input-sm .input-xs
列尺寸： .col-xs-2等等
按钮：button
　　颜色：.btn .btn-default .btn-primary  .btn-success  .btn-info  .btn-warning .btn-danger .btn-link
　　大小：.btn-lg .btn-md .btn-sm .btn-xs  .btn-block(沾满全屏)
　　活动状态：.active
div： .center-block 居中
     .pull-left/right 居左/右  相当于 float:left/right
　　　.visible-sm  在sm下显示   .hidden-sm在sm下隐藏
 　　.show 显示 .hidden隐藏