首页
所有分类
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中Object和Function的关系小结
Sep 26 Javascript
js定时器怎么写？就是在特定时间执行某段程序
Oct 11 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
分析javascript原型及原型链
Mar 18 Javascript
Vue-Router的使用方法
Sep 05 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
基于vue.js实现购物车
Jan 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
SONY600GR(1) WR-800F(1) DE1107(3) R9700(1) DE1102(1) R71E(1) DE1105(1) ICOM(2) DE1103(2) 胆机(1)
You might like
Prototype使用指南之array.js
2007/01/10 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python实现梯度下降算法
2020/03/24 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python list转置和前后反转的例子
2019/08/26 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python之多进程与多线程的使用
2021/02/23 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
animation和transition的区别
2020/10/12 HTML / CSS
Falconeri美国官网：由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
ALDO加拿大官网：加拿大女鞋品牌
2018/12/22 全球购物
关于成绩下滑的自我检讨书
2014/09/20 职场文书
出差报告范文
2014/11/06 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers