bootstrap 固定最底部_固定在页面顶部或底部的导航栏《 Bootstrap 3 基础 》

Bootstrap 里面的导航栏有两种样式，你现在看到的是默认的样式，这里我们把 navbar-default 这个类 ... 换成 navbar-inverse ...

这样会得到一个暗色背景的导航栏，文字，背景的颜色都会有些变化 ... 我比较喜欢这个样式 ...

我们可以让这个导航栏固定在页面的顶部，或者底部显示 ... 在导航栏的这个 nav 标签上 ... 再添加一个 css 类 ... 把导航栏固定在页面顶部，可以添加一个 navbar-fixed-top 类 ...

你会看到，现在这个导航栏会跑到页面的最顶部显示 ... 而且它会固定在这里，也就是，不管怎么滚动页面，这个导航栏始终会显示在这里。

现在有一个问题 ... 就是导航里面的内容，不再居中显示了 ... (# 调整窗口的宽度)

解决这个问题，可以在导航栏的内部，可以用一个带 .container 类的 div 标签包装导航里面的内容 ...

我们先去掉最外层的这个带 .container 类的 div 元素 ...

然后把它添加到导航栏的内部，可以直接放在 nav 这个标签的里面。

现在， 你会看到，导航栏里的内容，又会居中在页面上显示了 ...

额外的边距

在这个导航栏的下面，再添加点其它的内容 ... 把内容放在 nav 标签以外 ... 用一组带 .container 类的 div 标签 ... 这样会让内容居中在页面上显示 ..

在它里面，用一组段落标签 ... 上面加上一个 alert ，还有 alert-info ... 再回点文字 ...

p.alert.alert-info ... lorem ...

你会看到，刚才添加的这块内容，被导航栏也挡住了一块儿 ... 解决这个，需要手工在页面的 body 标签上，添加一个上边的内边距 ..

打开这个页面的自定义样式表 ... 在 css 目录下面 ... style.css ...

body .... pt70 ... 为 body 标签，添加一个 70 像素的上边的内边距 ... 现在，导航栏下边的内容，刚才被挡住的地方已经显示出来了 ...

导航栏本身的高度是 50像素，应用在 body 标签上的上内边距是 70 像素 。这样导航栏下边儿的内容，会跟导航栏之间，留出一个 20 像素的空间 ...

固定在底部

想把导航栏固定在页面的底部的话，可以在导航栏上添加一个 navbar-fixed-bottom 的类 ...

这里我们把 navbar-fixed-top 改成 navbar-fixed-bottom ...

现在， 这个导航，就会固定在页面的底部显示了 ...

这里我们还是想把导航放在顶部，所以再换成原来的 navbar-fixed-top ...

静态

在 Bootstrap 里面，还有一个类，可以把导航栏放到页面顶部显示 ... 要用到的 css 类是 navbar-static-top ... 跟 navbar-fixed-top 不同的是 ... 使用这个类的导航栏，会跟着页面的滚动而滚动 ...

把这个 navbar-fixed-top 换成 navbar-static-top ... 然后为了可以让页面能滚动 ... 我们在它下面的这个元素上，添加一个定义高度的样式 ...

加上一个 style 属性 ... 把 height 设置成 1500px ...

滚动页面 ... 你会看到，现在， 导航栏会跟着页面的滚动而滚动 ... 它上面的这块空白是我们刚才在自定义样式表里为 body 标签添加的内边距样式 ... 如果你想使用这种导航栏的话，需要把这个样式去掉 ...

下面， 我们再换成原来的 navbar-fixed-top ...

再滚动页面 ...

你会看到，这个导航栏始终会固定显示在页面的顶部 ....