首页
所有分类
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的版本实现执行不同的代码
May 11 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
在Javascript操作JSON对象，增加 删除 修改的简单实现
Jun 02 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
澳大利亚购物网站(309) 马来西亚购物网站(41) 日本购物网站(72) 法国购物网站(144) 台湾购物网站(77) 墨西哥购物网站(16) 印尼购物网站(37) 印度购物网站(45) 埃及购物网站(2) 俄罗斯购物网站(137)
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
某页码显示的helper 少量调整，另附js版
2010/09/12 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
nodejs入门教程二：创建一个简单应用示例
2017/04/24 NodeJs
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Python+微信接口实现运维报警
2016/08/27 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
韩国三星旗下的一家超市连锁店：Home Plus
2016/07/30 全球购物
为有想象力的人提供的生活方式商店：Firebox
2018/06/04 全球购物
学生评语大全
2014/04/18 职场文书
学校师德师风整改措施
2014/10/27 职场文书
先进工作者个人总结
2015/02/15 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
详解Mysql事务并发（脏读、不可重复读、幻读）
2022/04/29 MySQL