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的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...
随机推荐
- WPF 验证没有通过无法保存数据（非常好）+ 虚似数据库
Validation control with a single validation rule is easy, but what if we need to validate a control ...
- intellij idea 插件开发--快速定位到mybatis mapper文件中的sql
intellij idea 提供了openApi,通过openApi我们可以自己开发插件,提高工作效率.这边直接贴个链接,可以搭个入门的demo:http://www.jianshu.com/p/24 ...
- Hello World -- 第一篇博客
今年注定是不寻常的一年,因为技术,接触了许多大牛.通过一篇篇博文,看到了大牛们勤奋好学.孜孜不倦的精神,于是决定也开个博客,向大牛学习. 博客开了,写点什么呢?奈何肚子里墨水不多,吐出来也多是白沫,不 ...
- canvas图表详解系列（4）：动态散点图
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- 怎么用SQL语句备份和恢复数据库?
BACKUP DATABASE "mydb" TO DISK ='C:\mybak.db' with init RESTORE DATABASE "mydb" ...
- VS中Release模式下生成去掉生成pdb文件
1.右键项目,选择属性 2.选择正确的配置,点击高级 3.调试信息选择 none,点击确定.
- c++中vector的pair与make_pair的使用，双关键字排序
#include <vector> #include <iostream> #include <algorithm> using namespace std; bo ...
- 牛顿插值法及其C++实现
h1 { margin-bottom: 0.21cm } h1.western { font-family: "Liberation Sans", sans-serif; font ...
- 锁对象Lock
Lock 实现提供了比使用synchronized 方法和语句可获得的更广泛的锁定操作,它能以更优雅的方式处理线程同步问题: public class LockTest { publicstaticv ...
- Android 圆角的效果实现
Android 自定义ImageView实现圆角图片昨天给学生布置作业,写微信首页,也就是聊天的界面,listView里的item中联系人的头像是圆角的,图形界面如下: 那么我就仔细研究了圆角的具体实 ...