bootstrap学习记录

1.响应式：页面会根据不同设备的不同分辨率自动响应不同的布局方式。

2.网格系统：Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

行（row）必须放在 .container class 内，一个row代表1行，1行内被分为12列；

col代表列，col-xx-y中的y代表当前元素所占的列数。xx的值可以为四种：lg、md、sm、xs，分别代表在四种尺寸宽度下的布局样式，四种尺寸宽度为：lg>=1200px、md>=992px、sm>=768px、xs<768px；（只需要加上class名，就可以实现响应式效果）

col-lg-offset-2:偏移量,就是在lg的布局下，当前标签加上对于列数的左外边距（margin-left）;

3.轮播图 

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://static1.bcjiaoyu.com/bootstrap-banner01.jpg" alt="1">
</div>
<div class="item">
<img src="https://static1.bcjiaoyu.com/bootstrap-banner02.jpg" alt="2">
</div>
<div class="item">
<img src="https://static1.bcjiaoyu.com/bootstrap-banner03.jpg" alt="3">
</div>
</div>

<script>
$(function(){
$('.carousel').carousel({
interval:2000,
wrap:true
});
})
</script>

4.注册 登录 标志符号

<ul class="nav navbar-nav navbar-right"> 
<li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>
</ul>