案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>导航栏的字形图标</title>
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <!-- Bootstrap -->
8
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
9
<style>
10
 body {
11
    padding-top: 50px;
12
    padding-left: 50px;
13
}
14
</style>
15
<!--[if lt IE 9]>
16
    <script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
17
<![endif]-->
18
</head>
19
<body>
20
21
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
22
    <div class="container">
23
        <div class="navbar-header">
24
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
25
                <span class="sr-only">Toggle navigation</span>
26
                <span class="icon-bar"></span>
27
                <span class="icon-bar"></span>
28
                <span class="icon-bar"></span>
29
            </button>
30
            <a class="navbar-brand" href="#">Project name</a>
31
        </div>
32
        <div class="collapse navbar-collapse">
33
            <ul class="nav navbar-nav">
34
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
35
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
36
                <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
37
            </ul>
38
        </div><!-- /.nav-collapse -->
39
    </div><!-- /.container -->
40
</div>
41
<!-- jQuery (Bootstrap 插件需要引入) -->
42
<script src="/js/bootstrap/jquery.min.js"></script>
43
<!-- 包含了所有编译插件 -->
44
<script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
45
46
</body>
47
</html>