Template:Team:Northwestern/Template/nav

From 2014.igem.org

(Difference between revisions)
Line 85: Line 85:
       </div>
       </div>
    
    
-
 
+
<!-- Carousel
-
<header id="myCarousel" class="carousel slide">
+
    ================================================== -->
-
        <!-- Indicators -->
+
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
-
        <ol class="carousel-indicators">
+
      <!-- Indicators -->
-
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
      <ol class="carousel-indicators">
-
            <li data-target="#myCarousel" data-slide-to="1"></li>
+
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-
            <li data-target="#myCarousel" data-slide-to="2"></li>
+
        <li data-target="#myCarousel" data-slide-to="1"></li>
-
        </ol>
+
        <li data-target="#myCarousel" data-slide-to="2"></li>
-
 
+
      </ol>
-
        <!-- Wrapper for slides -->
+
      <div class="carousel-inner">
-
        <div class="carousel-inner">
+
        <div class="item active">
-
            <div class="item active">
+
          <img src="https://static.igem.org/mediawiki/2014/8/82/IMG_5365.jpg" alt="First slide">
-
                <div class="fill" style="background-image:url('https://static.igem.org/mediawiki/2014/8/82/IMG_5365.jpg');"></div>
+
          <div class="container">
-
                <div class="carousel-caption">
+
            <div class="carousel-caption">
-
                    <h2>Caption 1</h2>
+
              <h1>Example headline.</h1>
-
                </div>
+
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
 +
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
             </div>
             </div>
-
            <div class="item">
+
          </div>
-
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
+
        </div>
-
                <div class="carousel-caption">
+
        <div class="item">
-
                    <h2>Caption 2</h2>
+
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
-
                </div>
+
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>Another example headline.</h1>
 +
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
             </div>
             </div>
-
            <div class="item">
+
          </div>
-
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
+
        </div>
-
                <div class="carousel-caption">
+
        <div class="item">
-
                    <h2>Caption 3</h2>
+
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
-
                </div>
+
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>One more for good measure.</h1>
 +
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
             </div>
             </div>
 +
          </div>
         </div>
         </div>
 +
      </div>
 +
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
 +
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 +
    </div><!-- /.carousel -->
-
        <!-- Controls -->
 
-
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 
-
            <span class="icon-prev"></span>
 
-
        </a>
 
-
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
 
-
            <span class="icon-next"></span>
 
-
        </a>
 
-
    </header>
 
</body>
</body>
</html>
</html>

Revision as of 23:10, 11 September 2014

Dropdown menu from bootstrap