详解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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
javascript TextArea动态显示剩余字符
Oct 22 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
详解vue父子组件状态同步的最佳方式
Sep 10 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
php5中类的学习
2008/03/28 PHP
PHP 面向对象详解
2012/09/13 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
C面试题
2015/10/08 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
大学生党课思想汇报
2013/12/29 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python