【Bootstrap】007-全局样式：按钮
一、可作为按钮使用的标签或元素
1、说明
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式；
2、演示
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit"></body>
</html>
运行结果：
二、预定义样式
1、说明
使用下面列出的类可以快速创建一个带有预定义样式的按钮；
2、演示
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><!-- Standard button --><button type="button" class="btn btn-default">（默认样式）Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">（首选项）Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">（成功）Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">（一般信息）Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">（警告）Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">（危险）Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">（链接）Link</button></body>
</html>
运行结果：
三、尺寸
1、说明
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮；
2、演示
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><p><button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button><button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button></p><p><button type="button" class="btn btn-primary">（默认尺寸）Default button</button><button type="button" class="btn btn-default">（默认尺寸）Default button</button></p><p><button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button><button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button></p><p><button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button><button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button></p></body>
</html>
运行结果：
3、附加
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素；
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button><button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button></body>
</html>
运行结果：
四、激活状态
1、说明
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态；
2、button 元素
由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类；
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><button type="button" class="btn btn-primary btn-lg active">Primary button</button><button type="button" class="btn btn-default btn-lg active">Button</button></body>
</html>
运行结果：
3、链接（<a>）元素
可以为基于 <a> 元素创建的按钮添加 .active 类；
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg active" role="button">Link</a></body>
</html>
运行结果：
五、禁用状态
1、说明
通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果；
2、button 元素
为 <button> 元素添加 disabled 属性，使其表现出禁用状态；
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button></body>
</html>
运行结果：
3、链接（<a>）元素
为基于 <a> 元素创建的按钮添加 .disabled 类；
代码演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title></title><!-- 引入bootstrap --><link rel="stylesheet" href="../css/bootstrap.min.css" /></head><body><a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a></body>
</html>
运行结果：
我们把 .disabled 作为工具类使用，就像 .active 类一样，因此不需要增加前缀；
【Bootstrap】007-全局样式：按钮相关推荐
- Bootstrap的全局css样式部分
Bootstrap的栅格系统: 1. 为了合适的排列与内补,行(row)写在.container或者.container-fluid中: 在手机上(超小屏幕<768px):总是水平排列的, .c ...
- Bootstrap框架使用（安装，全局样式，组件，插件）
简介 中文官网:www.bootcss.com 1.响应式框架 2.HTML5文档类型 3.移动设备优先:必须设置viewport Bootstrap框架使用 BT使用安装 1.安装:1.下载引入:生 ...
- 根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章 第二节 bootstrap前端开发框架以按钮为例（引用网站上已经设置的布局和样式）
咱们大部分围绕着两个问题来叙述 是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
- Bootstrap之表格，按钮，表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式 本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
- 从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
- element ui 设置全局样式不起作用
今天在写springboot+vue项目的时候出现这样一个问题,我想给所有的按钮添加一个样式,在全局样式表中添加了font-size:13px;但是不起作用,只有单独加到按钮上才起作用,于是到百度上查 ...
- Flutter全局悬浮按钮
方法一 Offset _offset = Offset.zero;Scaffold(body: Stack(children: [_pageList[_currentIndex],Positioned ...
- BootStrap 组件和样式
BootStrap 简介 概念: 课程目标: 响应式布局技术 了解BootStrap前端框架 二.BootStrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优 ...
- Bootstrap3 全局样式
Bootstrap 3 的目标是简洁.直观.强悍的前端开发框架,让 Web 开发变得更好.更快.更强壮,我们有必要先了解一下 Bootstrap 底层结构的关键部分. HTML5文档类型 Bootst ...
- 【方法篇·壹】css开发技巧-全局样式设置和局部样式
目录 前言: 1.全局样式和局部样式设置 2.提升效率重要方法 3.提升效率重要方法-集中处理UI样式 4.提升效率重要方法-学会复制 5. 提升质量方法-flex.百分比.rem布局 6.解决疑难杂 ...
最新文章
- UML模型的基本概念（转）
- 局部特征(2)——Harris角点
- Spring事务的处理流程、传播属性、及部分释疑
- 完美解决Ubuntu16.04虚拟机窗口自适应问题
- 没毛病！00后和90后成为暑期出游两大主力群体
- android MemeoryFile和Parcel操作文件描述符fd
- LTE时域、频域资源
- 微分与导数之一，切线
- 【Hyperledger Fabric入门】(一) 快速运行一个简单的Fabric网络2
- 微信公众号查券返利机器人搭建教程
- 爬虫学习笔记--爬取静态网页
- 小程序中maring-top、maring-left、maring-right、maring-bottom失效/没有用的原因及解决方案
- Kali linux2020.4下载与安装教程（超级详细）
- Fortran文件操作-open
- Realtek PCIe GBE Family Controller（有线网卡）及Intel(R) Wi-Fi 6 AX201 160MHz（无线网卡）前出现出现黄色感叹号！解决方法。（win10）
- 1Mbps带宽到底能够达到什么效果，看看下面的介绍就懂了。
- c语言中使用的字符常量 其起止标记,C Primer Plus学习笔记（三）- 字符串和格式化输入/输出...
- Job Scheduling简介
- 蓝绿发布、红黑发布、灰度发布你都分得清吗
- C - The Fair Nut and String