详解bootstrap导航栏.nav与.navbar区别


Posted in Javascript onNovember 23, 2017

刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下;

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

一、简单的ul,li组成的导航:

<ul class="nav nav-pills justify-content-center bg-dark nav-dark">
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">2</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">3</a>
    </li>
  </ul>

 

//解析:.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示

在浏览器上显示为:

详解bootstrap导航栏.nav与.navbar区别 

缩小浏览器窗口显示为:

详解bootstrap导航栏.nav与.navbar区别 

二、导航栏——<nav>标签中class="navbar navbar-expand-sm"——<ul>中class="navbar-nav"——<li>中class="nav-item"

代码为:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>  
  </ul>
</nav>

正常窗口显示为:

详解bootstrap导航栏.nav与.navbar区别 

 缩小窗口小于576px时: 

详解bootstrap导航栏.nav与.navbar区别

三、折叠导航栏

当窗口小于576px的时候,不仅仅是简单的编程垂直导航;显示为一个button按钮,导航链接隐藏,点击button显示;

 代码为:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">
      <img src="" alt="logo" style="width:70px;height:30px;">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsible">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>  
  </ul>
  
</nav>

 //注意:.navbar-brand是品牌logo;

窗口大于576的时候,显示为:

 详解bootstrap导航栏.nav与.navbar区别

窗口小于576的时候,显示为:

详解bootstrap导航栏.nav与.navbar区别

详解bootstrap导航栏.nav与.navbar区别 

四、导航栏加上form表单表示搜索框:【?????】

代码如下:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">
      <img src="" alt="logo" style="width:70px;height:30px;">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsible">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nav-link">link1</a>
    </li>  
  </ul>
  <form class="form-inline">
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input list="dl" type="text" class="form-control" placeholder="Search"/>
          <datalist id="dl">
            <option value="IE"></option>
            <option value="Firefox"></option>
            <option value="chrome"></option>
            <option value="safari"></option>
          </datalist>
        </div>
        
        <button class="btn btn-success" type="submit">search</button>
      </form>
</nav>

如图所示,如何使得导航栏中的form表单右对齐,移到最右边?????float:eight应该也行吧。。

详解bootstrap导航栏.nav与.navbar区别

emmmm.....知道了上面的解决方法了:利用网格系统,将左边的ul,li和右边的form表单分别排列;.col-sm-6;然后再给form表单右浮动;

代码如下:

<div class="container-fluid">
  <div class="row">
    <!-- 导航栏 -->
    <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
      <div class="col-lg-4">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >link3</a>
        </li>
      </ul>
      </div>
<!-- 导航栏表单与按钮 -->
    <div class="col-lg-8">
      <form class="form-inline" style="float:right;">
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input list="dl" type="text" class="form-control" placeholder="Search"/>
          <datalist id="dl">
            <option value="IE"></option>
            <option value="Firefox"></option>
            <option value="chrome"></option>
            <option value="safari"></option>
          </datalist>
          <button class="btn btn-success" type="submit">search</button>
        </div>              
      </form>
      </div>      
    </nav>
    </div>
      </div>

详解bootstrap导航栏.nav与.navbar区别

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
document.write的几点使用心得
May 14 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
Ajax基础知识详解
Feb 17 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 #Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 #Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 #Javascript
bootstrap实现二级下拉菜单效果
Nov 23 #Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 #Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 #Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 #Javascript
You might like
使用PHP获取网络文件的实现代码
2010/01/01 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
12步教你理解Python装饰器
2016/02/25 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python常用类型转换实现代码实例
2020/07/28 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
《望庐山瀑布》教学反思
2014/04/22 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
法律意见书范文
2015/06/04 职场文书
家庭贫困证明
2015/06/16 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python