首页
所有分类
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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
js倒计时简单实现方法
Dec 17 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
JavaScript实现简单日历效果
Sep 11 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
SSH(3) OVERLORD(1) mysql(6) character(1) 数据表(1) data(4) 神经网络(7) Vscode(3) 字符集(1) 2022年7月新番(1)
You might like
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
动态加载iframe
2006/06/16 Javascript
双击滚屏-常用推荐
2006/11/29 Javascript
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
vue-router路由懒加载的实现（解决vue项目首次加载慢）
2018/08/28 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
ptyhon实现sitemap生成示例
2014/03/30 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
美国最大的骑马用品零售商：HorseLoverZ
2017/01/12 全球购物
英国探险旅游专家：Explore
2018/12/20 全球购物
绿色环保口号
2014/06/12 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
幼儿园教师自荐书
2015/03/06 职场文书