首页
所有分类
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 字符串连接性能优化
Dec 20 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
JavaScript Title、alt提示（Tips）实现源码解读
Dec 12 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
Vue实现菜单切换功能
Nov 08 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
Anaconda(2) html标准库(1) dll(1) ctypes(1) python-pcl(1) 经纬度(1) 遍历文件夹(1) 历史记录(1) 间隙锁(2) C/C++(1)
You might like
php中Socket创建与监听实现方法
2015/01/05 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
详解.vue文件中监听input输入事件（oninput）
2017/09/19 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python多层装饰器用法实例分析
2018/02/09 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Paradigit比利时电脑卖场：购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
美国新兴城市生活方式零售商：VILLA
2017/12/06 全球购物
北美最大的手工艺品零售商之一：Michaels Stores
2019/02/27 全球购物
英国最大的户外商店：Go Outdoors
2019/04/17 全球购物
Europcar意大利：汽车租赁
2019/07/07 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
幼儿园家长评语
2014/02/10 职场文书
建筑节能汇报材料
2014/08/22 职场文书
见习报告格式范文
2014/11/08 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
Python开发五子棋小游戏
2022/05/02 Python