可先看：简介、引入、包下载等：
Bootstrap 允许您以两种方式显示代码：
第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。 第二种是标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用标签。请确保当您使用
和 标签时，开始和结束标签使用了 unicode 变体： <（代表“ 和 >(代表">") 。让我们来看看下面的实例：
Bootstrap 实例 - 代码<header> 作为内联元素被包围。
如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：
<article> <h1>Article Heading</h1> </article>结果：
Bootstrap 按钮的使用
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
以下样式 可用于, , 或 元素 上：
类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式（未被操作） .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning 表示需要谨慎操作的按钮 .btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为) .btn-lg 制作一个大按钮 .btn-sm 制作一个小按钮 .btn-xs 制作一个超小按钮 .btn-block 块级按钮(拉伸至父元素100%的宽度) .active 按钮被点击 .disabled 禁用按钮
下面的实例演示了上面所有的按钮 class：
Bootstrap 实例 - 按钮选项 默认按钮 原始按钮 成功按钮 信息按钮 警告按钮 危险按钮 链接按钮结果如下图所示：
改变按钮大小
下表列出了获得各种大小按钮的 class：
Class 描述 .btn-lg 这会让按钮看起来比较大。 .btn-sm 这会让按钮看起来比较小。 .btn-xs 这会让按钮看起来特别小。 .btn-block 这会创建块级的按钮，会横跨父元素的全部宽度。下面的实例演示了上面所有的按钮 class：
Bootstrap 实例 - 按钮大小大的原始按钮 大的按钮
默认大小的原始按钮 默认大小的按钮
小的原始按钮 小的按钮
特别小的原始按钮 特别小的按钮
块级的原始按钮 块级的按钮
结果如下图所示：
改变按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。
激活状态
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
下表列出了让按钮元素和锚元素呈激活状态的 class：
元素 Class 按钮元素 添加 .active class 来显示它是激活的。 锚元素 添加 .active class 到 按钮来显示它是激活的。下面的实例演示了这点：
Bootstrap 实例 - 按钮激活状态默认按钮 激活按钮
原始按钮 激活的原始按钮
显示如下图所示：
禁用状态
当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。
下表列出了让按钮元素和锚元素呈禁用状态的 class：
元素 Class 按钮元素 添加 disabled 属性 到 按钮。 锚元素 添加 disabled class 到 按钮。
注意：该 class 只会改变 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。下面的实例演示了这点：
Bootstrap 实例 - 按钮禁用状态默认按钮 禁用按钮
原始按钮 禁用的原始按钮
链接 禁用链接
原始链接 禁用的原始链接
显示结果如下：
按钮标签
您可以在 、 或 元素上使用按钮 class。但是建议您在 元素上使用按钮 class，避免跨浏览器的不一致性问题。
下面的实例演示了这点：
Bootstrap 实例 - 按钮标签 链接 按钮显示结果如下：
致谢：感谢您的阅读！
查看更多关于BootStrap学习（2）_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109712