• 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">
  • 相关阅读:
    自定义标签的解析
    alias、beans标签的解析
    import标签的解析
    注册解析的BeanDefinition
    bean子元素的解析
    bean标签的解析
    注册BeanDefinitions
    Object类
    归并排序
    快速排序
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15249790.html
Copyright © 2020-2023  润新知