Difference between revisions of "Team:BIT-China/Modeling"

Line 11: Line 11:
  
 
     <title>BIT-CHINA</title>
 
     <title>BIT-CHINA</title>
 +
 +
    <!-- Bootstrap core CSS -->
 +
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 +
 +
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 +
    <!-- <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> -->
 +
 +
    <!-- Custom styles for this template -->
 +
    <!-- <link href="navbar-static-top.css" rel="stylesheet"> -->
 +
 +
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 +
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 +
    <!-- <script src="../../assets/js/ie-emulation-modes-warning.js"></script> -->
 +
 +
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 +
    <!--[if lt IE 9]>
 +
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 +
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 +
    <![endif]-->
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="demo">
+
<div id="dummybodyid">
−
        <div class="container">
+
    <!-- Static navbar -->
−
            <div class="row">
+
    <nav class="navbar navbar-default navbar-static-top">
−
                <div class="col-lg-12">
+
      <div class="container">
−
                    <nav class="navbar navbar-default navbar-mobile bootsnav">
+
        <div class="navbar-header">
−
                        <div class="navbar-header">
+
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
−
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
+
            <span class="sr-only">Toggle navigation</span>
−
                                <i class="fa fa-bars"></i>
+
            <span class="icon-bar"></span>
−
                            </button>
+
            <span class="icon-bar"></span>
−
                        </div>
+
            <span class="icon-bar"></span>
−
                        <div class="collapse navbar-collapse" id="navbar-menu">
+
          </button>
−
                            <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
+
          <a class="navbar-brand" href="#">BIT—CHINA</a>
−
                                <li><a href="#">Home</a></li>
+
        </div>
−
                                <li><a href="#">About Us</a></li>
+
        <div id="navbar" class="navbar-collapse collapse">
−
                                <li class="dropdown">
+
          <ul class="nav navbar-nav">
−
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>
+
            <li class="active"><a href="#">Home</a></li>
−
                                    <ul class="dropdown-menu">
+
            <li><a href="https://2017.igem.org/Team:BIT-China/Achievement">Achievement</a></li>
−
                                        <li><a href="#">Custom Menu</a></li>
+
            <li class="dropdown">
−
                                        <li><a href="#">Custom Menu</a></li>
+
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
−
                                        <li class="dropdown">
+
              <ul class="dropdown-menu">
−
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
+
                <li><a href="#">Description</a></li>
−
                                            <ul class="dropdown-menu">
+
                <li><a href="#">Design</a></li>
−
                                                <li><a href="#">Custom Menu</a></li>
+
                <li><a href="#">Result</a></li>
−
                                                <li><a href="#">Custom Menu</a></li>
+
                <li><a href="#">Proof</a></li>
−
                                                <li class="dropdown">
+
              </ul>
−
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
+
            </li>          
−
                                                    <ul class="dropdown-menu multi-dropdown">
+
            <li><a href="https://2017.igem.org/Team:BIT-China/Modeling">Modeling</a></li>
−
                                                        <li><a href="#">Custom Menu</a></li>
+
            <li><a href="https://2017.igem.org/Team:BIT-China/Notebook">Notebook</a></li>
−
                                                        <li><a href="#">Custom Menu</a></li>
+
            <li><a href="https://2017.igem.org/Team:BIT-China/Team">Team</a></li>
−
                                                        <li><a href="#">Custom Menu</a></li>
+
            <!-- <li class="dropdown">
−
                                                        <li><a href="#">Custom Menu</a></li>
+
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
−
                                                    </ul>
+
              <ul class="dropdown-menu">
−
                                                </li>
+
                <li><a href="#">Description</a></li>
−
                                                <li><a href="#">Custom Menu</a></li>
+
                <li><a href="#">Design</a></li>
−
                                            </ul>
+
                <li><a href="#">Result</a></li>
−
                                        </li>
+
                <li><a href="#">Proof</a></li>
−
                                        <li><a href="#">Custom Menu</a></li>
+
                li role="separator" class="divider"></li>
−
                                        <li><a href="#">Custom Menu</a></li>
+
                <li class="dropdown-header">Nav header</li>
−
                                        <li><a href="#">Custom Menu</a></li>
+
                <li><a href="#">Separated link</a></li>
−
                                        <li><a href="#">Custom Menu</a></li>
+
                <li><a href="#">One more separated link</a></li>
−
                                    </ul>
+
              </ul>
−
                                </li>
+
            </li> -->
−
                                <li class="dropdown">
+
 
−
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
+
          </ul>
−
                                    <ul class="dropdown-menu">
+
          <ul class="nav navbar-nav navbar-right">
−
                                        <li><a href="#">Custom Menu</a></li>
+
            <li><a href="../navbar/">Default</a></li>
−
                                        <li><a href="#">Custom Menu</a></li>
+
            <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
−
                                        <li class="dropdown">
+
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
−
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
+
          </ul>
−
                                            <ul class="dropdown-menu">
+
        </div><!--/.nav-collapse -->
−
                                                <li><a href="#">Custom Menu</a></li>
+
      </div>
−
                                                <li><a href="#">Custom Menu</a></li>
+
    </nav>
−
                                                <li class="dropdown">
+
 
−
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
+
 
−
                                                    <ul class="dropdown-menu multi-dropdown">
+
    <div class="container">
−
                                                        <li><a href="#">Custom Menu</a></li>
+
 
−
                                                        <li><a href="#">Custom Menu</a></li>
+
      <!-- Main component for a primary marketing message or call to action -->
−
                                                        <li><a href="#">Custom Menu</a></li>
+
      <div class="jumbotron">
−
                                                        <li><a href="#">Custom Menu</a></li>
+
        <h1>Navbar example</h1>
−
                                                    </ul>
+
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
−
                                                </li>
+
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
−
                                                <li><a href="#">Custom Menu</a></li>
+
        <p>
−
                                            </ul>
+
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
−
                                        </li>
+
        </p>
−
                                        <li><a href="#">Custom Menu</a></li>
+
      </div>
−
                                        <li><a href="#">Custom Menu</a></li>
+
 
−
                                        <li><a href="#">Custom Menu</a></li>
+
    </div> <!-- /container -->
−
                                        <li><a href="#">Custom Menu</a></li>
+
 
−
                                    </ul>
+
 
−
                                </li>
+
    <!-- Bootstrap core JavaScript
−
                                <li><a href="#">Portfolio</a></li>
+
    ================================================== -->
−
                                <li><a href="#">Contact Us</a></li>
+
    <!-- Placed at the end of the document so the pages load faster -->
−
                            </ul>
+
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
−
                        </div>
+
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
−
                    </nav>
+
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
                </div>
+
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
−
            </div>
+
    <!-- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> -->
−
        </div>
+
</div>
−
    </div>
+
−
</div>
+
−
+
−
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
+
−
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
+
−
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+
−
<script type="text/javascript" src="js/bootsnav.js"></script>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 19:38, 4 August 2017

BIT-CHINA

BIT-CHINA

Navbar example

This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

To see the difference between static and fixed top navbars, just scroll.

View navbar docs »