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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
理解JavaScript中的对象
Aug 25 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
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
php权重计算方法代码分享
2014/01/09 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python数据结构之链表的实例讲解
2017/07/25 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
管理专员自荐信
2014/01/26 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
副处级干部考察材料
2014/05/17 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
一般纳税人申请报告
2015/05/18 职场文书
《刷子李》教学反思
2016/02/20 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers