详解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获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue实现购物车小案例
2019/09/27 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python-split()函数实例用法讲解
2020/12/18 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
中科创达面试题
2016/12/28 面试题
后勤工作职责
2013/12/22 职场文书
校园之声广播稿
2014/01/31 职场文书
《开国大典》教学反思
2014/04/19 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Python机器学习之逻辑回归
2021/05/11 Python
python基础之函数的定义和调用
2021/10/24 Python
python Tkinter模块使用方法详解
2022/04/07 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android