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">&times;</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>

转载于:https://www.cnblogs.com/937522zy/p/5010956.html