首页
所有分类
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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
koa中间件核心（koa-compose）源码解读分析
Jun 15 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
uniapp微信小程序:key失效的解决方法
Jan 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
亚洲购物网站(6) 马耳他购物网站(1) 巴基斯坦购物网站(2) 摩纳哥购物网站(1) 缅甸购物网站(1) 约旦购物网站(1) 越南购物网站(9) 乌克兰购物网站(27) 罗马尼亚购物网站(10) 希腊购物网站(6)
You might like
mysql 搜索之简单应用
2007/04/27 PHP
PHP 远程文件管理，可以给表格排序，遍历目录，时间排序
2009/08/07 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
php接口技术实例详解
2016/12/07 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
php判断目录存在的简单方法
2019/09/26 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)
2015/01/23 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python3.x实现发送邮件功能
2018/05/22 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python pip如何手动安装二进制包
2020/09/30 Python
卫生院健康教育实施方案
2014/06/07 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
英文版辞职信
2015/02/28 职场文书
Python之matplotlib绘制饼图
2022/04/13 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技