首页
所有分类
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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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
中国购物网站(172) 韩国购物网站(27) 德国购物网站(227) 英国购物网站(954) 新加坡购物网站(41) 瑞士购物网站(28) 加拿大购物网站(185) 巴西购物网站(71) 西班牙购物网站(115) 日本购物网站(72)
You might like
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JS克隆，属性，数组，对象，函数实例分析
2016/11/26 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:59]翻天覆地，因你而变，7.20版本地图更新速览
2018/11/24 DOTA
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python面向对象实现方法总结
2020/08/12 Python
python利用faker库批量生成测试数据
2020/10/15 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
甜品店的创业计划书范文
2014/01/02 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
初中作文评语集锦
2014/12/25 职场文书
联谊活动总结范文
2015/05/09 职场文书
莫言诺贝尔获奖感言（全文）
2015/07/31 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书