Bootstrap CSS——Button&Img

最新推荐文章于 2022-05-28 21:30:55 发布

Tarkzeng

最新推荐文章于 2022-05-28 21:30:55 发布

阅读量1k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css button img

本文链接：https://blog.csdn.net/u011350527/article/details/48914459

版权

Bootstrap 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

http://v3.bootcss.com/css/#buttons
http://v3.bootcss.com/css/#images
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>按钮</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!--按钮类型-->
        <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-link">link</button>
        <button type="button" class="btn btn-danger">danger</button>
    </div>
    <hr>


    <div class="div">
        <!--按钮的大小-->
        <button type="button" class="btn btn-info">info</button>
        <button type="button" class="btn btn-info btn-lg">info</button>
        <button type="button" class="btn btn-info btn-md">info</button>
        <button type="button" class="btn btn-info btn-sm">info</button>
        <button type="button" class="btn btn-info btn-xs">info</button>
    </div>
    <hr>

    <!--使用btn-block设置充满父级容器-->
    <button type="button" class="btn btn-default btn-block">hello</button>
    <hr>

    <!--使用a标签去创建button-->
    <a href="#" class="btn btn-default btn-lg active" role="button">default</a>

    <!--使用input标签去创建button-->
    <input class="btn btn-default" type="button" value="input">

    <!--关于图片的使用，alt属性是指如果无法显示图像，浏览器将显示替代文本，此外，当用户把鼠标移到图像上方，最新的浏览器会在一个文本框中显示描述性文本。-->
    <img src="1.jpeg" alt="" class="img-circle">
    <img src="1.jpeg" alt="" class="img-rounded">
    <img src="1.jpeg" alt="" class="img-thumbnail">
</body>
</html>