首页
所有分类
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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
javascript实用方法总结
Feb 06 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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) 动态权限(1) promise(2) 继承(1) Kotlin(1) 验证表达式(1) redis(3) gRPC(3) XDM(3) AOP(2)
You might like
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
简单的php文件上传（实例）
2013/10/27 PHP
php网页病毒清除类
2014/12/08 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
图解js图片轮播效果
2015/12/20 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JS获取CSS样式（style/getComputedStyle/currentStyle）
2016/01/19 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python模拟登录验证码（代码简单）
2016/02/06 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
pytorch构建多模型实例
2020/01/15 Python
简约控的天堂：The Undone
2016/12/21 全球购物
美国最大的存储市场：SpareFoot
2018/07/23 全球购物
Ariat英国官网：为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
低碳环保标语
2014/06/12 职场文书
2014年教学工作总结
2014/11/13 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Elasticsearch 索引操作和增删改查
2022/04/19 Python