bootstrap快速入门笔记(八)-按钮,响应式图片
一,默认样式:.btn-default , .btn-primary , .btn-success ,.btn-info, btn-warning ,btn-link
二,尺寸:.btn-lg, .btn-sm, .btn-xs和。.btn-block:可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
三,激活状态:对于<button>
元素,是通过 :active
状态实现的。对于 <a>
元素,是通过 .active
类实现的
四,禁用状态:<button>
元素添加 disabled
属性,使其表现出禁用状态 disabled="disabled"
但是在a元素的禁用用.disabled类;
五,图片
1,响应式图片:
.img-responsive
类可以让图片支持响应式布局
.center-block图片水平居中
2,图片形状:**请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。
.img-rounded:方形图片
.img-circle:圆形图片
.img-thumbnail:边框带空心的放心图片
六,辅助类
情境文本颜色:
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
情景背景色:.bg-primary...
关闭按钮:<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号:<span class="caret"></span>
快速浮动:.pull-left, .pull-right
导航条中浮动:.navbar-left
或 .navbar-right
内容快居中:<div class="center-block">...</div>
清除浮动:通过为父元素添加 .clearfix
图片替换:<h1 class="text-hide">Custom heading</h1>
最新文章
- Thinking in Unity3D:材质系统概览
- 单片机联网需求攀升 WIZnet全硬件TCP/IP技术崛起
- 开始VS 2012中LightSwitch系列的第3部分:我该选择哪一个屏幕模板
- 每天一个linux命令(10):more命令
- javascript高级函数
- HDU 3183 A Magic Lamp
- Sphinx 全文检索
- Consistent Hashing原理与实现
- JS加入收藏与设置主页
- ngui点击与场景点击判断
- 【HDU 4451 Dressing】水题,组合数
- 有趣 IOS 开展 - block 使用具体解释
- ThreadLocal本地线程变量的理解
- 51Nod 1125 交换机器的最小代价
- Python-接口自动化(八)
- TCP 总结
- HQL中左连接,右连接、内连接
- Zookeeper学习笔记4
- JavaScript 函数式编程读书笔记1
- UI自动化测试(一)简介及Selenium工具的介绍和环境搭建
热门文章
- @Autowired 注释对在哪里和如何完成自动连接提供了更多的细微的控制。
- Django中使用CKEditor代码高亮显示插件Code Snippet
- UWP--集合绑定数据
- Office 365开发概述及生态环境介绍(一)
- IntelliJ Idea和IntelliJ webstrm 常用快捷键
- Spring报错——Scope &#39;session&#39; is not active for the current thread
- iOS开发之iOS程序的启动过程
- 27. Remove Element - 移除元素-Easy
- SPOJ - VISIBLEBOX [multiset的使用]
- XJOI1595空中楼阁【最短路】