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

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

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

开始

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

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

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

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

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

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 中预置了许多相关的类

颜色:

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

按钮的尺寸

<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/,在这里你可以定制许多的内容。

Bootstrap 3 How-To #2 标题,链接与按钮的更多相关文章

  1. Bootstrap <基础二十三>页面标题(Page Header)

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  2. 在 Students 的 Index 页面增加列标题链接(排序),分页,过滤和分组功能

    3-1  在 Students 的 Index 页面增加列标题链接 为 Index 页面增加排序的功能,我们需要修改 Student 控制器的 Index 方法,还需要为 Student 视图增加代码 ...

  3. Bootstrap历练实例:链接样式按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. (java)selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出

    selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以 ...

  5. WPS二级标题链接到一级标题

    WPS二级标题链接到一级标题,即2后出现2.1 2.2而不是1.3 1.4什么的 样式中的编号什么的都不用动,默认即可,关键在于这些多级标题是否选择了同一个编号方式 WPS中,只需要将它们的编号选择为 ...

  6. Bootstrap入门(十)组件4:按钮组与下拉菜单结合

    Bootstrap入门(十)组件4:按钮组与下拉菜单结合   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...

  7. Bootstrap入门(九)组件3:按钮组

    Bootstrap入门(九)组件3:按钮组   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link h ...

  8. Bootstrap历练实例:点击激活的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  9. bootstrap学习笔记<二>(标题,段落样式)

    标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...

随机推荐

  1. Crypto库实现PKCS7签名与签名验证

    在windows中,可以直接使用微软提供的crypto库实现PKCS7签名与签名验证.签名接口函数为CryptSignMessage,其接口定义为: BOOL WINAPI CryptSignMess ...

  2. 07socket编程

    TCP客户/服务器模型: 从图中就可以看出基本的过程来. 回射客户/服务器: 这个是回射的图示,客户端发给服务端,服务端在发回给客户端.   socket函数:   包含头文件<sys/sock ...

  3. CentOS 7.0系统安装配置图解教程

    转自:http://www.osyunwei.com/archives/7829.html 操作系统:CentOS 7.0 64位 IP地址:192.168.21.128 网关:192.168.21. ...

  4. php返回状态200或者300的写法

    header("HTTP/1.0 200 OK"); phpinfo(); header("HTTP/1.0 300 OK"); phpinfo();

  5. 【MySQL】insert批量插入优化方案

    对于一些数据量较大的系统,数据库面临的问题除了查询效率低下,还有就是数据入库时间长.特别像报表系统,每天花费在数据导入上的时间可能会长达几个小时或十几个小时之久.因此,优化数据库插入性能是很有意义的. ...

  6. 访问修饰符internal

    internal(C# 参考) internal 关键字是类型和类型的成员 访问修饰符. 只有在同一程序集的文件中,内部类型或成员才是可访问的,如下例所示: public class BaseClas ...

  7. [JS]深入理解JavaScript系列(4):立即调用的函数表达式

    转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...

  8. Going Home (hdu 1533 最小费用流)

    集训的图论都快结束了,我才看懂了最小费用流,惭愧啊. = = 但是今天机械键盘到了,有弄好了自行车,好高兴\(^o^)/~ 其实也不是看懂,就会套个模板而已.... 这题最重要的就是一个: 多组输入一 ...

  9. pythomn

    等我学号数据结构,明年就去找三胖 前端,写js相关代码.了解前端架构 而非页面设计 主要使用的是脚本语言 了解http web相关技术等 知道页面调优 浏览器加载方式等

  10. DB2 SQL性能调优秘笈

    SQL优化技巧 1.去除在谓词列上编写的任何标量函数 2.去除在谓词列上编写的任何数学运算 3.SQL语句的Select部分只写必要的列 4.尽可能不用Distinct 5.尽量将In子查询重写为Ex ...