详解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实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
js字符串操作方法实例分析
May 06 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
python数据结构之二叉树的建立实例
2014/04/29 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python3让print输出不换行的方法
2020/08/24 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
个人工作表现评语
2014/04/30 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS