Bootstrap 3 How-To #2 标题,链接与按钮

时间:2024-01-20 08:57:27

这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书,但是,这本书的内容是基于以前版本的,与最新的 3.0 并不一致。

为了方便学习和使用 BootStrap 3, 这里将内容替换为了当前的 3.0 版。原书可以在 Amazon 买到,$17.99. 原书的内容比较简单,我会尽量补充一些内容。

Bootstrap 3 How-To #2 标题,链接与按钮

如果你很熟悉 HTML,你就可以很快地填充网页的内容,但是,bootstrap 拥有一些需要你注意的特性。

开始

如果你是一个 HTML 的新手,最好的 HTML 学习和参考的站点是 http://htmldog.com, 这里的 HTML 新手教程可以帮助你学习基础的知识,我强烈建议你学习这里的 CSS 教程,这样你可以更好地学习 Bootstrap。

Bootstrap 3 How-To #2 标题,链接与按钮

在 bootstrap 3.0 文件夹下创建一个名为 study 的文件夹,在其中创建一个名为 2 的工作文件夹。

将 starter-template 中的两个文件复制到你的工作文件夹中,开始我们的学习。

Bootstrap 3 How-To #2 标题,链接与按钮

1. 编辑网页的标题,将 index.html 文件的第 50 行,更新为如下内容,其中添加了 small 标记。

<h1>Welcome to my site! <small>I think you'll like ite.</small></h1>

2. 保存文件,查过浏览器查看页面

你应该看到页面变成如下的样式。

Bootstrap 3 How-To #2 标题,链接与按钮

我们还会将链接变成按钮的样子,让我们看看这个事情是如何的简单。

1. 编辑网页的 52 行,将原来的段落修改为如下的内容,注意链接上使用了 btn 和 btn-default 的类。

在以前的版本中,仅仅使用 btn 的类就可以成为一个普通的按钮了,在 3.0 下,还需要增加一个 btn-default。

<p><a class="btn btn-default" href="#">View details &raquo;</a></p>

2. class 中设置的 btn 和 btn-default 就是魔力所在!现在的按钮看起来如下所示:

Bootstrap 3 How-To #2 标题,链接与按钮

bootstrap 中预置了许多相关的类

颜色:

Bootstrap 3 How-To #2 标题,链接与按钮

<!-- Standard gray button with gradient -->
<button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

按钮的尺寸

Bootstrap 3 How-To #2 标题,链接与按钮

<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

你还可以在在线文档中找到这些说明:http://getbootstrap.com/css/#buttons

工作原理

如前所述,bootstrap 提供了大量便利的样式来处理大多数常用的场景,包括需要你可能都没有想到过的场景,如果你还没有认真地看过 bootstrap 的在线文档,那就赶快看一看吧。

另外,最好的学习办法是打开 bootstrap.css 文件,认真阅读。沏上一杯茶,从杂务中脱出身来,研究其中的内容,你会更加熟悉 bootstrap 的工作原理。

扩展

在准备好之后,你还可以定制你自己的主题,bootstrap 提供了很棒的定制页面: http://getbootstrap.com/customize/,在这里你可以定制许多的内容。