首页
所有分类
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 this关键字使用分析
Oct 21 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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
jenkins(1) ipv6(1) PV(1) 线程(1) 访问日志(2) 逆序(1) 进程假死(1) 弱口令(1) 连接数(1) UV(1)
You might like
php可生成缩略图的文件上传类实例
2014/12/17 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
用nodejs访问ActiveX对象，以操作Access数据库为例。
2011/12/15 NodeJs
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery功能函数详解
2015/02/01 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Expedia意大利旅游网站：酒店、机票和租车预订
2017/10/30 全球购物
英国自行车商店：AW Cycles
2021/02/24 全球购物
带薪年假请假条
2014/02/04 职场文书
同志主要表现材料
2014/08/21 职场文书
丽江古城导游词
2015/02/03 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
婚育证明样本
2015/06/16 职场文书
职工宿舍管理制度
2015/08/05 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android