详解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 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
详解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将数据导入到Foxmail
2006/10/09 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
先进个人事迹材料
2014/01/25 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
验房委托书
2014/08/30 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014年生产部工作总结
2014/12/17 职场文书
小学生读书笔记范文
2015/06/30 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
教师培训学习心得体会
2016/01/21 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL