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

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

  1. <ul class="nav nav-pills justify-content-center bg-dark nav-dark">
  2.         <li class="nav-item">
  3.             <a href="#" class="nav-link">1</a>
  4.         </li>
  5.         <li class="nav-item">
  6.             <a href="#" class="nav-link">2</a>
  7.         </li>
  8.         <li class="nav-item">
  9.             <a href="#" class="nav-link">3</a>
  10.         </li>
  11.     </ul>

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

在浏览器上显示为：

缩小浏览器窗口显示为：

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

代码为：

  1. <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  2.     <ul class="navbar-nav">
  3.         <li class="nav-item active">
  4.             <a href="#" class="nav-link">link1</a>
  5.         </li>
  6.         <li class="nav-item">
  7.             <a href="#" class="nav-link">link1</a>
  8.         </li>
  9.         <li class="nav-item">
  10.             <a href="#" class="nav-link">link1</a>
  11.         </li>
  12.         <li class="nav-item">
  13.             <a href="#" class="nav-link">link1</a>
  14.         </li>
  15.     </ul>
  16. </nav>

正常窗口显示为：

缩小窗口小于576px时：

三、折叠导航栏

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

代码为：

  1. <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  2.     <a href="#" class="navbar-brand">
  3.             <img src="" alt="logo" style="width:70px;height:30px;">
  4.     </a>
  5.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
  6.         <span class="navbar-toggler-icon"></span>
  7.     </button>
  8.     <div class="collapse navbar-collapse" id="collapsible">
  9.     <ul class="navbar-nav">
  10.         <li class="nav-item active">
  11.             <a href="#" class="nav-link">link1</a>
  12.         </li>
  13.         <li class="nav-item">
  14.             <a href="#" class="nav-link">link1</a>
  15.         </li>
  16.         <li class="nav-item">
  17.             <a href="#" class="nav-link">link1</a>
  18.         </li>
  19.         <li class="nav-item">
  20.             <a href="#" class="nav-link">link1</a>
  21.         </li>
  22.     </ul>
  23.  
  24. </nav>

//注意：.navbar-brand是品牌logo；

窗口大于576的时候，显示为：

窗口小于576的时候，显示为：

　

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

代码如下：

  1. <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  2.     <a href="#" class="navbar-brand">
  3.             <img src="" alt="logo" style="width:70px;height:30px;">
  4.     </a>
  5.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
  6.         <span class="navbar-toggler-icon"></span>
  7.     </button>
  8.     <div class="collapse navbar-collapse" id="collapsible">
  9.     <ul class="navbar-nav">
  10.         <li class="nav-item active">
  11.             <a href="#" class="nav-link">link1</a>
  12.         </li>
  13.         <li class="nav-item">
  14.             <a href="#" class="nav-link">link1</a>
  15.         </li>
  16.         <li class="nav-item">
  17.             <a href="#" class="nav-link">link1</a>
  18.         </li>
  19.         <li class="nav-item">
  20.             <a href="#" class="nav-link">link1</a>
  21.         </li>
  22.     </ul>
  23.     <form class="form-inline">
  24.                 <div class="input-group">
  25.                     <span class="input-group-addon">@</span>
  26.                     <input list="dl" type="text" class="form-control" placeholder="Search"/>
  27.                     <datalist id="dl">
  28.                         <option value="IE"></option>
  29.                         <option value="Firefox"></option>
  30.                         <option value="chrome"></option>
  31.                         <option value="safari"></option>
  32.                     </datalist>
  33.                 </div>
  34.  
  35.                 <button class="btn btn-success" type="submit">search</button>
  36.             </form>
  37. </nav>

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

aaarticlea/png;base64,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" alt="" />

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

　　　　代码如下：

  1.  <div class="container-fluid">
  2.      <div class="row">
  3.          <!-- 导航栏 -->
  4.          <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark">
  5.              <div class="col-lg-4">
  6.              <ul class="navbar-nav">
  7.                  <li class="nav-item">
  8.                      <a class="nav-link" href="#">link1</a>
  9.                  </li>
  10.                  <li class="nav-item">
  11.                      <a class="nav-link" href="#">link2</a>
  12.                  </li>
  13.                  <li class="nav-item">
  14.                      <a class="nav-link" href="#">link3</a>
  15.                  </li>
  16.              </ul>
  17.              </div>
  18.  <!-- 导航栏表单与按钮 -->
  19.          <div class="col-lg-8">
  20.              <form class="form-inline" style="float:right;">
  21.                  <div class="input-group">
  22.                      <span class="input-group-addon">@</span>
  23.                      <input list="dl" type="text" class="form-control" placeholder="Search"/>
  24.                      <datalist id="dl">
  25.                          <option value="IE"></option>
  26.                          <option value="Firefox"></option>
  27.                          <option value="chrome"></option>
  28.                          <option value="safari"></option>
  29.                      </datalist>
  30.                      <button class="btn btn-success" type="submit">search</button>
  31.                  </div>
  32.              </form>
  33.              </div>
  34.          </nav>
  35.          </div>
  36.              </div>

bootstrap导航栏.nav与.navbar区别的更多相关文章

  1. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  2. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  3. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  4. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  5. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  6. 设置导航栏nav全透明

    设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...

  7. BootStrap 实现导航栏nav透明，nav子元素文字不透明

    在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...

  8. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

  9. bootstrap导航栏的辛酸史

    昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢.不过还好昨天写了一些内容.现在奉上.不作更改. 今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...

随机推荐

  1. Windows下编译Python2.7源码

    本文开始一个系列文章,深入理解Python源码,算是阅读<Python源码剖析>一书的读书笔记,是一项长期进行的工作.一共分三个部分:Python对象模型,Python虚拟机,Python ...

  2. 学习Ajax

    1.XHR对象 IE7+.Firefox.Opera.Chrome和Safari都支持原生XMLHttpRequest对象,IE6不支持,只支持ActiveXObject对象,该对象在IE11中已经不 ...

  3. Golang：使用 httprouter 构建 API 服务器

    https://medium.com/@gauravsingharoy/build-your-first-api-server-with-httprouter-in-golang-732b7b01f6 ...

  4. win10 uwp 获取指定的文件 AQS

    很多时候不需要获取整个文件夹的文件,是需要获取文件夹里指定的文件. 那么 UWP 如何对文件夹里的文件进行过滤,只拿出自己需要的文件? 本文:如何使用通配符或文件匹配方式在uwp获取文件夹中指定的文件 ...

  5. 【转】ARM vs X86 – Key differences explained!

    原文:http://www.androidauthority.com/arm-vs-x86-key-differences-explained-568718/ Android supports 3 d ...

  6. 【转】linux IO子系统和文件系统读写流程

    原文地址:linux IO子系统和文件系统读写流程 我们含有分析的,是基于2.6.32及其后的内核. 我们在linux上总是要保存数据,数据要么保存在文件系统里(如ext3),要么就保存在裸设备里.我 ...

  7. MyBatis 开发记录

    1.在classpath下创建log4j.properties # Global logging configuration log4j.rootLogger=DEBUG, stdout # Cons ...

  8. IIS6、7添加反向代理的步骤

    1.安装requestRouter_amd64.msi和rewrite_x64_zh-CN.msi. 打包下载地址:http://files.cnblogs.com/files/wangwust/ii ...

  9. JPA之常用 基本注解

    1.常用基本注解 @Entity @Table @Basic @Column @GeneratedValue @Id 2.特殊注解 @Transient @Temporal 用 table 来生成主键 ...

  10. js原生API妙用（一）

    复制数组 我们都知道数组是引用类型数据.这里使用slice复制一个数组,原数组不受影响. let list1 = [1, 2, 3, 4]; let newList = list1.slice(); ...