首页
所有分类
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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
Javascript闭包（Closure）详解
May 05 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
S-2000(1) 克隆(1) 脏读(2) 小喇叭(1) 代理(2) IC-R9500(1) #{}(1) 外键(1) 增删查改(1) SQL注入(2)
You might like
学习php中的正则表达式
2014/08/17 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP中header用法小结
2016/05/23 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
Python 实现进度条的六种方式
2021/01/06 Python
Spy++的使用方法及下载教程
2021/01/29 Python
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
西式婚礼证婚词
2014/01/12 职场文书
高级工程师英文求职信
2014/03/19 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers