首页
所有分类
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实现动态增加文件域表单
Feb 12 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
JS中递归函数
Jun 17 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
Vue+Flask实现图片传输功能
Apr 01 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) 火星(2) 酶(1) 人造肉(1) 毅力号(1) NASA(1) 国际空间站(1) 天问一号(1) 太空(1) 美国航天局(1)
You might like
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
canvas 弹幕效果（实例分享）
2017/01/11 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
JS实现简单日历特效
2020/01/03 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
一文读懂vue动态属性数据绑定（v-bind指令）
2020/07/20 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python求质数的3种方法
2018/09/28 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
django实现日志按日期分割
2020/05/21 Python
python 模块导入问题汇总
2021/02/01 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
西班牙著名的珠宝首饰品牌：P D PAOLA
2018/09/15 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
党小组考察意见
2015/06/02 职场文书
党员公开承诺书2016
2016/03/24 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Python创建SQL数据库流程逐步讲解
2022/09/23 Python