Difference between revisions of "Headers"

From The Antarian Rangers
Jump to: navigation, search
 
(2 intermediate revisions by the same user not shown)
Line 51: Line 51:
 
</em>
 
</em>
  
−
===Tabs===
+
 
−
<div class="tabs-blue">
+
{| class="wikitable collapsible collapsed"
−
<ul>
+
! Simple collapsible table
−
<li><span class="_toggler_hide-tabs _toggler_show-tab1">tab1</span></li>
+
|-
−
<li><span class="_toggler_hide-tabs _toggler_show-tab2">tab2</span></li>
+
| Lorem ipsum dolor sit amet
−
<li><span class="_toggler_hide-tabs _toggler_show-tab3">tab3</span></li>
+
|}
−
</ul>
+
 
−
</div>
+
 
−
<div class="tabcontent">
+
               
−
{{toggle|Tab 1||tab1 tabs}}
+
    <div class="col-md-10">
−
{{toggle||Tab 2|tab2 tabs}}
+
      <div class="navbar navbar-inverse-darker mega" role="navigation">
−
{{toggle||Tab 3|tab3 tabs}}
+
        <div class="collapse navbar-collapse example-mega-navbar-inverse">
−
</div>
+
          <ul class="nav navbar-nav darker-color">
 +
            <li style="list-style: none; display: inline">
 +
              <div class="navbar-header mwbs-color-white">MegaMenu</div>
 +
            </li>
 +
            <li class="dropdown mega-full-width">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Three Column Drop Down</span>  
 +
            <!-- dropdown menu -->
 +
            <ul class="dropdown-menu darker-color" role="menu" aria-labelledby="mega2-inverse">
 +
              <li class="mega-content">
 +
                <div class="col-md-4">
 +
                  <h4 class="mwbs-color-white">Content Title</h4>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                </div>
 +
                <!-- col -->
 +
                <div class="col-md-4">
 +
                  <h4 class="mwbs-color-white">Content Title</h4>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                </div>
 +
                <!-- col -->
 +
                <div class="col-md-4">
 +
                  <h4 class="mwbs-color-white">Content Title</h4>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                </div>
 +
                <!-- col -->
 +
              </li>
 +
            </ul>
 +
            <!-- dropdown menu --></li>
 +
            <!-- list -->
 +
            <li class="dropdown mega-full-width">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Two Column Drop Down</span>  
 +
            <!-- dropdown menu -->
 +
            <ul class="dropdown-menu darker-color" role="menu" aria-labelledby="mega2-inverse">
 +
              <li class="mega-content">
 +
                <div class="col-md-6">
 +
                  <h4 class="mwbs-color-white">Content Title</h4>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                </div>
 +
                <!-- col -->
 +
                <div class="col-md-6">
 +
                  <h4 class="mwbs-color-white">Content Title</h4>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                  <p class="text-justify mwbs-color-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
 +
                  voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi
 +
                  tenetur error mollitia sed repellendus dolor.</p>
 +
                </div>
 +
                <!-- col -->
 +
              </li>
 +
            </ul>
 +
            <!-- dropdown menu --></li>
 +
            <li class="dropdown mega-full-width">
 +
            <span class="dropdown-toggle mwbs-color-white" data-toggle="dropdown">Single Column Drop Down</span>  
 +
            <!-- dropdown menu -->
 +
            <ul class="dropdown-menu darker-color" role="menu" aria-labelledby="mega2">
 +
              <li>
 +
                <div class="row">
 +
                  <div class="col-md-12">
 +
                    <div class="video">
 +
                      <div class="lazyYT" data-youtube-id="dQtDWumc7Q0" data-ratio="16:9">loading...</div>
 +
                    </div>
 +
                    <!-- /video -->
 +
                    <div class="mega-content text-center">
 +
                      <h3 class="mwbs-color-white">YouTube Plugin</h3>
 +
                      <p class="text-justify mwbs-color-white" style="padding-left:10px;">You can add video to BootStrapSkin by
 +
                      installing a plugin.</p>
 +
                    </div>
 +
                  </div>
 +
                </div>
 +
              </li>
 +
            </ul>
 +
            <!-- dropdown menu --></li>
 +
          </ul>
 +
        </div>
 +
        <!-- /.nav-collapse -->
 +
      </div>
 +
    </div>

Latest revision as of 22:59, 5 April 2015

Close up: Ranger Uniform

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Example Formats

Standard Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Commendations Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Blockquote

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Standard Table

headline
field 1 field 2
field 3 field 4
field 5 field 6


unordered list

  • first argument
  • second argument
  • third argument
  • fourth argument


ordered list

  1. first argument
  2. second argument
  3. third argument
  4. fourth argument


small

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


emphasized

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



  • MegaMenu
  • Three Column Drop Down

    • Content Title

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Content Title

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Content Title

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

  • Two Column Drop Down

    • Content Title

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Content Title

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, voluptatem et nihil maiores temporibus? Eaque, quidem iste enim delectus quae veritatis cumque. Atque, sequi tenetur error mollitia sed repellendus dolor.

  • Single Column Drop Down
    • loading...

      YouTube Plugin

      You can add video to BootStrapSkin by installing a plugin.

Retrieved from "http://swc-tar.com/rangerfiles/index.php?title=Headers&oldid=736"