案例: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">

 运行结果 
 北美留学生论坛