编程 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 Event学习第七章事件属性

Feb 07 Javascript

预加载css或javascript的js代码

Apr 23 Javascript

js获取select标签选中值的两种方式

Jan 09 Javascript

jquery库或JS文件在eclipse下报错问题解决方法

Apr 17 Javascript

jQuery表格排序组件-tablesorter使用示例

May 26 Javascript

JS基础随笔(菜鸟必看篇)

Jul 13 Javascript

详解vue跨组件通信的几种方法

Jun 15 Javascript

angularjs实现猜大小功能

Oct 23 Javascript

Vue v2.5 调整和更新不完全问题

Oct 24 Javascript

JS实现键值对遍历json数组功能示例

May 30 Javascript

electron-vue开发环境内存泄漏问题汇总

Oct 10 Javascript

JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

Jul 15 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

详解php实现页面静态化原理

2017/06/21 PHP

Laravel中如何轻松容易的输出完整的SQL语句

2020/07/26 PHP

JavaScript中void(0)的具体含义解释

2007/02/27 Javascript

文本框中,回车键触发事件的js代码[多浏览器兼容]

2010/06/07 Javascript

关于JavaScript定义类和对象的几种方式

2010/11/09 Javascript

js Form.elements[i]的使用实例

2011/11/13 Javascript

js改变Iframe中Src的方法

2015/05/05 Javascript

JavaScript实现基于十进制的四舍五入实例

2015/07/17 Javascript

JavaScript操作HTML元素和样式的方法详解

2015/10/21 Javascript

JS组件Bootstrap实现弹出框效果代码

2016/04/26 Javascript

json对象转为字符串,当做参数传递时加密解密的实现方法

2016/06/29 Javascript

同步文本框内容JS代码实现

2016/08/04 Javascript

全面解析node 表单的图片上传

2016/11/21 Javascript

angularJs使用$watch和$filter过滤器制作搜索筛选实例

2017/06/01 Javascript

jQuery实现简单的回到顶部totop功能示例

2017/10/16 jQuery

bootstrapTable+ajax加载数据 refresh更新数据

2018/08/31 Javascript

Windows下支持自动更新的Electron应用脚手架的方法

2018/12/24 Javascript

深入了解query和params的使用区别

2019/06/24 Javascript

js实现无缝轮播图

2020/03/09 Javascript

python：socket传输大文件示例

2017/01/18 Python

Python 专题四文件基础知识

2017/03/20 Python

Django 浅谈根据配置生成SQL语句的问题

2018/05/29 Python

python实现定时提取实时日志程序

2018/06/22 Python

python训练数据时打乱训练数据与标签的两种方法小结

2018/11/08 Python

python读取txt文件并取其某一列数据的示例

2019/02/19 Python

Python读取csv文件实例解析

2019/12/30 Python

不到20行实现Python代码即可制作精美证件照

2020/04/24 Python

法国综合购物网站：RueDuCommerce

2016/09/12 全球购物

白俄罗斯大卖场：21vek.by

2019/07/25 全球购物

Eclipse面试题

2014/03/22 面试题

EJB发布WEB服务一般步骤

2012/10/31 面试题

小组名称和口号

2014/06/09 职场文书

办护照工作证明

2014/10/01 职场文书

2015年小学生新年寄语

2014/12/08 职场文书

结婚仪式主持词

2015/06/29 职场文书

安装pytorch时报sslerror错误的解决方案

2021/05/17 Python