Liz's Blog

Bootstrap#1:導覽列Navigation Bar

| Comments

當初因為想在專案中navigation bar有下拉選單,且當螢幕較小時,可以縮成一個選單功能,但如果用純Bootstrap Navigation Bar教的方法下去寫,則會出現按了沒反應的現象,爬了超多文章想要解決,誤打誤撞看到Bootstrap在github的建議方式,因此才有GemGem大亂鬥#1:Bootstrap這篇文章。

以下練習節錄自Bootstrap Navigation Bar

1.導覽列(Navigation Bar)想要固定在最上面(navbar-fixed-top)的話:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <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>

2.導覽列(Navigation Bar)想要有部分下拉式選單(dropdown)的話:

<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.導覽列(Navigation Bar)想要部分連結在最右邊(navbar-right)的話:

<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><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

4.導覽列(Navigation Bar)在小螢幕時需要時按了才出現(collapse):

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <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>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

結合以上技巧,我的navbar就變成這樣囉!

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">私廚到你家</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active">
          <%= link_to("菜色", products_path) %>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <%= link_to carts_path do  %>
            購物車 <i class="fa fa-shopping-cart"> </i> ( <%= render_cart_items_count(current_cart) %> )
          <% end %>
        </li>

        <% if !current_user %>
          <li> <%= link_to("登入", new_user_session_path) %> </li>
          <li> <%= link_to "Facebook 登入", user_facebook_omniauth_authorize_path %> </li>
        <% else %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">

              Hi!, <%= current_user.email %>
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <% if current_user.admin? %>
                <li>
                  <%= link_to("Admin 選單", admin_products_path ) %>
                </li>
              <% end %>
              <li>
                <%= link_to("個人訂單列表", account_orders_path ) %>
              </li>
              <li>
                <%= link_to("登出", destroy_user_session_path, method: :delete ) %>
              </li>
            </ul>
          </li>
        <% end %>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

成品長這樣:
navbar.jpg

【延伸閱讀】

  1. GemGem大亂鬥#1:Bootstrap
  2. Bootstrap#1:導覽列Navigation Bar
  3. Bootstrap#2:Responsive Table 響應式表格
  4. Bootstrap#3:Responsive Image 響應式圖片

Comments

comments powered by Disqus