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 相关文章推荐
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
javascript流程控制语句集合
Sep 18 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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 高级课程笔记 面向对象
2009/06/21 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Maps Javascript
2007/01/22 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JS打印组合功能
2016/08/04 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python将回车作为输入内容的实例
2018/06/23 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python3.5的包存放的具体路径
2020/08/16 Python
基于Python正确读取资源文件
2020/09/14 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
士力架广告词
2014/03/20 职场文书
市场营销专业求职信
2014/06/17 职场文书
退货证明模板
2015/06/23 职场文书