Difference between revisions of "Headers"

From The Antarian Rangers
Jump to: navigation, search
 
Line 57: Line 57:
 
| Lorem ipsum dolor sit amet
 
| Lorem ipsum dolor sit amet
 
|}
 
|}
 +
 +
 +
               
 +
    <div class="col-md-10">
 +
      <div class="navbar navbar-inverse-darker mega" role="navigation">
 +
        <div class="collapse navbar-collapse example-mega-navbar-inverse">
 +
          <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 23: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.