BootStrap按钮标签及基本样式
按钮标签
在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用<button>标签。
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--记录不同的标签使用bootstrap的btn类--> <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="提交"> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包括所有已编译的插件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
感觉link标签的不怎么明显，但是还是能够从边距上看出是一个button的，这里只是说明了怎样利用不同的标签来使用btnclass。
可以使用在以上标签的样式
基本样式
btn 为按钮添加基本的按钮样式，一般与下面的类联合只用，这样可以保证按钮大小和边距的统一。
颜色
btn-default默认的按钮样式，就是白底黑字灰框，要跟btn联合使用，下同
btn-primary 原始的按钮样式，蓝底白字
btn-success 成功的样式，绿底白字
btn-info表示点击后会弹出信息，淡蓝色底白字
btn-warning 表示需要谨慎操作的按钮，黄底白字
btn-danger表示危险的操作，红底白字
btn-link让按钮看起来像一个连接，仍然保持按钮的行为
大小
btn-lg 比普通的图标要大的大图标
btn-sm 小图标
btn-xs 超小图标
btn-block 块级按钮，拉伸至父元素100%的宽度
按钮这里并不能构成响应式分布，如果三个都写了，最后一个类会覆盖前面的样式。
状态
active 表示按钮被激活，按钮会比普通的按钮宽一些
disabled disabled属性和disabled类都能将按钮禁用，两者效果相同。对于link，用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式
<!--应用了disabled类的只是禁用了连接--> <a class="btn btn-danger disabled" role="button" href="#">应用disabled类</a> <!--使用了disabled属性则禁用了整个按钮--> <a class="btn btn-danger" role="button" disabled="disabled" href="#">应用disabled标签</a> <button class="btn btn-default btn-danger disabled" type="submit">按钮</button>
以上所述是小编给大家介绍的BootStrap按钮标签及基本样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
主要内容：加载状态,实例,单个切换,实例,复选框（Checkbox）,实例,单选按钮（Radio）,实例,用法,选项,方法,实例按钮（Button）在 Bootstrap 按钮 一章中介绍过。通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。 加载状态 如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，如下面实例所示： 实例 <button id=
-
主要内容：实例,按钮大小,实例,按钮状态,实例,实例,按钮标签,实例,按钮组,实例,实例,实例,自适应大小的按钮组,实例,实例,内嵌下拉菜单的按钮组,实例,实例本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于<a>, <button>, 或 <input> 元素上： 类 描述 实例 .btn 为按钮添加基本样式 尝试一下 .btn-
-
本文向大家介绍基于Bootstrap的标签页组件及bootstrap-tab使用说明，包括了基于Bootstrap的标签页组件及bootstrap-tab使用说明的使用技巧和注意事项，需要的朋友参考一下 bootstrap-tab bootstrap-tab组件是对原生的bootstrap-tab组件的封装，方便开发者更方便地使用，主要包含以下功能： tab页初始化 关闭tab页 新增tab 显示
-
在本章中，您将了解各种类型的基本JSF标记。 JSF提供标准的HTML标记库。 这些标记将呈现为相应的html输出。 对于这些标记，您需要在html节点中使用以下URI名称空间。 <html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://java.sun.com/jsf/html" > 以下是JSF 2.0中重
-
标题标签 任何文档都以标题开头。 您可以为标题使用不同的大小。 HTML还有六个级别的标题，使用元素《h1》, 《h2》, 《h3》, 《h4》, 《h5》,和《h6》 。 在显示任何标题时，浏览器在该标题之前添加一行，在该标题之后添加一行。 例子 (Example) <!DOCTYPE html> <html> <head> <title>Heading Example</ti
-
本文向大家介绍Bootstrap基本插件学习笔记之按钮(21)，包括了Bootstrap基本插件学习笔记之按钮(21)的使用技巧和注意事项，需要的朋友参考一下 前面已经介绍过Button的使用。通过button按钮，我们还能实现一些诸如按钮状态控制等形式的交互。 0x01 加载状态 添加data-loading-text=”Loading…”属性： 效果如下： loading状态持续1s后，将会执