Bootstrap 按钮（实例）

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

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

<pre class="prettyprint tryit"><!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 按钮选项</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button><!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button><!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button><!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button><!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button><!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button><!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button></body>
</html>

按钮大小

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

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

<pre class="prettyprint tryit"><!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 按钮大小</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><p><button type="button" class="btn btn-primary btn-lg">大的原始按钮</button><button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p><button type="button" class="btn btn-primary">默认大小的原始按钮</button><button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-sm">小的原始按钮</button><button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button><button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button><button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p></body>
</html>

按钮状态

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

激活状态

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

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

下面的实例演示了这点：

<pre class="prettyprint tryit"><!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 按钮激活状态</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><p><button type="button" class="btn btn-default btn-lg ">默认按钮</button><button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-lg ">原始按钮</button><button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p></body>
</html>

禁用状态

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

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

下面的实例演示了这点：

<pre class="prettyprint tryit"><!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 按钮禁用状态</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><p><button type="button" class="btn btn-default btn-lg">默认按钮</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-lg ">原始按钮</button><button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p><a href="#" class="btn btn-default btn-lg" role="button">链接</a><a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p><a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a><a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p></body>
</html>

按钮标签

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

下面的实例演示了这点：

<pre class="prettyprint tryit"><!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 按钮标签</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交"></body>
</html>

Bootstrap 按钮（实例）相关推荐

Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. ...
WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单分割的按钮下拉菜单按钮下拉菜单的大小按钮上拉菜单 Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
bootstrap 按钮颜色属性
bootstrap 按钮颜色属性有几种转载于:https://www.cnblogs.com/HUIWANG/p/11027889.html
Bootstrap 按钮状态提示
按钮 Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件. Bootstrap ...
Bootstrap 按钮菜单的尺寸
定义按钮菜单时,只需为按钮提供表示尺寸的类 .btn-large..btn-small 或 .btn-mini,就可以制作不同尺寸的按钮.如图 4‑14所示: 图4-14 Bootstrap按钮菜单的 ...
Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap 按钮的外观
Bootstrap提供了 .btn 类,用来定义默认的按钮效果.默认按钮是灰色背景,并带有圆角.可以为页面上的任何元素(如,<a>.<button>.<input> ...
android 方形按钮代码,Android中实现图文并茂的按钮实例代码
效果图如下所示: 代码: android:orientation="horizontal" android:layout_width="match_parent" ...
Bootstrap 按钮
基本按钮通过将button标签中的class设置为对应的类,可以将button设置为不同的css格式,首先设置类为btn,不设置情况下为默认的html按钮格式,设置后变为bootstrap的基本按钮 ...
Bootstrap按钮样式
Bootstrap按钮样式 1.新建一个web项目ch07. 2.在ch07中新建一个demo01.html,将css文件模版导入进来. 3.将移动设备优先拷贝到demo01的头文件中. <me ...

Bootstrap 按钮（实例）

按钮大小

按钮状态

激活状态

禁用状态

按钮标签

Bootstrap 按钮（实例）相关推荐

最新文章

热门文章

Bootstrap 按钮（实例 ）

按钮大小

按钮状态

激活状态

禁用状态

按钮标签

Bootstrap 按钮（实例 ）相关推荐

最新文章

热门文章

Bootstrap 按钮（实例）

Bootstrap 按钮（实例）相关推荐