bootstrap之按钮大小+图片大小调整

最新推荐文章于 2023-10-10 22:30:00 发布

鲸鱼姐

最新推荐文章于 2023-10-10 22:30:00 发布

阅读量1w

点赞数 5

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhaolulu916/article/details/102880664

版权

bootstrap 同时被 2 个专栏收录

42 篇文章 7 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

一效果如下

技术要点：

1. 按钮通过font-size调整大小，

2. img通过width调整大小 img{ width:200px;height:200px;}

二代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <style>
        #btnCenter{
            text-align: center;
        }
        .btn{
            margin:100px;
            font-size:50px;
            padding: 10;
        }

        #btnCenter2{
        width:100%;
        height:auto;
        text-align: center;
       }
        #btnCenter2 img{
            width:200px;
            height:200px;
        }

        #btnCenter3{
        width:100%;
        height:auto;
        text-align: center;
       }
        #btnCenter3 img{
            width:200px;
            height:auto;
        }

    </style>
</head>
<body>
<div id="btnCenter"> 
    <a href="#" class="btn btn-success btn-lg">单击我</a>
</div> 
<div id="btnCenter2"> 
        <img src="img/2.png">
</div> 

</body>
</html>