Bootstrap的图像和图标

最新推荐文章于 2024-06-03 20:31:46 发布

chengqiuming

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量1.3k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap

本文链接：https://blog.csdn.net/chengqiuming/article/details/86565403

版权

Bootstrap 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

一图像

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <img alt="140x140" src="http://placehold.it/140x140">
            <div>默认图片</div>
        </div>
        <div class="col-sm-4">
            <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
            <div>圆角图片</div>
        </div>
        <div class="col-sm-4">
            <img class="img-circle" alt="140x140" src="http://placehold.it/140x140">
            <div>圆形图片</div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
                <div>缩略图</div>
            </div>
            <div class="col-sm-6">
                <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140"/>
                <div>响应式图片</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2 效果

二图标

1 说明

可以到https://getbootstrap.com/docs/3.3/components/

去查找各类图标。

2 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>图标</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <span class="glyphicon glyphicon-search"></span>
   <span class="glyphicon glyphicon-asterisk"></span>
   <span class="glyphicon glyphicon-plus"></span>
   <span class="glyphicon glyphicon-cloud"></span>
    </body>
</html>

2 效果

chengqiuming

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap的图像和图标

一图像1 代码&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图像&lt;/title&gt; &lt;link rel="stylesheet" href=&
复制链接

扫一扫