首页
所有分类
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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
详解vue高级特性
Jun 09 Javascript
vue3.0自定义指令（drectives)知识点总结
Dec 27 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
Delphi面试题(13) 创业计划书(312) 职业生涯规划书(234) 自我评价(886) 岗位职责(1324) 自荐信(981) SOA面试题(9) 自我鉴定(671) 求职信(1029) 推荐信(292)
You might like
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
php二维码生成
2015/10/19 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
AngularJS入门之动画
2016/07/27 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
canvas绘制万花筒效果（代码分享）
2017/01/20 Javascript
微信小程序上传图片功能（附后端代码）
2020/06/19 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python中lambda()的用法
2017/11/16 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
vscode调试django项目的方法
2020/08/06 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
诚信考试承诺书范文
2015/04/29 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书