zoukankan      html  css  js  c++  java
  • Bootstrap全局CSS样式之button和图片

    .btn-default——button的默认样式。

    .btn-primary——button的首选样式;

    .btn-success——button的成功样式;

    .btn-info——button的一般信息样式;‘

    .btn-warning——button的警告样式;

    .btn-danger——button的危急样式。

    .btn-link——button的链接样式;

    .btn-lg——大button样式;

    .btn-sm——小button样式;

    .btn-xs——超小button样式。

    .btn-block——将button设置为充满父元素;

    .active——设置button为激活状态;

    .disabled——设置button为禁用状态;

    .img-circle——将图片设置为圆形。

    .img-rounded——为图片设置为圆角。

    .img-thumbnail——将图片设置为方形。

    .img-responsive——为图片加入响应式;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CSS全局样式_按钮和图片</title>
        <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    </head>
    <body>
    <div class="container">
            <p>
                <button type="button" class="btn btn-default">(默认样式)Default</button>
                <button type="button" class="btn btn-primary">(首选项)Primary</button>
                <button type="button" class="btn btn-success">(成功)Success</button>
                <button type="button" class="btn btn-info">(一般信息)Info</button>
                <button type="button" class="btn btn-warning">(警告)Warning</button>
                <button type="button" class="btn btn-danger">(危急)Danger</button>
                <button type="button" class="btn btn-link">(链接)Link</button>
            </p>
            <p>
                <button type="button" class="btn btn-success btn-lg" disabled>success</button>
                <button type="button" class="btn btn-success active">success</button>
                <button type="button" class="btn btn-success btn-sm">success</button>
                <button type="button" class="btn btn-success btn-xs">success</button>
            </p>
            <button type="button" class="btn btn-success btn-block">success</button>
            <a href="#" class="btn btn-primary btn-block">登录</a>
            <input class="btn btn-primary btn-block" value="提交"/>
            <img src="images/g.jpg" alt="girl" class="img-circle"/>
            <img src="images/g.jpg" alt="girl" class="img-rounded"/>
            <img src="images/g.jpg" alt="girl" class="img-thumbnail"/>
            <img src="images/937654.jpg" alt="girl" class="img-responsive"/>
    </div>
    
    </body>
    </html>



  • 相关阅读:
    [功能发布]Excel与PowerBI互通互联升级版连接SSAS和AzureAS
    个人永久性免费-Excel催化剂功能第115波-word、pdf、Excel、ppt、html等文件互转
    个人永久性免费-Excel催化剂功能第113波-将帮助文档的主动权归还用户手中
    个人永久性免费-Excel催化剂功能第106波-重新定义使用Excel功能方式
    [功能发布]Excel催化剂2周年巨献-网页数据采集功能发布,满足90%合理场景使用
    Rabbitmq(一)
    Redis(三)
    MVC action过滤器验证登录
    分布式缓存 Redis(二)
    分布式缓存 Redis(一)
  • 原文地址:https://www.cnblogs.com/mfmdaoyou/p/6803551.html
Copyright © 2011-2022 走看看