WhatYouSeeML

<!--  This page is on http://bootstrap-pages.herokuapp.com/pages/components -->

<extend tag="index-page" for="Page">
  <old-index-page merge>
    <content-body:>
      <a action="components">components</a>,
      <a action="two">two</a>
    </content-body:>
  </old-index-page>
</extend>

<extend tag="two-page" for="Page">
  <old-two-page merge>
    <content-body:>

    </content-body:>
  </old-two-page>
</extend>

<extend tag="components-page" for="Page">
  <old-components-page merge>
    <content-body:>
<!--==== Layout ====-->
      I am demonstrating SemanticML. [Umur]
      <well>Wells emphasize content</well>
      <span2><well>Span2: Spans are necessary for responsive design</well></span2>
      <span4><well>Span4: So that content can flow into different screen sizes</well></span4>
<!--==== Glyphs ====-->
<clearfix/>
<h2>Glyps</h2>
<img class='icon-glass'/><img class='icon-music'/><img class='icon-search'/> See <a href='http://getbootstrap.com/components/#glyphicons-how-to-use'>Bootstrap Glyphs</a>

<!--==== Dropdown menus ====-->
<clearfix/>
<h2>Dropdown</h2>

<dropdown-menu class="pull-right" >
  <sel>Action</sel>
  <sel>Another Action</sel>
  <menu-divider/>
  <sel>One more..</sel>
</dropdown-menu>
<well/>
<!--==== Button groups ====-->
<clearfix/>
<h2>Button groups</h2>

<well>
  <btn-group>
    <btn>Left</btn>
    <btn>Middle</btn>
    <btn>Right</btn>
    <btn-primary>Primary</btn-primary>
  </btn-group>
</well>
<!--==== Button dropdowns ====-->
<clearfix/>
<h2>Button dropdowns</h2>
<btn-group>
  <btn class="dropdown-toggle" data-toggle="dropdown">Default<caret/></btn>
</btn-group>
<h2>Split button dropdown</h2>
<btn-group>
  <btn-primary>Primary</btn-primary>
  <btn-primary data-toggle="dropdown"><caret/></btn-primary>
</btn-group>

<!--==== Navs ====-->
<clearfix/>
<h2>Navs Tabs</h2>
<nav-tabs>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</nav-tabs>

<clearfix/>
<h2>Navs Pills</h2>
<nav-pills>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</nav-pills>

<clearfix/>
<h2>Navs Pills Stacked</h2>
<nav-pills-stacked>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</nav-pills-stacked>
<!--==== Navbar ====-->
<!--==== Breadcrumbs ====-->
<!--==== Pagination ====-->
<clearfix/>
<h2>Pager</h2>
<pager class="foo">
  <li><a href="#">&larr; Previous</a></li>
  <li><a href="#">Next &rarr;</a></li>
</pager>
<!--==== Labels and badges ====-->

<!--==== Typography ====-->
<!--==== Thumbnails ====-->
<clearfix/>
<h2>Thumbs</h2>
<row-fluid>
  <span2>
    <well>
    <img width='200px' height='300px' src="http://comingupforair.net/wp/wp-content/uploads/2009/02/ojingogo-book-cover-final.jpg"/>
    <caption>
      <h3>The Thumb</h3>
      <p>As you see</p>
    </caption>
    </well>
  </span2>
  <span2>
    <well>
    <img width='200px' height='300px' src="http://comingupforair.net/wp/wp-content/uploads/2009/02/ojingogo-book-cover-final.jpg"/>
    <caption>
      <h3>Another Thumb</h3>
      <p>As you see</p>
    </caption>
    </well>
  </span2>
</row-fluid>
<!--==== Jumbotron ====-->
<jumbotron>
  <well>
    <h1>Hello World</h1>
    <p>We will sell you our ideas...</p>
  </well>
</jumbotron>
<!--==== Alerts ====-->
<!--==== Progress bars ====-->
<!--==== Media object ====-->
<clearfix/>
<h2>Media Object</h2>
<media>
    <media-object class="pull-left"  width='64px' height='64px' src="http://comingupforair.net/wp/wp-content/uploads/2009/02/ojingogo-book-cover-final.jpg"/>
    <media-body>
      <well>
          <media-heading>Media Heading</media-heading>
          <p>Bla bla bla</p>
          <p>Bla bla bla</p>
          <p>Bla bla bla</p>
      </well>
    </media-body>
</media>

<!--==== Misc ====-->
    </content-body:>
  </old-components-page>
</extend>