首页
所有分类
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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
JavaScript中的高级函数
Jan 04 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 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
生命周期(1) Python(3) 鲲鹏(1) Flask(2) 信号同步(1) reduce()(1) 进度条(1) springCloud(6) 裁剪图片(1) 死锁(3)
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
php 生成短网址原理及代码
2014/01/23 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
孝敬父母的活动方案
2014/08/28 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
教师个人事迹材料
2014/12/17 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
公务员考察材料范文
2014/12/23 职场文书
公司老总年会致辞
2015/07/30 职场文书
如何理解及使用Python闭包
2021/06/01 Python
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS