案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap Example</title>
6
    <meta name="viewport" content="width=device-width, initial-scale=1">
7
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
8
    <script src="/js/bootstrap/jquery.min.js"></script>
9
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
10
    <style>
11
        body {
12
            position: relative;
13
        }
14
        #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
15
        #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
16
        #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
17
        #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
18
        #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
19
    </style>
20
</head>
21
<body data-spy="scroll" data-target=".navbar" data-offset="50">
22
​
23
<nav class="navbar navbar-inverse navbar-fixed-top">
24
    <div class="container-fluid">
25
        <div class="navbar-header">
26
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
27
                <span class="icon-bar"></span>
28
                <span class="icon-bar"></span>
29
                <span class="icon-bar"></span>
30
            </button>
31
            <a class="navbar-brand" href="#">WebSiteName</a>
32
        </div>
33
        <div>
34
            <div class="collapse navbar-collapse" id="myNavbar">
35
                <ul class="nav navbar-nav">
36
                    <li><a href="#section1">Section 1</a></li>
37
                    <li><a href="#section2">Section 2</a></li>
38
                    <li><a href="#section3">Section 3</a></li>
39
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
40
                        <ul class="dropdown-menu">
41
                            <li><a href="#section41">Section 4-1</a></li>
42
                            <li><a href="#section42">Section 4-2</a></li>
43
                        </ul>
44
                    </li>
45
                </ul>
46
            </div>
47
        </div>
48
    </div>