.navbar——设置nav元素为导航条组件；
.navbar-default——指定导航条组件为默认主题；
.navbar-inverse——指定导航条组件为黑色主题；
.navbar-fixed-top——设置导航条组件固定在顶部；
.navbar-fixed-bottom——设置导航条组件固定在底部；
.container-fluid——设置宽度充满父元素，即为100%；
.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；
.navbar-toggle——设置button元素为导航条组件的切换钮；
.collapsed——设置button元素为在视口小于768px时才显示；
.navbar-brand——设置导航条组件内的品牌图标；
navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

例子：

<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"><!--小屏幕导航按钮和logo--><div class="navbar-header"><a href="" class="navbar-brand" style="width:250px;"><img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;STEM教育</a></div></div>
</nav>
</body>

代码执行时，样式是这样的：

我们发现图标和字体是错位了。我们只需要在加入：display: inline;就可以了，加入后的代码如下：

<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
</head>
<body><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><!--小屏幕导航按钮和logo--><div class="navbar-header"><a href="" class="navbar-brand" style="width:250px;"><img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;display:inline;">&nbsp;STEM教育</a></div></div>
</nav>
</body>~

代码执行后，样式如下图，已经成为我们想要的样子了：

也可以这样写：

<head>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
<style>.navbar-brand>img {display: inline;}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top"><div class="container"><!--小屏幕导航按钮和logo--><div class="navbar-header"><a href="" class="navbar-brand" style="width:250px;"><img src="{{ url_for('static', filename='base/images/logo.png') }}" style="height:30px;">&nbsp;STEM教育</a></div></div>
</nav>
</body>~

效果是一样的：

解释：
display:inline 的作用是设置对象做为行内元素显示，也就是它能够将垂直排列变成横向排列。
.collapse——设置div元素为视口大于768px时显示；
.navbar-collapse——设置div元素为导航条组件各列表项的父元素；
这里说的有点不清楚，我解释一下，collapse的作用是为了当浏览器的窗口宽度小于768px的时候，将设置为collapse样式的div元素内的所有其它元素都折叠起来，以一个列表的形式显示。
例子：
.navbar-nav——设置ul为导航条组件内的列表元素;
.navbar-left——设置导航条内元素向左对齐；
.navbar-right——设置导航条内元素向右对齐；
当出现navbar-right时：~
.navbar-nav——设置ul为导航条组件内的列表元素;
.navbar-left——设置导航条内元素向左对齐；
.navbar-right——设置导航条内元素向右对齐；
当出现navbar-right时：

<div class="navbar-collapse collapse"><form class="navbar-form"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span class="input-group-btn"><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div></form><ul class="nav navbar-nav navbar-right"><li><a ><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a></li><li><a ><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a></li></ul>
</div>~

运行结果如下：

可以看出form和ul不在同一行，这是因为ul使用navbar-right指定靠右显示，而form并未指定靠左还是靠右。应该将form指定靠左显示，即设置样式为navbar-left：

<div class="navbar-collapse collapse"><form class="navbar-form navbar-left"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span class="input-group-btn"><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div></form><ul class="nav navbar-nav navbar-right"><li><a ><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a></li><li><a ><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a></li></ul>
</div>

执行解决为：

在ul标签中使用了navbar-nav的样式，如果没有使用的话：

<ul class="nav  navbar-right"><li><a ><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a></li><li><a ><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a></li>
</ul>


会导致两个li标签在不同的行，加上navbar-nav后，可以使两个li标签在同一行显示。
.navbar-form——为导航条组件内部的表单组件；
.navbar-form：主要调整所有form都为行内元素
.navbar-btn——为导航条组件内部的按钮样式；
.navbar-text——为导航条组件内部的文本样式；
.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；
.breadcrumb——设置列表元素显示为路径导航组件；
form-goup和input-goup参考：https://blog.csdn.net/qq_15267341/article/details/54016811写的很好哦。

<span class="glyphicon glyphicon-search"></span> //通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：


input-group-btn的作用：
例子:

<form class="navbar-form"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div>
</form>


想要将搜索放在文本框后面，只需要将入input-group-btn样式就可以了：

<div class="navbar-collapse collapse"><form class="navbar-form"><div class="form-group input-group"><input type="text" class="form-control" id="key-movie" placeholder="输入视频名称"><span class="input-group-btn"><a class="btn btn-default"><spanclass="glyphicon glyphicon-search"></span>搜索</a></span></div></form>
</div>

运行结果如下：

如果将input-group-btn换成input-group-addon后，就会变成如下的样子：

是不是很难看？

bootstrap之navbar相关推荐

  1. 带徽标的Bootstrap 3 Navbar

    本文翻译自:Bootstrap 3 Navbar with Logo I want to use the Bootstrap 3 default navbar with an image logo i ...

  2. 三、Bootstrap之Navbar属性整理

    Bootstrap之Navbar属性整理 参考资料 container Navbar属性 参考资料 row和col可以参考一下: https://blog.csdn.net/yzy85/article ...

  3. bootstrap之navbar样式

    一.前言 现在开始介绍bootstrap的导航条(navbar)样式. 二.源码 1.navbar.less 1.1.navbar.less源码 //// Navbars// ------------ ...

  4. 具有左，中或右对齐项的Bootstrap NavBar

    本文翻译自:Bootstrap NavBar with left, center or right aligned items In Bootstrap , what is the most plat ...

  5. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  6. Bootstrap 导航条

    导航条(navbar)是一个常用的组件,也是 Bootstrap 的特色功能.导航条一般包含站点名和几个导航链接.还可以对导航条加以扩展,添加表单控件和下拉菜单等. 基本导航条 基本导航条中包含站点名 ...

  7. 如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表

    我想让我的Bootstrap菜单在悬停时自动下拉,而不必单击菜单标题. 我还想丢失菜单标题旁边的小箭头. #1楼 这将隐藏上升的 .navbar .dropdown-menu:before {disp ...

  8. Boostrap nav和navbar的详细使用

    bootstrap之navbar nav和navbar的区别是nav不能折叠,navbar可以折叠 container:固定960px宽度,(如果又引入了响应式样式,则会适当调整,例如1600*900 ...

  9. Bootstrap组件学习之导航和导航条

    导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...

最新文章

  1. 随机森林(Random Forest)和梯度提升树(GBDT)有什么区别？
  2. Mac 下Eclipse无法连接手机
  3. Java11-day02【多态(成员访问、多态转型、内存图解)、抽象类(成员特点)、接口(成员特点)、类和接口的关系、抽象类和接口的区别、综合案例】
  4. jooq sql_使用jOOQ和JavaFX将SQL数据转换为图表
  5. Java开发环境！java基础知识点总结
  6. 常用的实现Javaweb页面跳转的方式
  7. 51NOD-1028 大数乘法V2【大数】
  8. BUG--tomcat更改目录失败
  9. PDMan-2.1.0 正式发布：用心开源，免费的国产数据库建模工具
  10. 用AutoIt写网页外挂系列之 开心网的X世界网页游戏自动送免费礼物
  11. 服务器快速操作pc文件,如何将普通pc做服务器
  12. oracle表空间 online,表空间的ONLINE和OFFLINE状态
  13. 进销存仓库管理系统：规范数据、流程与管理
  14. python像数常用函数_引用 象数疗法原理
  15. 二阶常微分方程的数值解法（中心差分法和有限体积法）
  16. 图像形态学（腐蚀、膨胀、开运算、闭运算、梯度、顶帽、黑帽）
  17. 总结java重载和重写的区别
  18. java opencv 去噪,opencv教程-图像去噪与修复
  19. ora-20085 ora-06512错误解决
  20. ｖｕｅ实现修改用户信息的全过程

热门文章

  1. 转载：自行车长途骑行装备
  2. Android网络框架(二)——策略路由与常用命令
  3. iphone5运行linux,使用linux和iphone 5的HFP配置文件
  4. 图片添加边框和文字怎么弄？图片编辑在线教学
  5. 安卓ios混合开发技术_微信已支持改微信号，安卓最新版微信一年可修改一次
  6. unity3d 凹凸贴图、法线贴图、置换贴图 （二）
  7. 15种下载文件的方法
  8. centos stream9 安装mysqld8.0.30
  9. 路由协议和路由算法的区别
  10. （一）语言基础——JAVA语言