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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
小程序实现列表删除功能
Oct 30 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
PHP中SESSION过期设置
2021/03/09 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
ES6的新特性概览
2016/03/10 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python threading模块操作多线程介绍
2015/04/08 Python
简单实现python进度条脚本
2017/12/18 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python @property使用方法解析
2019/09/17 Python
实用的简历自我评价
2014/03/06 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书