BootStrap笔记-img相关

x33g5p2x  于2022-02-07 转载在 Bootstrap  
字(1.3k)|赞(0)|评价(0)|浏览(350)

程序运行截图如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CN_TEST1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--    bootstrap css核心文件-->
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery,需要提前引用-->
    <script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container-fluid">
        <img src="pic/it1995.jpg" />
        <img src="pic/it1995.jpg" class="rounded" />
        <img src="pic/it1995.jpg" class="rounded-circle" />
        <img src="pic/it1995.jpg" class="img-thumbnail" />
        <img src="pic/it1995.jpg" class="float-right" />
        <img src="pic/it1995.jpg" class="mx-auto d-block" />
        <img src="pic/it1995.jpg" class="img-fluid" />
    </div>
</body>
</html>

解释:这里关键就是配置对应class即可。

相关文章

最新文章

更多