首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap导航条学习使用(二)

Posted in Javascript onFebruary 08, 2017

本文实例为大家分享了Bootstrap导航条实现的具体代码，供大家参考，具体内容如下

navbar-header：导航的头部，一般情况下用来放置logo
navbar-brand ：用来放置logo，需要配合navbar-header使用

具体代码：

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <!--有链接和文字的导航条-->
 <nav class="navbar navbar-default">
 <div class="container"><!--将外围的div放在nav标签里面-->
  <div class="navbar-header">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">logo</a><!--navbar-brand 用来放置logo的-->
  </div>
  <ul class="nav navbar-nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
  </ul>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-link navbar-text">链接</a><!--navbar-link为导航里的链接-->
  <p class="navbar-text">这里是一段文字</p><!--navbar-text为导航里的文字-->
  <ul class="nav navbar-nav navbar-right"><!--右对齐，而navbar-left为左对齐-->
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li>
  </ul>
 </div>
 </nav>
 <!--有表单的导航条-->
 <nav class="navbar navbar-default">
 <div class="container">
  <div class="navbar-header">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">logo</a>
  </div>
  <ul class="nav navbar-nav">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
  </ul>
  <button class="btn btn-default navbar-btn navbar-left">搜索</button>

  <form action="URL" class="navbar-form navbar-left"><!--navbar-form是在导航条里添加表单，navbar-left使表单左浮动，使其与其他内容在一行显示-->
  <input type="text" class="form-control"/>
  <button class="btn btn-default">搜索</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li>
  </ul>
 </div>
 </nav>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图：

Bootstrap导航条学习使用(二)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap导航条学习使用(二)

- Author -

轻扰时光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
jquery对象与DOM对象转化
Feb 08 #Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 #Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 #Javascript
node.js的事件机制
Feb 08 #Javascript
jQuery多选框选择数量限制方法
Feb 08 #Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 #Javascript
简单实现bootstrap选项卡效果
Feb 08 #Javascript
阿里云(6) 窗口函数(3) 速龙(1) Tomcat(18) 排名(1) 分析统计(1) redis shake(1) 数据同步(1) 条形图(1) ipad(1)
You might like
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python set常用操作函数集锦
2017/11/15 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Pycharm激活码激活两种快速方式（附最新激活码和插件）
2020/03/12 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
Python extract及contains方法代码实例
2020/09/11 Python
俄罗斯游戏商店：Buka
2020/03/01 全球购物
法律专业自荐信
2014/06/03 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
js之ajax文件上传
2021/05/13 Javascript
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis