bootstrap导航栏.nav与.navbar区别
刚刚看了bootstrap的导航栏，发现有点弄混了，现在来整理一下；
一、简单的ul,li组成的导航：
<ul class="nav nav-pills justify-content-center bg-dark nav-dark">
<li class="nav-item">
<a href="#" class="nav-link">1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">3</a>
</li>
</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"
代码为：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
</ul>
</nav>
正常窗口显示为：
缩小窗口小于576px时：
三、折叠导航栏
当窗口小于576px的时候，不仅仅是简单的编程垂直导航；显示为一个button按钮，导航链接隐藏，点击button显示；
代码为：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a href="#" 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="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
</ul> </nav>
//注意：.navbar-brand是品牌logo；
窗口大于576的时候，显示为：
窗口小于576的时候，显示为：
四、导航栏加上form表单表示搜索框：【？？？？？】
代码如下：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a href="#" 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="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" 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应该也行吧。。
aaarticlea/png;base64,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" alt="" />
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="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">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区别的更多相关文章
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- 设置导航栏nav全透明
设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...
- BootStrap 实现导航栏nav透明，nav子元素文字不透明
在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...
- Bootstrap导航栏
导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
- bootstrap导航栏的辛酸史
昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢.不过还好昨天写了一些内容.现在奉上.不作更改. 今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...
随机推荐
- （转）JVM类生命周期概述：加载时机与加载过程
原文地址: http://blog.csdn.net/justloveyou_/article/details/72466105 JVM类加载机制主要包括两个问题:类加载的时机与步骤 和 类加载的方式 ...
- VS2010 c/c++ 本地化 emscripten 配置
配置环境 1.下载emsdk-1.35.0-full-64bit.exe,有VS2010的话直接安装. 2.安装好之后,打开cmd,# emsdk update # emsdk install lat ...
- vs重装找不到 $(WindowsSdkDir) 配置问题
vs重装的一个bug,找了一个下午,删了再装vs也没用. 在配置表 HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Microsoft SDKs ...
- 如何从MVP模式进阶到Clean模式
从类图上来看,MVP都是一个业务一个Presenter,每个Presenter都是一个接口,它还包含了View的接口,用于定于和View相关的行为,然后Activity等业务类实现View的接口,因为 ...
- Android架构: MVC 新浪微博
由于项目的需要,最近研究了一下需要连接网络项目的MVC架构,参考了一下一个新浪微博的开发架构 http://www.open-open.com/lib/view/open1345524526767.h ...
- 面试总结之mysql
总结自己在面试过程遇到的数据库问题,以备不时之需. 1.你在你们公司用的什么版本的mysql数据库,用过mysql5.7吗? 在学校学习mysql的时候用的5.5,在公司的时候用的5.6,5.7还真没 ...
- ThreadPoolExecutor系列<一、ThreadPoolExecutor 机制>
本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7681529.html 解决问题: 1. 处理大量异步任务时能减少每 ...
- Tracker-store
升级后发现有个tracker-store占用cpu非常厉害,查了下,好像是GNOME 3使用 Documents 來整合 本机 以及 在线(Google / Twitter)账户的文件,这个功能会呼叫 ...
- phalcon——闪存消息
使用两种适配器来定义消息传递给Flasher后的行为: (1)Phalcon\Flash\Direct:直接输出传递给flasher的消息 (2)Phalcon\Flash\Session:将消息临时 ...
- LeetCode 257. Binary Tree Paths （二叉树路径）
Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...