container：固定960px宽度，（如果又引入了响应式样式，则会适当调整，例如1600*900，它会显示1200px）

container-fluid:自适应屏幕宽度，即满屏显示。

row和col可以参考一下：https://blog.csdn.net/yzy85/article/details/53021385?locationNum=2&fps=1和http://v3.bootcss.com/css/

尤其http://v3.bootcss.com/css/讲的特别清楚哦

例如：

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

.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时：


<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"><span
                    class="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"><span
                    class="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>通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：




.btn 是按钮的基础，主要是调整盒模型的，.btn-default 以及其他 .btn-* 系列则是视觉样式的调整，如颜色、大小等等。


例子：


<a ><span class="glyphicon glyphicon-search"></span>搜索</a>
运行效果是：




非常难看，鼠标放上去的时候，字体下面还会出现一根横线。如果将a元素的样式设置成btn btn-default时，就好看多了，代码如下：




鼠标放上去的时候，也没有横线的，只是由白色编程灰色了：




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"><span
                class="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"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
</div>运行结果如下：




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




是不是很难看？




												


											
bootstrap之navbar的更多相关文章
	

    
								
  1. Bootstrap 更改Navbar默认样式
		
    alt+shift+n 新建文件ctrl+shift+/ 注释ctrl+shift+f 重新排版代码ctrl+/ 注释 /* navbar */.navbar-default { background ...
    
		
    2. 
						
  2. 【读书笔记《Bootstrap 实战》】2.作品展示站点
		
    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...
    
		
    3. 
						
  3. 【Bootstrap】2.作品展示站点
		
    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...
    
		
    4. 
						
  4. [Bootstrap] 6. Navigation
		
    Too Much Navigation? How many of Bootstrap's Navigation Components can we use on a page? 0 1 More th ...
    
		
    5. 
						
  5. HTML5+Bootstrap 学习笔记 2
		
    navbar升级 从Bootstrap 2到Bootstrap 3 1. .navbar-inner已从Bootstrap 3中去除. 2. <ul class="nav"& ...
    
		
    6. 
						
  6. [转]ASP.NET MVC 5 List Editor with Bootstrap Modals
		
    本文转自:https://www.codeproject.com/articles/786085/asp-net-mvc-list-editor-with-bootstrap-modals With  ...
    
		
    7. 
						
  7. 初识Less（2015年05月23日）
		
    因为最近在研究Bootstrap,然后才了解到Less,听说Less很强大,又听说Bootstrap+Less会更搭,所以就决定也顺带了解下Less的相关知识. come  on...... 一.简介 ...
    
		
    8. 
						
  8. Flask框架搭建一个日程表
		
    目录 前言 项目介绍 技术栈 Flask Web开发流程 一.搭建环境 1.1: 创建虚拟环境 1.2: 安装依赖包 1.3: 创建依赖包列表文件 1.4: 测试hello word 二.应用程序开发 ...
    
		
    9. 
						
  9. Chrome插件开发，美化网页上的文件列表。chrome-extension，background
		
    上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 问题1——之Linux虚拟机ip地址消失
			
    原文转自 https://blog.csdn.net/keep_walk/article/details/75115926 以前一直通过ifconfig命令查看ip地址,但是今天用XShell连接自己 ...
    
			
    2. 
						
  2. 版本控制——Version Control
			
    版本控制是指对软件开发过程中各种程序代码.配置文件及说明文档等文件变更的管理,是软件配置管理的核心思想之一. 版本控制最主要的功能就是追踪文件的变更.它将什么时候.什么人更改了文件的什么内容等信息忠实 ...
    
			
    3. 
						
  3. Python下探究随机数的产生原理和算法
			
    资源下载 #本文PDF版下载 Python下探究随机数的产生原理和算法(或者单击我博客园右上角的github小标,找到lab102的W7目录下即可) #本文代码下载 几种随机数算法集合(和下文出现过的 ...
    
			
    4. 
						
  4. Starting MySQL....The server quit without updating PID file[失败]/lib/mysql/ip12189.pid). 错误一例
			
    [root@ip12189 etc]# service mysqld startStarting MySQL....The server quit without updating PID file[ ...
    
			
    5. 
						
  5. MySQL 排名、分组后组内排名、取各组的前几名 及排名后更新插入数据表中
			
    一.排名 /*普通排名:从1开始,顺序往下排*/ AS rank ) r ORDER BY score; /*并列排名:相同的值是相同的排名*/ SELECT cs.* , CASE WHEN @p= ...
    
			
    6. 
						
  6. [BZOJ2427]软件安装
			
    Problem 每个软件都要安装某些软件才能安装,而且都有体积和价值,求安装的价值最大值 Solution 对于每个环,我们可以知道必须全部一起取或者不取,因此我们先用Tarjan缩点 然后我们用一个 ...
    
			
    7. 
						
  7. [Codeforces778E]Selling Numbers
			
    Problem 给一个由问号和数字组成的数字串A(问号表示任一数字). 再给定n个数字Bi,和0~9的数字的价值. F(x)表示x各个位数上的价值和.问A为何值时,sum(F(Bi+A))的值最大为多 ...
    
			
    8. 
						
  8. Netty的ByteToMessageDecoder/LengthFieldBasedFrameDecoder
			
    是个inbound handler,channelRead方法里面,用一个bytebuf(cumulation)来把下一个数据包和当前这一个拼在一起,以免同一个请求被拆包.然后callDecode,里 ...
    
			
    9. 
						
  9. 剑指Offer 8. 跳台阶 （递归）
			
    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 题目地址 https://www.nowcoder.com/pract ...
    
			
    10. 
						
  10. C++程序设计-面向对象
			
    1-1面向对象初探 变量也是Object Data: the properties  or status; is the core Operations: the functions对外能提供的服务, ...
    
			
    11.