fcc 响应式框架Bootstrap 练习1

需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

再把html元素都放到div元素中

 

<img class="img-responsive" src="/images/running-cat.jpg">

 

<h2 class="red-text text-center">CatPhotoApp</h2>      text-center不用写样式自动会使h2 居中  

 

<button class="btn  btn-block btn-primary">Like</button>创建按钮 ，加入btn-block不用写样式，按钮自动成为块级元素，会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行，

加入btn btn-primary自动变成浅蓝色

 

 

Bootstrap 按钮颜色有7种，对应的class为

btn,白色

btn btn-primary,深蓝色

btn btn-info,浅蓝色

btn btn-success,绿色

btn btn-warning，黄色

,btn btn-danger,红色

btn btn-inverse黑色

 

 

<button class="btn btn-block  btn-danger">Delete</button>创建一个文本为 "Delete" 的红色按钮

 

<div class="row">         三个按钮排成一行
<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"><button class="btn btn-block btn-danger">Delete</button> </div>
</div>    每个按钮的大小xs较小的，如手机屏，md中等的大小如笔记本电脑，数字代表所占的列宽

82