Bootstrap3制作自己的导航栏


Posted in Javascript onMay 12, 2016

导航栏是一个很好的功能,是Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式。
创建一个默认的导航栏的步骤如下:

  • 向 <nav> 标签添加 class .navbar、.navbar-default(白底黑字),navbar-inverse(黑底白字)
  • 向上面的元素添加 role="navigation",有助于增加可访问性。
  • 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

下面实例为大家分享使用Bootstrap3制作的导航栏,具体内容如下

比如

google

Bootstrap3制作自己的导航栏

微博

Bootstrap3制作自己的导航栏

那么如何写出这样方便这样的组件

使用bootstrap3吧!

直接说使用

一般情况下导航放到如下的结构中

<nav class="navbar navbar-default" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
  <a class="navbar-brand" href="#">
  <img alt="Brand" src="...">
  </a>
 </div>
 </div>
</nav>

1、nav标签

第一层 class中 navbar是必须的 其他的属性是可选的
添加navbar-default创建的是最基本的导航,不会固定在哪个位置颜色是透明的
添加navbar-inverse类 颜色变为黑色
添加navbar-fixed-top固定在顶部,添加navbar-fixed-bottom固定在底部
添加navbar-static-top 效果如下

Bootstrap3制作自己的导航栏

<div class="navbar-header">
导航的头 比如说网站的loge 点击进去主页,或者是网站的名称

Bootstrap3制作自己的导航栏

效果如上

这里可以换成文字 我感觉效果会更好

2、表单
在导航里添加表单,比如搜索,登录什么的也比较常见

比如我上面的搜索

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">搜索</button>
   </form>

解释一下其中的navbar-left类会把这个form定位在左边
当然也对应有navbar-right类

同理 按钮可以这样加

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

文本可以这样加

<p class="navbar-text">Signed in as Mark Otto</p>

链接可以这样加

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

并且这样都可以添加navbar-right或者navbar-left类

我的导航   

<!--导航-->
 <div class="navbar-wrapper">
  <div class="container" id="navcontainer">
  <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
   <div class="container">
   <div class="navbar-header">
    <a class="navbar-brand" href="#">先声文库</a>
   </div>
   <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">搜索</button>
   </form>
   <div class="navbar-right">
    <ul class="nav navbar-nav">
    <li><a data-toggle="modal" data-target="#register" >注册</a></li>
    <li><a data-toggle="modal" data-target="#signin" >登录</a></li>
    </ul>
   </div>
   </div>
  </nav>

  </div>
 </div>

效果如下

Bootstrap3制作自己的导航栏

更多内容大家可以参考一下文章进行学习:

关于Bootstrap的更多内容大家还可以参考专题进行学习: 《Bootstrap学习教程》

以上就是利用Bootstrap3制作的导航栏,希望对大家的学习有所帮助,做出属于自己的导航栏

Javascript 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
DIV始终居中的js代码
Feb 17 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
Bootstrap 组件之按钮(二)
May 11 #Javascript
jQuery验证插件validate使用详解
May 11 #Javascript
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
详解jquery uploadify 上传文件
2013/11/09 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
50岁生日感言
2014/01/23 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
党员公开承诺书2015
2015/01/21 职场文书
志愿者个人总结
2015/03/03 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
安全生产协议书
2016/03/22 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
JavaScript 反射学习技巧
2021/10/16 Javascript