编程 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实现的图片马赛克后显示并切换加文字功能

Apr 21 Javascript

IE8 中使用加速器(Activities)

May 14 Javascript

简单实用的反馈表单无刷新提交带验证

Nov 15 Javascript

js验证电话号码与手机支持+86的正则表达式

Jan 23 Javascript

ext combobox动态加载数据库数据(附前后台)

Jun 17 Javascript

JQuery中节点遍历方法实例

May 18 Javascript

基于JQuery实现图片轮播效果(焦点图)

Feb 02 Javascript

js判断数组key是否存在(不用循环)的简单实例

Aug 03 Javascript

javascript匀速动画和缓冲动画详解

Oct 20 Javascript

AngularJS创建一个上传照片的指令实例代码

Feb 24 Javascript

vue.js响应式原理解析与实现

Jun 22 Javascript

JavaScript字符串转数字的简单实现方法

Nov 27 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

You might like

PHP下对数组进行排序的函数

2010/08/08 PHP

解析PHP中常见的mongodb查询操作

2013/06/20 PHP

菜单效果

2006/10/14 Javascript

10款新鲜出炉的 jQuery 插件(Ajax 插件，有幻灯片、图片画廊、菜单等)

2011/06/08 Javascript

jquery插件开发注意事项小结

2013/06/04 Javascript

jQuery表格列宽可拖拽改变且兼容firfox

2014/09/03 Javascript

浅析js预加载/延迟加载

2014/09/25 Javascript

js防止DIV布局滚动时闪动的解决方法

2014/10/30 Javascript

JavaScript+html5 canvas实现本地截图教程

2020/04/16 Javascript

JavaScript中利用jQuery绑定事件的几种方式小结

2016/03/06 Javascript

jQuery事件处理的特征(事件命名机制)

2016/08/23 Javascript

js提示框替代系统alert,自动关闭alert对话框的实现方法

2016/11/07 Javascript

ionic2自定义cordova插件开发以及使用（Android）

2017/06/19 Javascript

Validform验证时可以为空否则按照指定格式验证

2017/10/20 Javascript

微信小程序如何修改本地缓存key中单个数据的详解

2019/04/26 Javascript

JavaScript设计模型Iterator实例解析

2020/01/22 Javascript

js调用网络摄像头的方法

2020/12/05 Javascript

Python的Twisted框架上手前所必须了解的异步编程思想

2016/05/25 Python

Django日志模块logging的配置详解

2017/02/14 Python

Python网络爬虫神器PyQuery的基本使用教程

2018/02/03 Python

最耐用行李箱，一箱永流传：Briggs & Riley（全球终身保修）

2017/12/07 全球购物

英国最全面的橄榄球联盟门票网站：Live Rugby Tickets

2018/10/06 全球购物

Redbubble法国：由独立艺术家设计的独特产品

2019/01/08 全球购物

俄罗斯香水在线商店：AromaCode

2019/12/04 全球购物

关于.NET, HTML的五个问题

2012/08/29 面试题

优纳科技软件测试面试题

2012/05/15 面试题

JSP&Servlet技术面试题

2015/05/21 面试题

实习生求职自荐信

2014/02/07 职场文书

教育技术职业规划范文

2014/03/04 职场文书

周年庆促销方案

2014/03/15 职场文书

物业管理专业自荐信

2014/07/01 职场文书

2014年乡镇安全生产工作总结

2014/12/02 职场文书

解除劳动合同通知书范本

2015/04/16 职场文书

小程序实现文字循环滚动动画

2021/06/14 Javascript

MySQL系列之十五 MySQL常用配置和性能压力测试

2021/07/02 MySQL

Python可视化神器pyecharts之绘制箱形图

2022/07/07 Python