首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本样式学习笔记之按钮(4)

Posted in Javascript onDecember 07, 2016

Bootstrap中任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观，再结合一些选项，可以定义各种按钮样式。

0x01 按钮样式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>按钮</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>基本按钮</h1>
 </div>
 <p>
 <a href="#" class="btn btn-default">Default</a>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <a href="#" class="btn btn-info">Info</a>
 <a href="#" class="btn btn-warning">Warning</a>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">Link</button>
 </p>
</div>
</body>
</html>

效果如下：

Bootstrap基本样式学习笔记之按钮(4)

0x02 调节按钮大小

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>调节按钮大小</title>
</head>
<body>
 <div class="container">
 <div class="page-header">
 <h1>调节按钮的大小</h1>
 </div>
 <h3>大号按钮</h3>
 <p>
 <a href="#" class="btn btn-lg btn-default">Default</a>
 <button type="button" class="btn btn-lg btn-primary">Primary</button>
 <button type="button" class="btn btn-lg btn-success">Success</button>
 <a href="#" class="btn btn-lg btn-info">Info</a>
 <a href="#" class="btn btn-lg btn-warning">Warning</a>
 <button type="button" class="btn btn-lg btn-danger">Danger</button>
 <button type="button" class="btn btn-lg btn-link">Link</button>
 </p>
 <h3>默认大小</h3>
 <p>
 <a href="#" class="btn btn-default">Default</a>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <a href="#" class="btn btn-info">Info</a>
 <a href="#" class="btn btn-warning">Warning</a>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">Link</button>
 </p>
 <h3>小号按钮</h3>
 <p>
 <a href="#" class="btn btn-sm btn-default">Default</a>
 <button type="button" class="btn btn-sm btn-primary">Primary</button>
 <button type="button" class="btn btn-sm btn-success">Success</button>
 <a href="#" class="btn btn-sm btn-info">Info</a>
 <a href="#" class="btn btn-sm btn-warning">Warning</a>
 <button type="button" class="btn btn-sm btn-danger">Danger</button>
 <button type="button" class="btn btn-sm btn-link">Link</button>
 </p>
 <h3>微型按钮</h3>
 <p>
 <a href="#" class="btn btn-xs btn-default">Default</a>
 <button type="button" class="btn btn-xs btn-primary">Primary</button>
 <button type="button" class="btn btn-xs btn-success">Success</button>
 <a href="#" class="btn btn-xs btn-info">Info</a>
 <a href="#" class="btn btn-xs btn-warning">Warning</a>
 <button type="button" class="btn btn-xs btn-danger">Danger</button>
 <button type="button" class="btn btn-xs btn-link">Link</button>
 </p>
 </div>
</body>
</html>

效果如下：

Bootstrap基本样式学习笔记之按钮(4)

0x03 其他按钮

移动端一个按钮占用一行按钮，可以利用.btn-block类来实现块状按钮。Bootsrap通过将announce背景色设置为50%褪色的方式来呈现无法点击的效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>其他按钮</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>其他按钮</h1>
 </div>
 <div>
 <p>
 <button type="button" class="btn btn-block btn-success">Block</button>
 </p>
 <p>
 <button type="button" class="btn btn-lg btn-default" disabled="disabled">不可用按钮1</button>
 <a href="#" class="btn btn-lg btn-info disabled">不可用按钮2</a>
 </p>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本样式学习笔记之按钮(4)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本样式学习笔记之按钮(4)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
js使用递归解析xml
Dec 12 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
javascript简易画板开发
Apr 12 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
jQuery中get方法用法分析
Dec 07 #Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 #Javascript
jQuery删除当前节点元素
Dec 07 #Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 #Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 #Javascript
浅析js的模块化编写 require.js
Dec 07 #Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 #Javascript
FTP(9) 3389(1) DHCP(2) IIS(7) 远程登录(2) Windows server 2008(5) 域控制器(1) 防火墙(2) Windows server 2019(5) 远程控制(1)
You might like
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
javascript document.images实例
2008/05/27 Javascript
Cookie 小记
2010/04/01 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python3 对list中每个元素进行处理的方法
2018/06/29 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
加拿大时尚潮流大码女装购物网站：Addition Elle
2018/04/02 全球购物
巴西网上药店：Drogaria Araujo
2021/01/06 全球购物
荷兰浴室和卫浴网上商店：Badkamerxxl.nl
2020/10/06 全球购物
线程同步的方法
2016/11/23 面试题
人力资源部门的主要职能
2014/02/22 职场文书
护士感人事迹
2014/05/01 职场文书
公司运动会策划方案
2014/05/25 职场文书
相亲大会策划方案
2014/06/05 职场文书
导游词之临安白水涧
2019/11/05 职场文书