详解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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
用console.table()调试javascript
Sep 04 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
详解Typescript里的This的使用方法
Jan 08 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&amp;mysql(二)
2006/10/09 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
php实现socket推送技术的示例
2017/12/20 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
python操作toml文件的示例代码
2020/11/27 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书