2017-3-1 bootstrap_navbar学习记录

发表于 |

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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. 增加下拉菜单：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <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>

  3. .navbar-right类，可以把

      列表放到右边。用法：<ul class="nav navbar-nav navbar-right">即可把列表放置右对齐。

  4. .navbar-btn类，可以在导航栏里加一个按钮。用法：<button class="btn btn-danger navbar-btn"></button>这样在按钮会自动居中在导航栏中间。

  5. .navbar-form类，增加表单。

    on rails
    1
    2
    3
    4
    5
    <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>

    还可以让表单变得更美。

    ​

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

  7. 固定导航栏，可以固定在顶部和底部。

    • 固定在顶部：.navbar-fixed-top类。
    • 固定在底部：.navbar-fixed-bottom类。

  8. 折叠导航栏，在小屏幕上可以自动隐藏折叠。需要增加的代码：