详解Bootstrap按钮


Posted in Javascript onJanuary 04, 2016

描述

Bootstrap Button(按钮)JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条。

什么是必需的

您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。

如何使用它

您可以不编写任何 JavaScript 只通过标记使用该插件,也可以通过 JavaScript 启用按钮。

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 禁用按钮

首先看下不同颜色的按钮:

<html lang="en"> 
<head> 
  <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一,关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
</head> 
  <body style="padding: 20px;"> 
    <!-- 标准的按钮 --> 
    <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>

效果:

详解Bootstrap按钮

btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。

按钮大小

鉴于head部分都是相同的,只列出Body的内容。

<body style="padding: 20px;width:500px;"> 
  <!-- 标准的按钮 --> 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-lg btn-default">大的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-sm btn-primary">小的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button><br/><br/> 
  <button type="button" class="btn btn-block btn-info">块级信息按钮</button> 
</body>

效果如下所示:

详解Bootstrap按钮

按钮状态

按钮分为active和disabled两种状态、
激活状态:按钮呈现出被按压的外观,即背景颜色变深、深色边框和阴影。
禁用状态:按钮颜色会变淡 50%,并失去渐变

看具体的例子:

<body style="padding: 20px;width:500px;"> 
  <!-- 标准的按钮 --> 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-default active">激活的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-primary active">激活的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-success active">激活的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button> 
  <button type="button" class="btn btn-info active">激活的信息按钮</button> 
  <br/><br/> 
 
  <button type="button" class="btn btn-default">默认按钮</button> 
  <button type="button" class="btn btn-default disabled">禁用的默认按钮</button> 
  <br/><br/> 
  <!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --> 
  <button type="button" class="btn btn-primary">原始按钮</button> 
  <button type="button" class="btn btn-primary disabled">禁用的原始按钮</button> 
  <br/><br/> 
  <!-- 表示一个成功的或积极的动作 --> 
  <button type="button" class="btn btn-success">成功按钮</button> 
  <button type="button" class="btn btn-success disabled">禁用的成功按钮</button> 
  <br/><br/> 
  <!-- 用于要弹出信息的按钮 --> 
  <button type="button" class="btn btn-info">信息按钮</button> 
  <button type="button" class="btn btn-info disabled">禁用的信息按钮</button> 
</body>

详解Bootstrap按钮

按钮标签

a,input都可以表现的像一个按钮,但是避免跨浏览器不一致,最好使用Button标签。

<body style="padding: 20px;"> 
  <a class="btn btn-default" href="#" role="button">超链接按钮</a> 
  <button class="btn btn-default btn-primary" type="submit">button按钮</button> 
  <input class="btn btn-default btn-success" type="button" value="input按钮"> 
  <input class="btn btn-default btn-info" type="submit" value="submit按钮"> 
</body>

详解Bootstrap按钮

以上内容给大家介绍了Bootstrap按钮相关知识,希望大家喜欢。

Javascript 相关文章推荐
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
详解Bootstrap四种图片样式
Jan 04 #Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 #Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 #Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 #Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 #Javascript
jQuery自动完成插件completer附源码下载
Jan 04 #Javascript
You might like
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Python实现的归并排序算法示例
2017/11/21 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
详解Python if-elif-else知识点
2018/06/11 Python
python单例模式实例解析
2018/08/28 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
老师自我鉴定范文
2013/12/25 职场文书
教师辞职报告范文
2014/01/20 职场文书
采购主管岗位职责
2014/02/01 职场文书
物流专业求职信
2014/06/30 职场文书
工程索赔意向书
2014/08/30 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android