Bootstrap导航栏样式使用
来源:互联网 发布:淘宝直播后台入口 编辑:程序博客网 时间:2024/05/22 05:03
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>
</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>
这种样式获得的导航栏样式是黑色的,能够满足你对于样式的额外需求。
- Bootstrap导航栏样式使用
- Bootstrap导航栏样式使用
- bootstrap自定义样式-bootstrap侧边导航栏的实现
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
- 使用bootstrap制作响应式导航栏
- wordpress 使用bootstrap样式
- bootstrap导航栏
- bootstrap的导航栏
- Bootstrap学习--导航栏
- Bootstrap学习:导航栏
- Bootstrap导航栏
- Bootstrap自适应导航栏
- 【一点一滴Bootstrap】导航栏
- bootstrap导航栏
- Bootstrap导航栏
- Bootstrap—导航栏
- 导航栏(Bootstrap)
- Bootstrap 导航栏
- Android六大布局使用小结(2016/1/16更新)
- 安卓——按钮的四种点击事件
- c语言getopt解析命令行参数实例包括长参数与短参数
- 数据库设计那些事
- Android性能优化-代码优化
- Bootstrap导航栏样式使用
- java的引用传递 个人理解
- Android Studio 安装ButterKnife插件
- tomcat启动报错:Could not publish server configuration for Tomcat v7.0 Server at localhost. Multiple Cont
- 过拟合问题
- 利用Intellij Idea在windows搭建spark 开发环境(含打jar包过程)(一)
- ASP.NET Cookie 概述
- 调用系统相机的一些坑
- New Comer ,just say hello to everyone and me