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

fckeditor 获取文本框值的实现代码

Feb 09 Javascript

ExtJS 2.0实用简明教程之ExtJS版的Hello

Apr 29 Javascript

基于jQuery试卷自动排版系统

Jul 18 Javascript

网站内容禁止复制和粘贴、另存为的js代码

Feb 26 Javascript

jquery查找tr td 示例模拟

May 08 Javascript

使用jquery解析XML的方法

Sep 05 Javascript

js实现超简单的展开、折叠目录代码

Aug 28 Javascript

基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

Jan 05 Javascript

JS判断字符串变量是否含有某个字串的实现方法

Jun 03 Javascript

微信小程序中顶部导航栏的实现代码

Mar 30 Javascript

Vue入门之animate过渡动画效果

Apr 08 Javascript

js实现幻灯片轮播图

Aug 14 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

总集篇&特番节目先行播出！《SAO Alicization War of Underworld》第2季度TV动画4月25日放送！

2020/03/06 日漫

PHP生成图片验证码、点击切换实例

2014/06/25 PHP

PHP面向对象五大原则之接口隔离原则(ISP)详解

2018/04/04 PHP

JavaScript 事件冒泡简介及应用

2010/01/11 Javascript

基于jquery的文章中所有图片width大小批量设置方法

2013/08/01 Javascript

Jquery给基本控件的取值、赋值示例

2014/05/23 Javascript

JavaScript中跨域调用Flash的方法

2014/08/11 Javascript

纯Javascript实现ping功能的方法

2015/03/20 Javascript

javascript实现图片延迟加载方法汇总(三种方法)

2015/08/27 Javascript

JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）

2016/02/16 Javascript

jquery Deferred 快速解决异步回调的问题

2016/04/05 Javascript

node.js连接mongoDB数据库快速搭建自己的web服务

2016/04/17 Javascript

Javascript中数组去重与拍平的方法示例

2017/02/03 Javascript

微信小程序中页面FOR循环和嵌套循环

2017/06/21 Javascript

总结js函数相关知识点

2018/02/27 Javascript

webuploader分片上传的实现代码（前后端分离）

2018/09/10 Javascript

详解React 服务端渲染方案完美的解决方案

2018/12/14 Javascript

JavaScript设计模式之策略模式实现原理详解

2020/05/29 Javascript

react-intl实现React国际化多语言的方法

2020/09/27 Javascript

python网络编程实例简析

2014/09/26 Python

python使用BeautifulSoup分析网页信息的方法

2015/04/04 Python

Python Numpy 数组的初始化和基本操作

2018/03/13 Python

python 用正则表达式筛选文本信息的实例

2018/06/05 Python

Python 判断文件或目录是否存在的实例代码

2018/07/19 Python

10 行Python 代码实现 AI 目标检测技术【推荐】

2019/06/14 Python

python 用所有标点符号分隔句子的示例

2019/07/15 Python

python网络爬虫 CrawlSpider使用详解

2019/09/27 Python

Python Socket TCP双端聊天功能实现过程详解

2020/06/15 Python

css3中background新增的4个新的相关属性用法介绍

2013/09/26 HTML / CSS

法国美发器材和产品购物网站：Beauty Coiffure

2016/12/05 全球购物

如何从一个文件档案的尾端新增记录

2016/12/02 面试题

公司合作协议范文

2014/10/01 职场文书

七一活动主持词

2015/06/29 职场文书

2015秋季开学典礼新闻稿

2015/07/17 职场文书

Python中request的基本使用解决乱码问题

2022/04/12 Python

mysql中关键词exists的用法实例详解

2022/06/10 MySQL