zoukankan      html  css  js  c++  java
  • Bootstrap: 按钮 & 图片

    1 按钮

    <1> 按钮样式

    <button class="btn btn-default">默认按钮</button>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-success">成功按钮</button>
    <button class="btn btn-info">信息按钮</button>
    <button class="btn btn-warning">警告按钮</button>
    <button class="btn btn-danger">危险按钮</button>
    <button class="btn btn-link">连接按钮</button>

    <2> 按钮大小

    <button class="btn btn-primary btn-lg">超大按钮(高清大屏台式机)</button>
    <button class="btn btn-primary">大按钮(笔记本屏幕)</button>
    <button class="btn btn-primary btn-sm">小按钮(平板电脑)</button>
    <button class="btn btn-primary btn-xs">超小按钮(手机)</button>

    <3>按钮状态

        激活状态:按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影);

        禁用状态:当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变;

    <button class="btn btn-default">默认按钮</button>
    <button class="btn btn-default active">激活按钮</button>
    <button class="btn btn-default" disabled>禁用按钮</button>

    2 图片

      .img-rounded:添加 border-radius:6px 来获得图片圆角

      .img-circle:添加 border-radius:50% 来让整个图片变成圆形

      .img-thumbnail:添加一些内边距(padding)和一个灰色的边框

    <img src="img/1.jpg" class="img-rounded" width="33%">
    <img src="img/1.jpg" class="img-circle" width="33%">
    <img src="img/1.jpg" class="img-thumbnail" width="33%">

    响应式图片

    <img src="img/1.jpg" class="img-responsive">
  • 相关阅读:
    问题解决-Plugin with id 'com.github.dcendents.android-maven' not found
    hadoop 04 一 HA高可用配置
    hadoop 03 一 Hadoop机架感知配置
    Windows平台安装配置Hadoop
    hadoop 02一 hadoop配置
    hadoop 01一 hadoop安装配置
    Centos7下载和安装教程
    mysql 命令行导出数据
    RabbitMQ 集群部署(linux-centos6.5)
    Spring 集成RabbitMq
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15249790.html
Copyright © 2011-2022 走看看