HTML5+CSS+Bootstrap学习笔记（三）

引入Bootstrap组件！

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

使图片适配屏幕

给图片添加img-responsive属性就可以使图片适配任何屏幕

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

Bootstrap文字

1）文字居中

给文字添加text-center属性就可以使文字居中

<h2 class="red-text text-center">your text</h2>

2）文字颜色

给文字添加text-primary、text-info、text-danger都会使其具有相应的颜色

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

3）在一句话中只改变一个单词的颜色

通过span元素将类添加到目标单词

<p>Top 3 things cats <span class = "text-danger">hate:</span></p>

Bootstrap按钮

平滑的btn

btn类型按钮具有更加平滑的边界

<button class = "btn">Like</button>

白色带边界的btn-default

btn-default类型按钮具有白色框与黑色边

<button class = "btn btn-default">Like</button>

块级的btn-block

通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间
添加块级class：btn-block

<button class="btn btn-block" >Like</button>

深蓝色的btn-primary

深蓝色btn-primary被用在那些用户主要采取的操作上

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

浅蓝色的btn-info

浅蓝色btn-info 被用在那些用户可能会采取的操作上

<button class = "btn btn-block btn-info">Info</button>

红色的的btn-danger

红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片

<button class="btn btn-block btn-danger">Delete</button>

多个元素放入一行

实现将多个元素(一般为按钮、标签等元素)放入一行并指定各个元素的相对宽度的需求
使用div的row框架将要放到一行的按钮嵌套起来，然后分别用多个div class=col-xs-* （其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕）(md为中等屏幕)，* 是你需要填写的数字，代表在一行中，各个元素应该占的列宽）将各个元素嵌套

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

Font Awesome图标库

1）增添方法

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

2）插入图标

插入info元素到button中

<i class="fa fa-info-circle"></i>

插入大拇指元素

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

插入垃圾桶元素

<i class="fa fa-trash"></i>

插入小飞机元素

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

Bootstrap提交组件

给你表单的文本输入框input元素增加form-control的class，可以使其平滑边界