按钮

可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。

如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

预定义样式
快速创建一个带有预定义样式的按钮。

尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

激活状态

button 元素--由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

链接（<a>）元素--可以为基于 <a> 元素创建的按钮添加 .active 类。

禁用状态

button 元素--为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

链接（<a>）元素--为基于 <a> 元素创建的按钮添加 .disabled 类。

<div class="container"><a class="btn btn-default" href="#" role="button">a标签按钮</a><a class="btn btn-default" href="#">a标签按钮没role</a><button class="btn btn-default" type="button">按钮</button><input class="btn btn-default" type="submit" value="button"><br>预定义样式:<br><button type="button" class="btn btn-default">默认btn</button><button type="button" class="btn btn-primary">首选btn</button><button type="button" class="btn btn-success">成功btn</button><button type="button" class="btn btn-info">一般信息btn</button><button type="button" class="btn btn-warning">警告btn</button><button type="button" class="btn btn-danger">危险btn</button><br>尺寸：<br><button type="button" class="btn btn-default btn-lg">大按钮</button><button type="button" class="btn btn-default">默认按钮</button><button type="button" class="btn btn-default btn-sm">小按钮</button><button type="button" class="btn btn-default btn-xs">手机按钮</button><br>激活状态<br><button type="button" class="btn btn-default btn-block">块级元素</button><button type="button" class="btn btn-default btn-block active">激活状态</button><a class="btn btn-default active btn-block" role="button" href="#">上面的项目用a标签实现</a><br>禁用状态<br><button type="button" class="btn btn-default disabled">禁用状态(IE无效)</button><button type="button" class="btn btn-default" disabled>禁用状态2</button><button type="button" class="btn btn-default" disabled="disabled">禁用状态3</button><a class="btn btn-default disabled" role="button" href="#">禁用状态4(IE效果与火狐不同)</a></div>

图片

响应式图片
在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。

图片形状
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<div class="container"><img src="m.jpeg" alt="响应式图片." class="img-responsive"><img src="m.jpeg" alt="..." class=""><hr><img src="m.jpeg" alt="。。." class="img-rounded"><img src="m.jpeg" alt="IE10不支持." class="img-circle"><img src="m.jpeg" alt="。。." class="img-thumbnail">
</div>

http://pan.baidu.com/s/1qW1DoZy

辅助类

情境文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。

关闭按钮
通过使用一个象征关闭的图标，可以让模态框和警告框消失。

三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

快速浮动
通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用。（不能用于导航条组件中）

让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

显示或隐藏内容
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。

<div class="container"><table class="table"><tr><th>情境文本颜色</th><td><p class="text-muted">text-muted</p></td><td><p class="text-primary">text-primary</p></td><td><p class="text-success">text-success</p></td><td><p class="text-info">text-info</p></td><td><p class="text-warning">text-warning</p></td><td><p class="text-danger">text-danger</p></td></tr><tr><th>情境背景色</th><td><p class="bg-primary">bg-primary</p></td><td><p class="bg-success">bg-success</p></td><td><p class="bg-info">bg-info</p></td><td><p class="bg-warning">bg-warning</p></td><td><p class="bg-danger">bg-danger</p></td></tr></table><hr>关闭按钮：--><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button><br>三角符号：<span class="caret"></span><br><div class="pull-left">快速浮动--左</div><div class="pull-right">快速浮动--右</div><br><div class="center-block">居中，测试无效</div><div class="hidden">隐藏的...</div>
</div>

响应式工具

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和.visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。

打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

.visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。它与 .visible-print-block 类大致相同，除了<table> 相关元素的特殊情况外。

测试用例

调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类。

在...上可见

带有绿色标记的元素表示其在当前浏览器视口（viewport）中是可见的。

在...上隐藏

带有绿色标记的元素表示其在当前浏览器视口（viewport）中是隐藏的。

Bootstrap-CSS-按钮-图片-辅助类-响应式相关推荐

1. Bootstrap(全局CSS之表单按钮图片辅助类响应式工具)

   表单 基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...

2. 全局CSS之表单按钮图片辅助类响应式工具)

   前言: 本节课我们接着上节课内容继续讲全局CSS的样式,今天主要讲表单.按钮.图片.辅助类.以及响应式工具 1. 表单 1.1基本表单  class="form-control"  ...

3. Bootstrap_03_(全局CSS之表单按钮图片辅助类响应式工具)

   表单 基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...

4. Bootstrap全局css样式_图片，响应式工具

   响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.<!DOCTYPE html> <html lang=& ...

5. bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏

   <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐 ...

6. 【前端实例代码】如何使用 HTML 和 CSS 快速创建一个响应式导航栏

   效果图: 大屏: 小屏: bilibili在线视频演示地址: [前端实例代码]如何使用 HTML 和 CSS 快速创建一个响应式导航栏nav_哔哩哔哩_bilibili完整代码在这里:https:// ...

7. 前端css弹性布局，响应式布局，多列布局

   前端css弹性布局,响应式布局,多列布局 主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...

8. bootstrap 让文字显示在响应式图片上

   在这个位置折腾了一会,半天没有出效果. 有两种办法:1)让图片做为背景,文字直接布局在图片上: 2)让图片用img标签插入,文字相对布局在图片上: 先说说第一种办法的问题,要想让背景图片完全显示出来, ...

9. 前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案 响应式 页面优化 规范与模块化...

   04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

最新文章

1. 扩增子统计绘图3热图：样品相关分析，差异OTU
2. 2018年人工智能和机器学习路在何方？听听美国公司怎么做
3. 室外电磁赛道铺设补充说明
4. 成功开源项目证明Web是开源最大成功
5. 第十届蓝桥杯JavaB组总结
6. Error while retrieving the leader gateway. Retrying to connect to akka.tcp://flink@laptop:xxxx
7. [react] 如何用React实现滚动动画？
8. Node.js文件的同步异步事件循环
9. 超越Excel、python的数据可视化报表，月薪3W的人都在用
10. SQL Server查询优化
11. vi 打开文件，行末尾有^M
12. storage 主机集群共享卷数据不同步_codis 高可用集群跳过nginx 代理
13. 单片机c语言中flag用法,单片机中定义flag有啥作用flag=1和flag=0都是什么意思
14. 人工智能的现状分析和未来展望
15. .NET Reflector Visual Studio Extension
16. Android 朋友圈之多图显示
17. Windows 使用命令强制删除文件及文件夹
18. wetool个人版_wetoo群发wetool与企业-购买
19. 博士申请 | 纽约州立大学布法罗分校邹韶峰老师招收强化学习方向全奖博士生...
20. Fatal Python error: init_stdio_encoding: failed to get the Python codec name of the stdio encoding

热门文章

1. 删除oracle表里的重复记录
2. 数据源管理 | 分布式NoSQL系统，Cassandra集群管理
3. 读书笔记—《销售铁军》随记9-最后一篇
4. ASP.NET Core 2.0使用Log4net实现记录日志功能
5. Redis介绍及实践分享
6. View绘制--onMeasure() 、onLayout()
7. LVM逻辑卷管理命令
8. 揭秘淘宝286亿海量图片存储与处理架构，互联网营销
9. 关于ireport制作报表模版时的一些注意
10. 信息学奥赛一本通 1166：求f(x,n)