Responsive Design with Bootstrap

Use Responsive Design with Bootstrap Fluid Containers

流行的响应式框架Bootstrap

• Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调响应式设计的概念。
• 通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
• 你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

---

Make Images Mobile Responsive

• 通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。

---

Center Text with Bootstrap

• 可以通过居中头部元素来使它看起来更棒。 我们所要做的只是给元素添加text-center class属性

---

Create a Bootstrap Button

• Bootstrap有它自己的 button 按钮风格， 看起来要比默认的按钮好看得多。只要给button添加btn系列的class属性

---

Create a Block Element Bootstrap Button

通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。

行内元素与块级元素的区别

• 注意，这些按钮仍然需要 btn class。

---

Taste the Bootstrap Button Color Rainbow

• Bootstrap自带了一些预定义的按钮颜色。
• 深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。

---

Call out Optional Actions with Button Info

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

---

Warn your Users of a Dangerous Action

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

---

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。

Bootstraps 的12列网格布局是如何起作用的

• 在这张图表中，class属性 col-md-** 正被使用。在这里，md 表示 medium (中等的)，* *代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
• 在我们创建的 Cat Photo App 中，将会使用 col-xs-** ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* * 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
• 当div 元素设置了 class 属性 row 之后，那几个按钮便可嵌入其中。

---

Use Spans for Inline Elements

• 可以用 span 标签来创建行内元素。

inline 元素与 block-level 块级元素的区别

通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。

---

Create a Custom Heading

导航

• Bootstrap使用响应式栅格系统，这使得把元素放入行内并为每个元素指定宽度变得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。
• 将图片和元素放在同一个<div class="row">元素下,再指定元素宽度应该占用的栏数，就可以放在同一行，实现导航条了。

---

Add Font Awesome Icons to all of our Buttons

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

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

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

• i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：
  <i class="fa fa-info-circle"></i>

---

Responsively Style Radio Buttons And Checkboxes

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

---

Line up Form Elements Responsively with Bootstrap

• 把 input 元素和提交按钮 button 放到同一行。我们将用和之前一样的方法：通过使用拥有 row class 属性的 div 元素和其它在它之内的具有 col-xs-* class 属性的 div 元素。

---

Create a Bootstrap Headline

• text-primary 使文本颜色为深蓝色
• text-center 使文本居中显示

---

House our page within a Bootstrap Container Fluid Div

• 为了确保页面里所有的内容都是响应式的，将 所有元素放置于一个class属性为 container-fluid 的 div 元素中。

---

Create a Bootstrap Row

                                            <div class="row"></div>

---

Split your Bootstrap Row

• 分栏来放置元素
  <div class="col-xs-*"></div>

---

Create Bootstrap Wells

• Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感
  <div class="well"></div>

---

Apply the Default Bootstrap Button Style

• Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default 。
  <button class="btn btn-default"></button>

---

Create a Class to Target with jQuery Selectors

• 并不是每一个 class 属性都是用于 CSS 的。 有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。
  为 button 添加 target:
  <button class="btn btn-default target"></button>

---