2017-3-1 bootstrap_navbar学习记录

  1. 创建标准的导航栏<nav class="nabber nabber-default">.这种导航栏颜色是灰色的,在小屏幕上不会折叠,而是会:


<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

  1. .navbar-inverse类 倒置的反转的,意思是黑色导航栏:

  2. 增加下拉菜单:


<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

  1. .navbar-right类,可以把

      列表放到右边。用法:<ul class="nav navbar-nav navbar-right">即可把列表放置右对齐。
  2. .navbar-btn类,可以在导航栏里加一个按钮。用法:<button class="btn btn-danger navbar-btn"></button>这样在按钮会自动居中在导航栏中间。

  3. .navbar-form类,增加表单。

ruby on rails
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>

还可以让表单变得更美。

  1. 在导航栏加入文本,不知道加来做什么的。只要加入.navbar-text类就可以居中了。

  2. 固定导航栏,可以固定在顶部和底部。

  • 固定在顶部:.navbar-fixed-top类。
  • 固定在底部:.navbar-fixed-bottom类。
  1. 折叠导航栏,在小屏幕上可以自动隐藏折叠。
    需要增加的代码:
comments powered by Disqus