2017/5/10 freeCodeCamp Bootstrap部分总结

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  <!--调用bootsrap-->

<div class="container-fluid">      <!--.container与.container_fluid是bootstrap中的两种不同类型的外层容器-->

<img src= /images/running-cat.jpg class="img-responsive">      <!--图片调用bootsrap，自适应屏幕-->

<h2 class="red-text text-center">your text</h2>                   <!--text-center 文字居中-->

<button class = "btn">Like</button>                               <!--bootsrap下的按钮，btn为基本样式，btn-block 块级拉伸-->

</div>

 

布局：

<div class = "row">                                                                  <!--列宽12  md中等 xs extra smal  row 行 column列-->
<div class = "col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
<div class = "col-xs-4"><button class="btn btn-block btn-info">Info</button></div>
<div class = "col-xs-4"><div class="well"><button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button></div></div>   <!--添加图标  well 视觉效果-深度  同样还可添加id -->

</div>

 

<div class="row">                                                <!--做导航栏，将图片与文字置于一行，然后分配网格-->
<div class="col-xs-8"><h2 class="text-primary text-center">CatPhotoApp</h2></div>

<div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a></div>
</div>