首页
所有分类
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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
js仿360开机效果
Dec 26 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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
celery(1) SeaTable(1) Mysql8(2) 黑屏(2) OOP(1) 条形码(1) Three.js(1) Outlook(1) tree shaking(1) MutationObserver(1)
You might like
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
Laravel给生产环境添加监听事件（SQL日志监听）
2017/06/19 PHP
javascript编程起步（第六课）
2007/01/10 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
jQuery动态添加
2016/04/07 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
python isinstance函数用法详解
2020/02/13 Python
Python colormap库的安装和使用详情
2020/10/06 Python
animation和transition的区别
2020/10/12 HTML / CSS
Java如何格式化日期
2012/08/07 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
趣味活动策划方案
2014/02/08 职场文书
投资合作协议书范本
2014/04/17 职场文书
门面房租房协议书
2014/08/20 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
Nginx报404错误的详细解决方法
2022/07/23 Servers