如何使用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 相关文章推荐
range 标准化之获取
Aug 28 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
RequireJS用法简单示例
Aug 20 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
原生js实现滑块区间组件
Jan 20 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
Zend引擎的发展 [15]
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python写的一个简单监控系统
2015/06/19 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
PyCharm代码格式调整方法
2018/05/23 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python实现电子产品商店
2019/02/26 Python
Django之路由层的实现
2019/09/09 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
英语演讲稿范文
2014/01/03 职场文书
学生安全教育材料
2014/02/14 职场文书
勤俭节约倡议书
2014/04/14 职场文书
新学期标语
2014/06/30 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js