Bootstrap3 - 12.固定在顶部或者底部的导航栏

固定在顶部：navbar-fixed-top
固定在底部：navbar-fixed-bottom

在页面顶部：navbar-static-top 会跟着滚动而滚动，不会固定在screen。

eg:

<nav class="navbar navbar-inverse navbar-fixed-top">

---

<nav class="navbar navbar-inverse navbar-fixed-top">
        <a href="#" class="navbar-brand">www.<strong>google</strong>.com</a>
        <ul class="nav navbar-nav">
            <li class="active"><a href="">课程</a></li>
            <li><a href="">博客</a></li>
            <li><a href="">手册</a></li>
        </ul>
    </nav>
    <div class="container"> 
        <div>
            <h1>title</h1>
            <p>按时打算杀对方的方式斯蒂芬斯蒂芬按时打算</p>
        </div>
    </div>

我们在浏览器上面：

图片.png

看到的问题就是：
Navbar挡住了我们的container容器。

我们需要在自己的自定义css文件中写样式：

body {
    padding-top: 52px;  # 我们在样式调节上看到的navbar的高度是52px
}

效果：

图片.png

navbar底部的话：

<nav class="navbar navbar-inverse navbar-fixed-bottom">

效果：

图片.png

代码：

navbar-static-top

效果：

图片.png