bootstrap学习笔记(二)

以最新的ie版本显示网页

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

解决ie9以下不兼容html5

<!—[if lt IE 9]>

<script src=“bootstrap/js/html5shiv.min.js”></script>

<script src=“bootstrap/js/respond.min.js”></script>

<![endif]—>

栅格系统

Bootstrap把一个容器或整个网页分成12列 超过12列自动换行

Bootstrap的栅格系统由一行多列组成

栅格系统必须放在.container和.container-fluid之中

栅格系统参数

样式名称   分辨率                          .container max width colspacing

.col-xs-n  (0,768px)                      auto                        30px

.col-sm-n [768px,992px)               750px                      30px

.col-md-n [992px,1200px)             970px                      30px

.col-lg-n   [1200px,MAX_INFINITY] 1170px                      30px

列偏移

.col-md-offset-n

.help-block以块方式显示 不紧凑

复选框

<div class=“form-group”>

<label class=“col-md-2 control-label”>兴趣爱好：</label>

<div class=“col-md-10”>

<label class=“checkbox-inline”><input type=“checkbox”>画画</label>

<label class=“checkbox-inline”><input type=“checkbox”>唱歌</label>

<label class=“checkbox-inline”><input type=“checkbox”>运动</label>

</div>

</div>

单选按钮

<div class=“form-group”>

<label class=“col-md-2 control-label”>学历：</label>

<div class=“col-md-10”>

<label class=“radio-inline”><input type=“radio”>预科</label>

<label class=“radio-inline”><input type=“radio”>学士</label>

<label class=“radio-inline”><input type=“radio”>硕士</label>

</div>

</div>

.form-horizontal水平排列元素 还需要添加栅格系统 才能使字段名和输入元素在一行

.control-label控制文本距离 能使字段名靠近输入元素

按钮样式

适用于<a><input><button>

.btn全局样式

按钮颜色

.btn-default

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link

按钮大小

.btn-lg大

.btn-sm小

.btn-xs超小

激活状态

.active

.disabled

.btn-block将按钮拉伸到撑满整个父元素