フットブロック

ウィンドウ下辺に固定でフロートして常時表示できる領域です。コンテンツの分量にかかわらず最下部までのスクロールを必要としないため、いつでもアクションを起こせるようにするためのボタンを配置したりするのに利用します。

      フットブロック
HTML
<div class="container-fluid with-sidebar">
  <div class="section">
    ・・・
  </div>
  <div class="navbar navbar-default navbar-fixed-bottom navbar-footblock with-sidebar" role="navigation">
  ・・・
  </div>
</div>

フットブロックには、テキスト、ボタン、ドロップダウンボタンを、左寄せ、中央揃え、右寄せで配置することができます。

HTML
<!-- 中央揃え -->
<ul class="nav navbar-nav navbar-center">
  <li><p class="navbar-text">テキスト</p></li>
  <li><button class="btn">ボタン</button></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン<b class="caret"></b></a>
    <span class="dropdown-arrow"></span>
    <ul class="dropdown-menu">
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated Sub Menu Element</a></li>
      <li><a href="#">Separated Element</a></li>
    </ul>
  </li>
</ul>

<!-- 左寄せ -->
<ul class="nav navbar-nav">
  <li><p class="navbar-text">テキスト</p></li>
  <li><button class="btn">ボタン</button></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン<b class="caret"></b></a>
    <span class="dropdown-arrow"></span>
    <ul class="dropdown-menu">
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated Sub Menu Element</a></li>
      <li><a href="#">Separated Element</a></li>
    </ul>
  </li>
</ul>

<!-- 右寄せ -->
<ul class="nav navbar-nav navbar-right">
  <li><p class="navbar-text">テキスト</p></li>
  <li><button class="btn">ボタン</button></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">ドロップダウン<b class="caret"></b></a>
    <span class="dropdown-arrow"></span>
    <ul class="dropdown-menu">
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li><a href="#">Sub Menu Element</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated Sub Menu Element</a></li>
      <li><a href="#">Separated Element</a></li>
    </ul>
  </li>
</ul>

フットブロックのサンプル

数値