bootstrap（图标,导航） - 别来无恙x

 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>

导航

posted on 2017-06-13 15:37 别来无恙x 阅读(503) 评论(0) 收藏举报

刷新页面返回顶部