zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    负载均衡
    重写类的Equals以及重写Linq下的Distinct方法
    关于URLEnCode,URLDeCode,Base64,公钥私钥
    JAVA 从头开始<六>
    JAVA 从头开始<五>
    JAVA 从头开始<四>
    JAVA 从头开始<三>
    JAVA 从头开始<二>
    JAVA 从头开始<一>
    ASP.Net MVC OA项目笔记<六>
  • 原文地址:https://www.cnblogs.com/937522zy/p/5010956.html
Copyright © 2011-2022 走看看