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>
