FCC学习笔记-(二) Responsive Design with Bootstrap

(二) Responsive Design with Bootstrap

Bootstrap

• Responsive Design
  bootstrap是一款受欢迎的响应式CSS框架，它能计算屏幕的宽度，而且通过调整HTML元素的尺寸进行响应，因此称为响应式设计。应用响应式设计，无需为移动端单独设计网站。

• add bootstrap
  在HTML顶部增加以下代码：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

• 嵌套 container-fluid

<div class="container-fluid>
...
</div>

自动响应图像

• img-responsive
  把图像用合适的尺寸展示

<img src="https://bit.ly/fcc-running-cats" class=
"img-responsive">

文字居中

• text-center属性

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

Bootstrap 按钮

• 创建按钮: btn

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

• 创建Block Bootstrap元素的按钮: btn-block

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

• 高亮按钮: btn-primary

<button class="btn btn-clock btn-primary">Like</buttom>

• 另一种颜色的高亮按钮：bin-info

<button class="btn btn-clock btn-info">Info</buttom>

• 红色高亮按钮，用于警告用户： bin-danger

<button class="btn btn-clock btn-danger">Delete</bu

Bootstrap Grid（网格）

• 大多数的bootstrap的类都可以应用于div元素
• 12-columns的grid布局
  col-mid-* , md代表居中，*代表元素指定的column数
  col-xs-* ,xs表示额外的小
  
• 首先，设定div，类属性为row

<div class="row">

• 其次，对每一一个button，设定

<div class="col-xs-4">

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

Span

• 创建inlines element
  span可以把多个元素，甚至相同元素的不同部分定义为不同的style

• nilines elements 和 block-level的区别：

  

<p>Three things cat<span class="text-dager">hate:</span></p>

自定义标题

• 与boostrap grid类似，利用网格，将标题与图像置于同一行

<div class="row">

<div class="col-xs-4">

<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="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
</div>

给按钮增加图标

• HTML顶部增加代码：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

• Font Awesome是一个非常便利的图标库

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

• 在button中嵌套代码：

   <button class="btn btn-block btn-primary"><i class="
   fa fa-thumbs-up"></i>Like</button>

Responsively Style选择按钮

• 利用boostrap grid
  单选按钮 radio button：

<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 class="col-xs-6">
    <label><input type="checkbox" name="personality"> Loving</label>

多选按钮 checkbox：

<div class="row">
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>

Create Bootstrap Wells

• well 类创造了一种可视化的深度感

div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
      </div>

    </div>
    <div class="col-xs-6">
      <div class="well">
        </div>

    </div>
  </div>
</div>

Target

• 用于Jquery