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:/
4000
/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