详解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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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中使用GD库做验证码
2016/03/31 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
基于python代码批量处理图片resize
2020/06/04 Python
浅析Python面向对象编程
2020/07/10 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Java语言的优势
2015/01/10 面试题
大学生社会实践自我鉴定
2014/03/24 职场文书
法人代表授权委托书
2014/04/08 职场文书
同居协议书范本
2014/04/23 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
鼓舞士气的口号
2014/06/16 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏