<article class="component active" id="bars">
  <h2 class="component-title">标题栏</h2>
  <p class="component-description">标题栏放在页面顶部</p>

  <div class="component-example component-example-fullbleed">
    <header class="bar bar-nav">
      <h1 class="title">标题</h1>
    </header>
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class="title">标题</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">带按钮的标题栏</h3>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
            <button class="button pull-left">
                Left
            </button>
            <button class="button pull-right">
                Right
            </button>
            <h1 class="title">Title</h1>
        </header>
    </div>
{% highlight html %}
<header class="bar bar-nav">
  <button class="button pull-left">
    按钮
  </button>
  <button class="button pull-right">
    按钮
  </button>
  <h1 class="title">标题</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">带图标的标题栏</h3>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
          <a class="icon icon-left pull-left"></a>
          <a class="icon icon-refresh pull-right"></a>
          <h1 class="title">标题</h1>
        </header>
      </div>

{% highlight html %}
<header class="bar bar-nav">
  <a class="icon icon-left pull-left"></a>
  <a class="icon icon-refresh pull-right"></a>
  <h1 class="title">标题</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">带链接和图标</h3>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
          <button class="button button-link button-nav pull-left">
            <span class="icon icon-left"></span>
            返回
          </button>
          <button class="button button-link button-nav pull-right">
            下一步
            <span class="icon icon-right"></span>
          </button>
          <h1 class="title">标题</h1>
        </header>
      </div>

{% highlight html %}
<header class="bar bar-nav">
  <button class="button button-link button-nav pull-left">
    <span class="icon icon-left"></span>
    返回
  </button>
  <button class="button button-link button-nav pull-right">
    下一步
    <span class="icon icon-right"></span>
  </button>
  <h1 class="title">标题</h1>
</header>
{% endhighlight %}

    </article>

    <article class="component">
      <h3 class="component-title">带标签页</h3>

      <div class="component-example component-example-fullbleed">
        <header class="bar bar-nav">
            <button class="button pull-left">
                Left
            </button>
            <button class="button pull-right">
                Right
            </button>
            <div class="buttons-row">
                <a href="#tab1" class="tab-link active button">Tab 1</a>
                <a href="#tab2" class="tab-link button">Tab 2</a>
                <a href="#tab3" class="tab-link button">Tab 3</a>
            </div>
        </header>
    </div>

{% highlight html %}
<header class="bar bar-nav">
  <button class="button pull-left">
    Left
  </button>
  <button class="button pull-right">
    Right
  </button>
  <div class="buttons-row">
    <a href="#tab1" class="tab-link active button">Tab 1</a>
    <a href="#tab2" class="tab-link button">Tab 2</a>
    <a href="#tab3" class="tab-link button">Tab 3</a>
  </div>
</header>
{% endhighlight %}

    </article>

    <article class="component" id='toolbar'>
      <h2 class="component-title">工具栏</h2>

      <div class="component-example component-example-fullbleed">
      </div>

{% highlight html %}
<nav class="bar bar-tab">
  <a class="tab-item external active" href="#">
    <span class="icon icon-home"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-me"></span>
    <span class="tab-label">文案</span>
    <span class="badge">2</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-star"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-cart"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-settings"></span>
    <span class="tab-label">文案</span>
  </a>
</nav>
{% endhighlight %}

</article>
<article class="component">
    <h3 class="component-title">工具栏 (只有文案)</h3>
    <div class="component-example component-example-fullbleed">
        <nav class="bar bar-tab">
            <a class="tab-item external active" href="#">
            文案
          </a>
            <a class="tab-item external" href="#">
            文案
          </a>
            <a class="tab-item external" href="#">
            文案
          </a>
        </nav>
    </div>
  {% highlight html %}
  <nav class="bar bar-tab">
      <a class="tab-item external active" href="#">
  文案
</a>
      <a class="tab-item external" href="#">
  文案
</a>
      <a class="tab-item external" href="#">
  文案
</a>
  </nav>
  {% endhighlight %}
</article>
<article class="component">
    <h3 class="component-title">二级标题栏</h3>
    <div class="component-example component-example-fullbleed">
      <nav class="bar bar-nav bar-standard">
        <h1 class="title">多级标题栏和工具栏</h1>
      </nav>

      <!-- Block button in standard bar fixed below top bar -->
      <div class="bar bar-header-secondary">
        <button class="button button-block">Block level button</button>
      </div>

      <!-- Block button in standard bar fixed above the footer -->
      <div class="bar bar-footer-secondary">
        <button class="button button-block">Block level button</button>
      </div>

      <!-- Icons in standard bar fixed to the bottom of the screen -->
      <div class="bar bar-footer">
        <a class="icon icon-edit pull-left"></a>
        <a class="icon icon-settings pull-right"></a>
      </div>
    </div>

{% highlight html %}
<nav class="bar bar-nav bar-standard">
  <h1 class="title">多级标题栏和工具栏</h1>
</nav>

<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-header-secondary">
  <button class="button button-block">Block level button</button>
</div>

<!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-footer-secondary">
  <button class="button button-block">Block level button</button>
</div>

<!-- Icons in standard bar fixed to the bottom of the screen -->
<div class="bar bar-footer">
  <a class="icon icon-edit pull-left"></a>
  <a class="icon icon-settings pull-right"></a>
</div>
{% endhighlight %}

  </article>
