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>

  • 相关阅读:
    005.SQLServer AlwaysOn可用性组高可用简介
    004.Windows Server 故障转移群集 (WSFC)简介
    003.SQLServer数据库镜像高可用部署
    附008.Kubernetes TLS证书介绍及创建
    附007.Kubernetes ABAC授权
    附006.Kubernetes RBAC授权
    附005.Kubernetes身份认证
    附004.Kubernetes Dashboard简介及使用
    附003.Kubeadm部署Kubernetes
    附002.Minikube介绍及使用
  • 原文地址:https://www.cnblogs.com/937522zy/p/5010956.html
Copyright © 2011-2022 走看看