编程 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 相关文章推荐

js动态加载以及确定加载完成的代码

Jul 31 Javascript

JQuery 返回布尔值Is()条件判断方法代码

May 14 Javascript

jQuery Tools Dateinput使用介绍

Jul 14 Javascript

iframe的父子窗口之间的对象相互调用基本用法

Sep 03 Javascript

CSS+jQuery实现的一个放大缩小动画效果

Sep 24 Javascript

jquerydom对象的事件隐藏显示和对象数组示例

Dec 10 Javascript

JavaScript获取Url里的参数

Dec 18 Javascript

js使用DOM设置单选按钮、复选框及下拉菜单的方法

Jan 20 Javascript

JavaScript中的Math.SQRT1_2属性使用简介

Jun 14 Javascript

Javascript获取background属性中url的值

Oct 17 Javascript

vue弹窗消息组件的使用方法

Sep 24 Javascript

详解为什么Vue中的v-if和v-for不建议一起用

Jan 13 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

You might like

PHP4实际应用经验篇(7)

2006/10/09 PHP

PHP 日志缩略名的创建函数代码

2010/05/26 PHP

PHP 计算代码执行耗时的代码修正网上普遍错误

2011/05/14 PHP

Codeigniter生成Excel文档的简单方法

2014/06/12 PHP

php中header设置常见文件类型的content-type

2015/06/23 PHP

PHP实现时间比较和时间差计算的方法示例

2017/07/24 PHP

PHP7变量处理机制修改

2021/03/09 PHP

WebGame《逆转裁判》完整版代码下载(1月24日更新)

2007/01/29 Javascript

Jquery优化效率提升性能解决方案

2010/09/06 Javascript

javascript中创建对象的几种方法总结

2013/11/01 Javascript

ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

2014/08/30 Javascript

javascript实现动态导入js与css等静态资源文件的方法

2015/07/25 Javascript

jQuery插件学习教程之SlidesJs轮播+Validation验证

2016/07/12 Javascript

vue.js入门教程之基础语法小结

2016/09/01 Javascript

浅谈Web页面向后台提交数据的方式和选择

2016/09/23 Javascript

js仿手机页面文件下拉刷新效果

2016/10/14 Javascript

JavaScript实现图片瀑布流和底部刷新

2017/01/02 Javascript

jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】

2017/03/15 Javascript

详解react-router如何实现按需加载

2017/06/15 Javascript

VueJs组件之父子通讯的方式

2018/05/06 Javascript

javascript中floor使用方法总结

2019/02/02 Javascript

vue 关闭浏览器窗口的时候,清空localStorage的数据示例

2019/11/06 Javascript

[00:11]战神迅矛

2019/03/06 DOTA

django2 快速安装指南分享

2018/01/05 Python

使用tensorflow显示pb模型的所有网络结点方式

2020/01/23 Python

使用python客户端访问impala的操作方式

2020/03/28 Python

python如何使用腾讯云发送短信

2020/09/17 Python

喜诗官方在线巧克力店：See’s Candies

2017/01/01 全球购物

药剂学专业应届生自荐信

2013/09/29 职场文书

对标管理实施方案

2014/03/12 职场文书

毕业自我鉴定总结

2014/03/24 职场文书

电子商务求职信

2014/06/15 职场文书

老龙头导游词

2015/02/11 职场文书

结婚纪念日感言

2015/08/01 职场文书

2016年乡镇七一建党节活动总结

2016/04/05 职场文书

python 如何用terminal输入参数

2021/05/25 Python