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

Line 1: Line 1:
 
{{BIT-China}}
 
{{BIT-China}}
−
 
 
<html>
 
<html>
 +
<head>
 +
    <meta charset="utf-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
 +
    <!-- <link rel="icon" href="../../favicon.ico"> -->
  
 +
    <title>BIT-CHINA</title>
  
 +
    <!-- Bootstrap core CSS -->
 +
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
−
<!-- <div class="column full_size" >
+
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 +
    <!-- <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> -->
  
−
<h1>Team</h1>
+
    <!-- Custom styles for this template -->
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
    <!-- <link href="navbar-static-top.css" rel="stylesheet"> -->
−
</div>
+
  
−
<div class="clear"></div>
+
    <!-- 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> -->
  
−
<div class="column half_size" >
+
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
−
<h5>Inspiration</h5>
+
    <!--[if lt IE 9]>
−
<p>You can look at what other teams did to get some inspiration! <br />
+
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
−
Here are a few examples:</p>
+
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
−
<ul>
+
    <![endif]-->
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
</head>
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
<body>
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
<div id="dummybodyid">
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
    <!-- Static navbar -->
−
</ul>
+
    <nav class="navbar navbar-default navbar-static-top">
 +
      <div class="container">
 +
        <div class="navbar-header">
 +
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 +
            <span class="sr-only">Toggle navigation</span>
 +
            <span class="icon-bar"></span>
 +
            <span class="icon-bar"></span>
 +
            <span class="icon-bar"></span>
 +
          </button>
 +
          <a class="navbar-brand" href="#">BIT—CHINA</a>
 +
        </div>
 +
        <div id="navbar" class="navbar-collapse collapse">
 +
          <ul class="nav navbar-nav">
 +
            <li class="active"><a href="#">Home</a></li>
 +
            <li><a href="https://2017.igem.org/Team:BIT-China/Achievement">Achievement</a></li>
 +
            <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
 +
              <ul class="dropdown-menu">
 +
                <li><a href="#">Description</a></li>
 +
                <li><a href="#">Design</a></li>
 +
                <li><a href="#">Result</a></li>
 +
                <li><a href="#">Proof</a></li>
 +
              </ul>
 +
            </li>           
 +
            <li><a href="https://2017.igem.org/Team:BIT-China/Modeling">Modeling</a></li>
 +
            <li><a href="https://2017.igem.org/Team:BIT-China/Notebook">Notebook</a></li>
 +
            <li><a href="https://2017.igem.org/Team:BIT-China/Team">Team</a></li>
 +
            <!-- <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
 +
              <ul class="dropdown-menu">
 +
                <li><a href="#">Description</a></li>
 +
                <li><a href="#">Design</a></li>
 +
                <li><a href="#">Result</a></li>
 +
                <li><a href="#">Proof</a></li>
 +
                li role="separator" class="divider"></li>
 +
                <li class="dropdown-header">Nav header</li>
 +
                <li><a href="#">Separated link</a></li>
 +
                <li><a href="#">One more separated link</a></li>
 +
              </ul>
 +
            </li> -->
  
−
</div>
+
          </ul>
 +
          <ul class="nav navbar-nav navbar-right">
 +
            <li><a href="../navbar/">Default</a></li>
 +
            <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
 +
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
 +
          </ul>
 +
        </div><!--/.nav-collapse -->
 +
      </div>
 +
    </nav>
  
−
<div class="column half_size" >
 
−
<h5>What should this page contain?</h5>
 
−
<ul>
 
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
 
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
 
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
 
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
 
−
</ul>
 
−
</div>
 
  
 +
    <div class="container">
  
 +
      <!-- Main component for a primary marketing message or call to action -->
 +
      <div class="jumbotron">
 +
        <h1>Navbar example</h1>
 +
        <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>
 +
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
 +
        <p>
 +
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
 +
        </p>
 +
      </div>
  
−
</div> -->
+
    </div> <!-- /container -->
  
  
−
 
+
    <!-- Bootstrap core JavaScript
−
 
+
    ================================================== -->
−
 
+
    <!-- Placed at the end of the document so the pages load faster -->
−
 
+
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
−
 
+
     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
−
<head>
+
     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
<meta charset="UTF-8">
+
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
−
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
    <!-- <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> -->
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
</div>
−
<title>3种基于Bootstrap的超酷Tabs选项卡UI设计|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
+
−
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+
−
    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
+
−
<style type="text/css">
+
−
            .demo{
+
−
                width: 100%;
+
−
                height: 600px;
+
−
                min-height: 600px;
+
−
            }
+
−
        .tab .nav-tabs{
+
−
                border-bottom:0 none;
+
−
                background: #eaeaea;
+
−
                border-radius: 0 20px 0 20px;
+
−
            }
+
−
            .tab .nav-tabs li {
+
−
                padding: 0;
+
−
            }
+
−
            .tab .nav-tabs li a{
+
−
                background: transparent;
+
−
                border-radius: 0;
+
−
                font-size: 16px;
+
−
                border: none;
+
−
                color: #333;
+
−
                padding: 12px 22px;
+
−
            }
+
−
            .tab .nav-tabs li a i{
+
−
                margin-right:10px;
+
−
                color:#775ba3;
+
−
            }
+
−
            .tab .nav-tabs li:first-child a{
+
−
                border-bottom-left-radius:20px;
+
−
            }
+
−
            .tab .nav-tabs li:last-child a {
+
−
                border-top-right-radius: 20px;
+
−
            }
+
−
            .tab .nav-tabs li.active a,
+
−
            .tab .nav-tabs li.active a i{
+
−
                border: 0 none;
+
−
                background:#775ba3;
+
−
                color:#fff;
+
−
            }
+
−
            .tab .nav-tabs li.active a:after{
+
−
                content: "";
+
−
                position: absolute;
+
−
                left: 45%;
+
−
                bottom: -14px;
+
−
                border: 7px solid transparent;
+
−
                border-top: 7px solid #775ba3;
+
−
            }
+
−
            .tab .tab-content{
+
−
                padding:12px;
+
−
                color:#5a5c5d;
+
−
                font-size: 14px;
+
−
                line-height:24px;
+
−
                margin-top: 25px;
+
−
                border-bottom:3px solid #775ba3;
+
−
            }
+
−
            @media only screen and (max-width: 480px) {
+
−
                .tab .nav-tabs,
+
−
                .tab .nav-tabs li{
+
−
                    width:100%;
+
−
                    background:transparent;
+
−
                }
+
−
                .tab .nav-tabs li.active a{
+
−
                    border-radius:10px 10px 0 0;
+
−
                }
+
−
                .tab .nav-tabs li:first-child a{
+
−
                    border-bottom-left-radius:0;
+
−
                }
+
−
                .tab .nav-tabs li a{
+
−
                    margin-bottom:10px;
+
−
                    border:1px solid lightgray;
+
−
                }
+
−
                .tab .nav-tabs li.active a:after{
+
−
                    border:none;
+
−
                }
+
−
            }
+
−
</style>
+
−
<!--[if IE]>
+
−
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
+
−
<![endif]-->
+
−
</head>
+
−
<body>
+
−
<div class="htmleaf-container">
+
−
<div class="demo">
+
−
                            <div class="container">
+
−
                                <div class="row text-center">
+
−
                                    <h1 class="white">title</h1>
+
−
                                </div>
+
−
 
+
−
                                <div class="row">
+
−
                                    <div class="col-lg-12">
+
−
                                        <div class="tab" role="tabpanel">
+
−
                                            <!-- Nav tabs -->
+
−
                                            <ul class="nav nav-tabs" role="tablist">
+
−
                                                <li role="presentation" class="active col-lg-4"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-envelope-o"></i>Section 1</a></li>
+
−
                                                <li role="presentation" class="col-lg-4"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cubes"></i>Section 2</a></li>
+
−
                                                <li role="presentation" class="col-lg-4"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comments"></i>Section 3</a></li>
+
−
                                            </ul>
+
−
                                            <!-- Tab panes -->
+
−
                                            <div class="tab-content">
+
−
                                                <div role="tabpanel" class="tab-pane fade in active" id="Section1">
+
−
                                                    <p>1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.</p>
+
−
                                                </div>
+
−
                                                <div role="tabpanel" class="tab-pane fade" id="Section2">
+
−
                                                    <p>2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.</p>
+
−
                                                </div>
+
−
                                                <div role="tabpanel" class="tab-pane fade" id="Section3">
+
−
                                                    <p>3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis. </p>
+
−
                                                </div>
+
−
                                            </div>
+
−
                                        </div>
+
−
                                    </div>
+
−
                                </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>
+
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 02:34, 5 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 »