BootStrap学習(2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

改变按钮大小

改变按钮状态

激活状态

禁用状态

按钮标签

ホームページ

ウェブフロントエンド

htmlチュートリアル

BootStrap学習(2)_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

使用Bootstrap添加代码框

　　可先看：简介、引入、包下载等：

Bootstrap 允许您以两种方式显示代码：

第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。

第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： <（代表“<”） 和 >(代表">")。

让我们来看看下面的实例：

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;   &lt;title&gt;Bootstrap 实例 - 代码&lt;/title&gt;   &lt;link href=&quot;http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;   &lt;script src=&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;&gt;&lt;/script&gt;   &lt;script src=&quot;http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;&lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; 作为内联元素被包围。&lt;/p&gt;&lt;p&gt;如果需要把代码显示为一个独立的块元素，请使用 &amp;lt;pre&amp;gt; 标签：&lt;/p&gt;&lt;pre&gt;   &amp;lt;article&amp;gt;      &amp;lt;h1&amp;gt;Article Heading&amp;lt;/h1&amp;gt;   &amp;lt;/article&amp;gt;&lt;/pre&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

结果：

Bootstrap 按钮的使用

　　任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

　　以下样式可用于<a>, <button>, 或 <input> 元素上：

类描述

.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：

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;!-- 设置html中能显示中文  --&gt;    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;   &lt;title&gt;Bootstrap 实例 - 按钮选项&lt;/title&gt;   &lt;link rel=&quot;stylesheet&quot; href=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css&quot;&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;!-- 标准的按钮 --&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;默认按钮&lt;/button&gt;&lt;!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;原始按钮&lt;/button&gt;&lt;!-- 表示一个成功的或积极的动作 --&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;成功按钮&lt;/button&gt;&lt;!-- 信息警告消息的上下文按钮 --&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;信息按钮&lt;/button&gt;&lt;!-- 表示应谨慎采取的动作 --&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;警告按钮&lt;/button&gt;&lt;!-- 表示一个危险的或潜在的负面动作 --&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;危险按钮&lt;/button&gt;&lt;!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 --&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;链接按钮&lt;/button&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

结果如下图所示：

改变按钮大小

下表列出了获得各种大小按钮的 class：

Class 描述

.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

下面的实例演示了上面所有的按钮 class：

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;!-- 设置html中能显示中文  --&gt;    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;   &lt;title&gt;Bootstrap 实例 - 按钮大小&lt;/title&gt;   &lt;link rel=&quot;stylesheet&quot; href=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css&quot;&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;      大的原始按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg&quot;&gt;      大的按钮   &lt;/button&gt;&lt;/p&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;      默认大小的原始按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;      默认大小的按钮   &lt;/button&gt;&lt;/p&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;      小的原始按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-sm&quot;&gt;      小的按钮   &lt;/button&gt;&lt;/p&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-xs&quot;&gt;      特别小的原始按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-xs&quot;&gt;      特别小的按钮   &lt;/button&gt;&lt;/p&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg btn-block&quot;&gt;      块级的原始按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg btn-block&quot;&gt;      块级的按钮   &lt;/button&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

结果如下图所示：

改变按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

元素 Class

按钮元素	添加 .active class 来显示它是激活的。
锚元素	添加 .active class 到 <a> 按钮来显示它是激活的。

下面的实例演示了这点：

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;!-- 设置html中能显示中文  --&gt;    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;   &lt;title&gt;Bootstrap 实例 - 按钮激活状态&lt;/title&gt;   &lt;link rel=&quot;stylesheet&quot; href=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css&quot;&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg &quot;&gt;      默认按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg active&quot;&gt;      激活按钮   &lt;/button&gt;&lt;/p&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg &quot;&gt;      原始按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg active&quot;&gt;      激活的原始按钮   &lt;/button&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

显示如下图所示：

禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

元素 Class

按钮元素	添加 disabled 属性到 <button> 按钮。
锚元素	添加 disabled class 到 <a> 按钮。注意：该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

下面的实例演示了这点：

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;!-- 设置html中能显示中文  --&gt;    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;   &lt;title&gt;Bootstrap 实例 - 按钮禁用状态&lt;/title&gt;   &lt;link rel=&quot;stylesheet&quot; href=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css&quot;&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg&quot;&gt;      默认按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-lg&quot; disabled=&quot;disabled&quot;&gt;      禁用按钮   &lt;/button&gt;&lt;/p&gt;&lt;p&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg &quot;&gt;      原始按钮   &lt;/button&gt;   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot; disabled=&quot;disabled&quot;&gt;      禁用的原始按钮   &lt;/button&gt;&lt;/p&gt;&lt;p&gt;   &lt;a href=&quot;#&quot; class=&quot;btn btn-default btn-lg&quot; role=&quot;button&quot;&gt;      链接   &lt;/a&gt;   &lt;a href=&quot;#&quot; class=&quot;btn btn-default btn-lg disabled&quot; role=&quot;button&quot;&gt;      禁用链接   &lt;/a&gt;&lt;/p&gt;&lt;p&gt;   &lt;a href=&quot;#&quot; class=&quot;btn btn-primary btn-lg&quot; role=&quot;button&quot;&gt;      原始链接   &lt;/a&gt;   &lt;a href=&quot;#&quot; class=&quot;btn btn-primary btn-lg disabled&quot; role=&quot;button&quot;&gt;      禁用的原始链接   &lt;/a&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

显示结果如下：

按钮标签

您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。

下面的实例演示了这点：

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;!-- 设置html中能显示中文  --&gt;    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;   &lt;title&gt;Bootstrap 实例 - 按钮标签&lt;/title&gt;   &lt;link rel=&quot;stylesheet&quot; href=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css&quot;&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;   &lt;script src=&quot;http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;链接&lt;/a&gt;&lt;button class=&quot;btn btn-default&quot; type=&quot;submit&quot;&gt;按钮&lt;/button&gt;&lt;input class=&quot;btn btn-default&quot; type=&quot;button&quot; value=&quot;输入&quot;&gt;&lt;input class=&quot;btn btn-default&quot; type=&quot;submit&quot; value=&quot;提交&quot;&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

显示结果如下：

　　致谢：感谢您的阅读！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。