首页
所有分类
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 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
浅析node.js中close事件
Nov 26 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 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
CPU(2) AE3805(1) 纸巾盒(1) 天梯图(1) 德生1994(1) 德生G88(1) 香港购物网站(84) ICF-F10(1) SLi Minor 2020(63) 爱尔兰购物网站(30)
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php 中文和编码判断代码
2010/05/16 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP学习笔记（一） 简单了解PHP
2014/08/04 PHP
PHP单链表的实现代码
2016/07/05 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
Python修改Excel数据的实例代码
2013/11/01 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python之时间和日期使用小结
2019/02/14 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Django权限设置及验证方式
2020/05/13 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Manuka Doctor美国官网：麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
美国领先的机场停车聚合商：Airport Parking Reservations
2020/02/28 全球购物
澳大利亚在线床零售商：Bedworks
2020/09/01 全球购物
数控技术专业推荐信
2013/11/01 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
浅谈如何写好演讲稿？
2019/06/12 职场文书
让人感觉高大上的讲话稿怎么写？
2019/07/08 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Python基础学习之奇异的GUI对话框
2021/05/27 Python