Bootstrap - 导航条

代码:

  

    

      
        Toggle navigation
        
        
        
      
      Brand
    
    

      

        
Link
        
Link
      
    
  

分析：
1）

标签，导航条。
class样式：
navbar:指出这是一个导航条，它会应用导航条的样式。
narbar-default: 代表着是一个默认导航条样式（会给我们一个白色的导航条样式）。
role="navigation": 代表这会应用一个导航条规则。

2）

导航条的内容都会被这样一个div来裹着，class是container-fluid。
class="container-fluid"：（居中的，固定大小的布局）
这里也可以使用container（代表自适应浏览器大小的布局）
区别参考：http://blog.csdn.net/sinat_27088253/article/details/50985432

3）

导航条头部。
里面包含了2个内容：
: 这里是collapsed组件。作用是，当浏览器宽度小于一定值时候会显示这样一个图标。（三个span是指的三个横线）
：商标，logo。

图片.png

分析：

我们先不看这个div,我们先看下面的

：

      
Link
      
Link

现在来看这个

这个id是bs-example-navbar-collapse-1，上面的collapsed按钮点击，会弹出这个id为bs-example-navbar-collapse-1的div，里面展示内容。

当我们正常展示的时候，

和

都没有显示出来的。当浏览器小于一定的宽度的时候，才会显示出来。


小于一定宽度.png

我们可以将这两段代码（

和

）去掉，那么网页就不具备了响应式布局的特点了。

---

导航条是依赖 JavaScript，响应式导航条依赖折叠（collapse）插件。

---

效果：
1）大于等于768px阈值:

图片.png

2）小于768px阈值：

图片.png

图片.png

注意：此时的两个导航条都是可以滑动的，不是固定的。

---

查看案例中的导航条：
黑底，内容固定的，在中间：

图片.png

添加
.navbar-fixed-top类可以让导航条固定在顶部。
可以用.container容器，从而让导航条内容居中或者自适应显示。

我们将：

改为：

导航内容就居中了：

图片.png

在

中的class添加navbar-fixed-top，那么就固定在了顶部。
注意：添加.navbar-fixed-top类可以让导航条固定在顶部，固定的导航条会遮住页面上的其他内容，除非给元素设置了padidng。导航条的默认高度是50px，比如设置：

body {
    padding-top:70px;
}

在

中的class添加navbar-inverse，就是黑底展示。

我们再在collapse的

中多添加几个
• ，然后就可以像我们的案例那样了：

Toggle navigation 现代浏览器博物馆

• 综述
• 简述
• 特点
• 关于

457678ioasdasbkjdbasjkdnasknasdmkaslmdlkasmdlkas

图片.png