Bootstrap实战课程列表(无答案版)

使用Bootstrap设计响应式页面
 

还记得在学习HTML5和CSS的时候,我们创建过一个猫咪照片(Cat Photo)的小应用吗?现在,让我们回头继续完善这个应用吧。这次,我们将使用非常主流的响应式CSS框架Bootstrap来完善它。

Bootstrap会自动获取使用者屏幕的大小,并根据屏幕的大小自动调整HTML元素的宽度和高度来适配屏幕,因此称之为--响应式布局。

通过响应式布局,你不再需要为你的Web站点重新设计一个手机版的页面,Bootstrap会自动帮你调整好在手机页上的页面显示,事实上,Bootstrap在任何宽度的设备上都能适应得很好。

使用Bootstrap也非常简单,你只需要把下面的链接添加到你需要使用Bootstrap来进行布局的应用的头部：

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

不过,考虑到接下来的学习中都需要使用该样式,所以我们已经默认帮你们都加载好了,你不需要再添加这个样式链接了。

那么,接下来让我们开始学习Bootstrap吧。首先，我们需要把所有的HTML内容放在一个包含有container-fluidclass名称的div下。

通过Bootstrap使图片适配手机显示

请在示例图片的下方添加一张新的图片。图片的src路径为:/statics/codecamp/images/running-cat.jpg。

是不是觉得图片太大了?是不是觉得如果图片的尺寸刚好能适应手机屏幕宽度就好棒棒?

其实很简单的，通过Bootstrap，我们只要给图片添加 img-responsive的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。

通过Bootstrap使文本居中

Bootstrap除了可以使图片自适应以外,还可以很简单的让头部标题的文字居中,使标题看起来更美观。我们只需要给h2标签添加text-center的class属性,标题文字就可以居中了。

友情提醒：你可以使用空格给标签定义多个class,就像下面这样：

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

通过Bootstrap添加一个按钮

Bootstrap也有很多非常好看的button按钮标签可以使用,比起HTML自定义的按钮好看很多。

在大张猫咪的图片下面添加一个button标签,并且为它添加btn这个class,按钮的文本为"Like"。

添加一个Bootstrap块级元素按钮

通常情况下，button标签的宽度会与标签内包含的文字长度一致

如果你想是你的button 标签的宽度充满整个屏幕,你可以使用btn-block这个class讲按钮升级为块级元素,使button标签的宽度充满整个屏幕,并且该元素后面的所有元素都会浮动到下一行。

友情提醒:这些按钮仍然需要 btn class。

添加Bootstrap的 btn-block class 到你的按钮。

尝试给一个Bootstrap按钮添加颜色

btn-primary类是该应用的主要颜色类，这个类的颜色对于那些你希望高亮提示用户的操作上非常有用。

为按钮添加btn-primaryclass属性。

友情提醒：这个按钮仍然需要 btn 和 btn-block来两个属性！

Bootstrap按钮多种颜色属性设定

Bootstrap带有几个预定义的按钮颜色。其中btn-info 通常被用在用户比较可能会点击的操作上。

在 "Like" 按钮下面创建一个新的块级按钮,文本为"Info",并将class属性btn-info 和 btn-block添加给它。

友情提醒：所有这些按钮仍然需要 btn 和 btn-block class属性

添加一个Bootstrap警告按钮

Bootstrap带有几个预定义的按钮颜色。

btn-danger这个按钮的颜色是用来告诉用户,该操作具有一定的危险性，比如删除猫咪照片这样的操作。

添加一个带有btn-danger样式颜色的按钮,并设置其文本为"Delete"。

友情提醒：这些button的标签仍然需要 btn 与 btn-block这两个class。

使用Bootstrap做页面布局

Bootstrap使用响应式网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大部分类都可以应用于div 元素。

以下是Bootstrap的12列网格布局如何工作的图：