bootstrap快速入门笔记(八)-按钮,响应式图片

时间:2021-11-10 16:20:22

一,默认样式:.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>