继续学习bootstrap

首先记一个让web内容居中的写法：

body{

max-width:1080px;

margin:0(上下) auto（左右）;

}

今天我学习了一下有关导航和导航栏的知识。

可以创建一个nav列表：

<ul class="nav nav-tabs">

  <li><a href="#">登陆</a></li>

  <li><a href="#">注册</a></li>

  <li><a href="#">忘记密码</a></li>

</ul>

会形成一个像浏览器标签页的导航，在tabs后面加一个nav-justified，可以使标签平均分布。

还有一种

<ul class="nav nav-pills">

  <li><a href="#">登陆</a></li>

  <li><a href="#">注册</a></li>

  <li><a href="#">忘记密码</a></li>

</ul>

这种标签是一块一块的样式。可以把它的样式改成纵向的，在pills后面再添加nav-stacked就可以了，它可以很方便地用作侧栏。

一般nav是用于局部导航，而navbar（导航栏）则用于整站导航。

代码：

<div class="navbar navbar-default">   //导航栏

  <div class="navbar-header">         //logo

    <a href="#" class="navbar-brand">旺旺</a>

  </div>

  <ul class="nav navbar-nav navbar-right">         //选项

   <li><a href="#">登陆</a></li>

   <li><a href="#">注册</a></li>

   <li><a href="#">忘记密码</a></li>

  </ul>

</div>

红色字体表示向右浮动，将蓝色字体之间的用<div class="container"></div>框起来即可将正文内容与导航栏内容对齐。

还有一部分内容是添加搜索栏：采用form标签。

<form class="nav-form navbar-left">

  <div class="form-group">

     <input type="text" class="form-control">

  </div>

     <button type="submit" class="btn btn-default" >搜索</button>

<form>

红字部分使其向左浮动，这样就可以让所有左右浮动的内容排成一行。