{% layout 'layout' %}
{% block title %}Buttons{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">UI Elements</a></li>
<li class="active"><a href="ui-buttons.html">Buttons</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Headings</h2>
            </div>
            <div class="panel-body">
                <h1 class="mt0">Heading 1 <small>Secondary</small></h1>
                <h2>Heading 2 <small>Secondary</small></h2>
                <h3>Heading 3 <small>Secondary</small></h3>
                <h4>Heading 4 <small>Secondary</small></h4>
                <h5>Heading 5 <small>Secondary</small></h5>
                <h6>Heading 6 <small>Secondary</small></h6>
            </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
              <h2>Example Address</h2>
          </div>
          <div class="panel-body">
              <address>
                <strong>Twitter, Inc.</strong><br>
                795 Folsom Ave, Suite 600<br>
                San Francisco, CA 94107<br>
                <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            
            <address>
                <strong>Full Name</strong><br>
                <a href="mailto:#">first.last@example.com</a>
            </address>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
                <h2>Alignment Classes</h2>
          </div>
          <div class="panel-body">
                <p class="text-left">Left aligned text.</p>
                <p class="text-center">Center aligned text.</p>
                <p class="text-right">Right aligned text.</p>
          </div>
        </div>

        <div class="panel panel-default">
              <div class="panel-heading">
                    <h2>Block Level Descriptions</h2>
                    
              </div>
              <div class="panel-body">
                <p>A list of terms with their associated descriptions.</p>
                  <dl>
                    <dt>Description lists</dt>
                    <dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
                    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dt>Malesuada porta</dt>
                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                  </dl>
              </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading"><h2>Ordered List</h2></div>
            <div class="panel-body">
                <p>A list of items in which the order <i>does</i> explicitly matter (numbered list).</p>
                <ol>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Officiis modi ipsum officia ad!</li>
                    <li>Atque nisi fugit repellat ratione.</li>
                    <li>Eveniet tenetur reiciendis eaque.</li>
                    <li>Aperiam accusamus quas nisi?</li>
                    <ol>
                        <li>Assumenda, ipsa hic vel sed?</li>
                        <li>Quaerat praesentium error.</li>
                        <li>Magni, excepturi nulla adipisci.</li>
                    </ol>
                    <li>Nesciunt, reprehenderit provident cupiditate atque!</li>
                    <li>Sit, nobis similique beatae aut.</li>
                    <li>Eum, debitis veniam laudantium dolor.</li>
                </ol>

            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading"><h2>Unstyled List</h2></div>
            <div class="panel-body">

                <p>A list of items with no list-style or additional left padding.</p>
                <ul class="list-unstyled">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Officiis modi ipsum officia ad!</li>
                    <li>Atque nisi fugit repellat ratione.</li>
                    <li>Eveniet tenetur reiciendis eaque.</li>
                    <li>Aperiam accusamus quas nisi?</li>
                    <ul>
                        <li>Assumenda, ipsa hic vel sed?</li>
                        <li>Quaerat praesentium error.</li>
                        <li>Magni, excepturi nulla adipisci.</li>
                    </ul>
                    <li>Nesciunt, reprehenderit provident cupiditate atque!</li>
                    <li>Sit, nobis similique beatae aut.</li>
                    <li>Eum, debitis veniam laudantium dolor.</li>
                </ul>
                    
            </div>
        </div>

    </div>

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>Body Text</h2>
                
            </div>
            <div class="panel-body">
                <p><code>p.lead</code></p> <p class="lead">Onwards to victory! </p>
                <p><code>p</code></p> <p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit.</p>
                <p><code>small</code></p> <p><small>These men promptly escaped from a maximum security stockade to the Los Angeles underground.</small> </p>
                <p><code>em</code></p> <p><em> Today, still wanted by the government, they survive as soldiers of fortune. </em> </p>
                <p><code>strong</code></p> <p><strong>If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team. </strong></p>
            </div>
        </div>


        <div class="panel panel-default">
          <div class="panel-heading">
              <h2>Blockquotes</h2>
              
          </div>
          <div class="panel-body">
              <blockquote>
                <p>There is only one thing in the world worse than being talked about, and that is not being talked about</p>
                <small>Oscar Wilde in <cite title="Source Title">The Picture of Dorian Grey</cite></small>
            </blockquote>
            <blockquote class="pull-right">
                <p>How glorious it is – and also how painful – to be an exception.</p>
                <small>Alfred de Musset</small>
            </blockquote>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
                <h2>Emphasis classes</h2>
          </div>
          <div class="panel-body">
            <code class="pull-right">.text-muted</code>
            <p class="text-muted">Aren’t you a little short for a stormtrooper?</p>
            <code class="pull-right">.text-default</code>
            <p class="text-default">That’s no moon, it’s a space station!</p>
            <code class="pull-right">.text-success</code>
            <p class="text-success">The Force is strong with this one.</p>
            <code class="pull-right">.text-info</code>
            <p class="text-info">I find your lack of faith disturbing.</p>
            <code class="pull-right">.text-warning</code>
            <p class="text-warning">These aren’t the droids you’re looking for.</p>
            <code class="pull-right">.text-danger</code>
            <p class="text-danger">May the Force be with you.</p>
          </div>
        </div>

        <div class="panel panel-default">
              <div class="panel-heading">
                    <h2>Horizontal description</h2>
                    
              </div>
              <div class="panel-body">
                <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
                <dl class="dl-horizontal">
                    <dt>Description lists</dt>
                    <dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
                    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dt>Malesuada porta</dt>
                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                </dl>
              </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading"><h2>Unordered List</h2></div>
            <div class="panel-body">
                <p>A list of items in which the order <i>does not</i> explicitly matter.</p>
                <ul>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Officiis modi ipsum officia ad!</li>
                    <li>Atque nisi fugit repellat ratione.</li>
                    <li>Eveniet tenetur reiciendis eaque.</li>
                    <li>Aperiam accusamus quas nisi?</li>
                    <ul>
                        <li>Assumenda, ipsa hic vel sed?</li>
                        <li>Quaerat praesentium error.</li>
                        <li>Magni, excepturi nulla adipisci.</li>
                    </ul>
                    <li>Nesciunt, reprehenderit provident cupiditate atque!</li>
                    <li>Sit, nobis similique beatae aut.</li>
                    <li>Eum, debitis veniam laudantium dolor.</li>
                </ul>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading"><h2>Custom Icon List</h2></div>
            <div class="panel-body">

                <p>A list of items with no list-style or additional left padding.</p>
                <ul class="fa-ul">
                    <li><i class="fa fa-li fa-check-square"></i>List icons (like these)</li>
                    <li><i class="fa fa-li fa-check-square"></i>can be used</li>
                    <li><i class="fa fa-li fa-spinner fa-spin"></i>to replace</li>
                    <li><i class="fa fa-li fa-square"></i>default bullets in lists</li>
                    <li><i class="fa fa-li fa-legal"></i>and can also
                        <ul class="fa-ul">
                            <li><i class="fa fa-li fa-reply"></i>form sublist</li>
                            <li><i class="fa fa-li fa-retweet"></i>each with different</li>
                            <li><i class="fa fa-li fa-sitemap"></i>icons</li>
                        </ul>
                    <li><i class="fa fa-li fa-legal"></i>thanks to baked in support for <a href="ui-icons.html">FontAwesome</a>!</li>
                    </li>
                </ul>
                    
            </div>
        </div>

    </div>
</div>












<div class="row">
    <div class="col-md-12">
        <div class="panel panel-danger">
          <div class="panel-heading"><h2>Codes</h2></div>
          <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <h3>Inline</h3>
                    <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
                    <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
                </div>
                <div class="col-md-6">
                    <h3>Block</h3>
                    <p>Use <code>&lt;pre&gt;</code> for multiple lines of code.</p>
    <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <h3>Prettify</h3>
                    <p>To add colored syntax highlight to the <code>&lt;pre&gt;</code> tag, then use the <code>prettyprint</code> class, and for line numbers add the <code>linenums</code> class.</p>
<pre class="prettyprint linenums">
&lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;focusedinput&quot; class=&quot;col-xs-3 control-label&quot;&gt;Focused Input&lt;/label&gt;
    &lt;div class=&quot;col-xs-6&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;focusedinput&quot; placeholder=&quot;Default Input&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
{% endblock %}
