bootstrap（圖標,導航）

時間 2019-12-09

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <!--
 7             做者：15573722829@qq.com
 8             時間：2017-06-05
 9             描述：字節圖標-特色
10                     體積小便於加載
11                     無需重複設計
12                     方便引用
13         -->
14         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
15         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
16         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
17         <style>
18             .glyphicon-asterisk{
19                 color:green;
20                 font-size: 100px;
21             }
22         </style>
23     </head>
24     <body>
25         <span class="glyphicon glyphicon-asterisk"></span>
26 
27     </body>
28 </html>

圖標

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <!--
 7             做者：15573722829@qq.com
 8             時間：2017-06-06
 9             描述：
10             1.以一個帶有css.nav的無序列表
11             2.nav-tabs表明可切換的導航
12             3.nav-pills表明膠囊導航
13             4.nav-justified使導航垂直
14         -->
15         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
16         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
17         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
18     </head>
19     <body>
20         <ul class="nav nav-tabs">
21             <li class="active"><a href="http://www.imooc.com">慕課網</a></li>
22             <li><a href="http://www.imooc.com">慕課網</a></li>
23             <li><a href="http://www.imooc.com">慕課網</a></li>
24 
25         </ul>
26         
27         <ul class="nav nav-pills">
28             <li class="active"><a href="http://www.imooc.com">慕課網</a></li>
29             <li><a href="http://www.imooc.com">慕課網</a></li>
30             <li><a href="http://www.imooc.com">慕課網</a></li>
31 
32         </ul>
33         
34             <ul class="nav nav-pills ">
35             <li class="active"><a href="http://www.imooc.com">慕課網</a></li>
36             <li><a href="http://www.imooc.com">慕課網</a></li>
37             <li><a href="http://www.imooc.com">慕課網</a></li>
38 
39         </ul>
40     </body>
41 </html>

導航

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。