Bootstrap导航栏样式使⽤
Bootstrap导航栏默认样式
导航栏默认样式是灰⾊的，它的结构应该由nav标签来包裹，包含logo、页⾯列表等元素，简单的编码内容如下：
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#">佚站互联</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#"></a></li>
<li><a href="#">杭州⽹站设计</a></li>
<li><a href="#">杭州⽹站制作</a></li>
</ul>
为什么使用bootstrap?
</div>
</nav>
以上代码的内容就是最基础的⼀个Bootstrap导航栏样式，按照这个结构你也可以⾮常迅速地编写出⾃⼰的导航栏。
Bootstrap导航栏样式固定在顶端
现在将导航栏固定在页⾯顶端也是⾮常流⾏的使⽤⽅式，通过对应的样式引⼊，Bootstrap导航栏样式也可以⾮常容易地实现这⼀点。
如果你想要将⾃⼰的导航栏固定到页⾯顶端，那么只需要在导航栏标签中引⼊navbar-fixed-top样式即可：
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
以上代码就将导航栏固定到了顶端，不管你怎么往下拉页⾯，都能够固定在顶端。
Bootstrap导航栏样式固定在底部
现在在⼀些⽹站设计中，会将⼀些类似登陆或者关注信息固定在页⾯底部，那么你也可以将这种形式通过Bootstrap导航栏来实现，只需要在⾥⾯添加固定底部的样式，即可实现该功能：
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
...
</div>
</nav>
Bootstrap导航栏反相样式
默认的Bootstrap导航栏样式是灰⾊的，如果你想要采⽤⿊⾊，那么可以采⽤navbar的反相导航栏样式：
<nav class="navbar navbar-inverse">
...
</nav>
这种样式获得的导航栏样式是⿊⾊的，能够满⾜你对于样式的额外需求。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。