首页
所有分类
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 相关文章推荐
flash遮住div问题的正确解决方法
Feb 27 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
javascript中this用法实例详解
Apr 06 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
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
cmd(1) Switch(1) Spring JPA(1) 慢日志(1) Spring Bean(1) mt-swipe(1) REST(1) exists(2) 远程桌面(2) openEuler(1)
You might like
php实现无限级分类（递归方法）
2015/08/06 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
设定php简写功能的方法
2019/11/28 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
Python 存取npy格式数据实例
2020/07/01 Python
简单的Python人脸识别系统
2020/07/14 Python
Pytorch框架实现mnist手写库识别（与tensorflow对比）
2020/07/20 Python
医科大学生毕业的自我评价分享
2013/11/12 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS