fcc 响应式框架Bootstrap 练习2

text-primary 属性值使标题直接变成了红色，text-center使标题直接居中

 <h2 class="text-primary  text-center">CatPhotoApp</h2>

 

 

 

img-responsive 使图片变成响应式自动调整大小适应屏幕

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

 

 

将能用class属性值直接定义的样式来替代多余的css样式

 

 

"love" 放到 span 标签下。然后为其添加 class="text-danger" 来使文字变成红色

<p>Things cats

<span class="text-danger">love</span>:

</p>

 

 

为Cat Photo 应用做一个导航， 标题图片放在一行里

<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> 

 

 

图标库

Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，可以通过像素单位指定它们的大小,

可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在 HTML 头部增加下列代码即可：

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

 

 

通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮中，方法是在i 元素中增加 class 属性 fa 和 fa-thumbs-up,

i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标

<button class="btn btn-block btn-primary">

<i class="fa fa-thumbs-up"></i>Like

</button>

 

 

将 Bootstrap 的 col-xs-*用在 form 元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽

<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
<div class="col-xs-6"> <label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
</div>
</form>

 

 

为输入文本框增加属性class="form-control" 来增加框100%宽度

提交按钮增加属性class="btn btn-primary"变成红色，增加i元素添加图标

<input type="text" class="form-control" placeholder="cat photo URL" required >
<button type="submit" class="btn btn-primary">

<i class="fa fa-paper-plane"></i>

Submit

</button>

 

91