如何使用Bootstrap 按钮实例详解


Posted in Javascript onMarch 29, 2017

Bootstrap 按钮

本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

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

如何使用Bootstrap 按钮实例详解

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

<!-- 标准的按钮 -->
<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>

效果

如何使用Bootstrap 按钮实例详解

按钮大小

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

如何使用Bootstrap 按钮实例详解

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

效果

如何使用Bootstrap 按钮实例详解

按钮状态

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

激活状态

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

如何使用Bootstrap 按钮实例详解

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

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

如何使用Bootstrap 按钮实例详解

禁用状态

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

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

如何使用Bootstrap 按钮实例详解 

下面的实例演示了这点:

<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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg" role="button">链接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg" role="button">原始链接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p>

效果

如何使用Bootstrap 按钮实例详解

按钮标签

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

下面的实例演示了这点:

<a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="提交">

以上所述是小编给大家介绍的使用Bootstrap 按钮实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
vue双向绑定简要分析
Mar 23 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 #Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 #Javascript
You might like
用PHP连接Oracle数据库
2006/10/09 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
python实现自动更换ip的方法
2015/05/05 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
python中的itertools的使用详解
2020/01/13 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
部队领导证婚词
2014/01/12 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
医学生自我评价
2014/01/27 职场文书
政审证明材料
2015/06/19 职场文书