首页
所有分类
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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
jquery 图片 上一张 下一张 链接效果（续篇）
Apr 20 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
用JS实现图片轮播效果代码（一）
Jun 26 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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
分布式追踪(1) HBuilder(1) 条形码(1) 表结构(1) GPU(1) delete in(1) group by(1) kubernetes(1) 查询效率(1) Express(1)
You might like
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
angular4自定义组件详解
2017/09/28 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
python动态参数用法实例分析
2015/05/25 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python+pygame实现坦克大战
2019/09/10 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
JACK & JONES瑞典官方网站：杰克琼斯欧式风格男装
2017/12/23 全球购物
Annoushka英国官网：英国奢侈珠宝品牌
2018/10/20 全球购物
英国排名第一的LED灯泡网站：LED Bulbs
2019/09/03 全球购物
瑞典网上购买现代和复古家具：Reforma
2019/10/21 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
学校后勤人员职责
2013/12/27 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
教师节寄语2015
2015/03/23 职场文书
2015年女工委工作总结
2015/07/27 职场文书
什么是检讨书？检讨书的格式及范文
2019/11/05 职场文书