bootstrap--字体图标、响应式图片

bootstrap--字体图标、响应式图片 - cherry_ning

cherry-ning 2021-08-08 原文

bootstrap–字体图标、响应式图片

bootstrap 字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap字体图标</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14     <style type="text/css">
15         .glyphicon-music{
16             color:gold;
17             font-size:20px;
18         }
19 
20         .edit{
21             color:red;
22             font-size:20px;
23         }
24     </style>
25 
26 </head>
27 <body>
28     <div class="container">
29         <h1>字体图标</h1>
30         <button class="btn btn-primary"><span class="glyphicon glyphicon-music"></span> 音乐</button>
31         <button class="btn btn-warning">警告 <span class="glyphicon glyphicon-warning-sign"></span></button>
32         <br><br><br>
33         <p><span class="glyphicon glyphicon-pencil edit"></span>这是一个段落</p>
34     </div>
35 </body>
36 </html>

———————————————-img-responsive 声明响应式图片 ———————————————————————————————-

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap响应式图片</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14     <style type="text/css">
15         div[class*=\'col\']{
16             border:1px solid #000;
17         }
18     </style>
19 
20 </head>
21 <body>
22     <div class="container">
23         <div class="row">
24              <!--  图片的响应：如果容器的宽度比图片大，图片就等于自己的宽度
25                 如果容器的宽度比图片小，那么图片的宽度就等于容器的宽度减去左右padding值
26               -->
27             <div class="col-md-3"><img src="../images/location_bg.jpg" alt="img" class="img-responsive img-rounded"></div>
28             <div class="col-md-9">
29                 <img src="../images/location_bg.jpg" alt="img" class="img-responsive img-circle">
30                 <img src="../images/location_bg.jpg" alt="img" class="img-responsive img-thumbnail">
31             </div>
32         </div>
33     </div>
34 </body>
35 </html>