Difference between revisions of "Template:CIEI-BJ"

Line 23: Line 23:
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
 
     <img src="https://static.igem.org/mediawiki/2016/4/40/T--CIEI-BJ--ProfilePicture.png" width="55" height="55" alt=""/>    </div>
 
     <img src="https://static.igem.org/mediawiki/2016/4/40/T--CIEI-BJ--ProfilePicture.png" width="55" height="55" alt=""/>    </div>
−
      
+
     <script language="javascript" src="jquery-1.4.2.min.js"></script>
 +
<script>
 +
function show(obj,id) {
 +
var objDiv = $("#"+id+"");
 +
$(objDiv).css("display","block");
 +
$(objDiv).css("left", event.clientX);
 +
$(objDiv).css("top", event.clientY + 10);
 +
}
 +
function hide(obj,id) {
 +
var objDiv = $("#"+id+"");
 +
$(objDiv).css("display", "none");
 +
}
 +
</script>
 +
 
 +
<!--http://www.ablanxue.com/prone_3421_1.html-->
 +
 
 +
<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">
 +
<div class="Project" display="none">
 +
<div class="col-lg-9 col-md-12">
 +
<div class="row">
 +
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
 +
          <div class="thumbnail"> <img src="images/400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
 +
            <div class="caption">
 +
              <h3>Description</h3>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
              <hr>
 +
              <p class="text-center"><a href="#description" class="btn btn-info" role="button">Go</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-lg-4 col-md-4 col-sm-6 hidden-sm hidden-xs">
 +
          <div class="thumbnail"> <img src="images/400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
 +
            <div class="caption">
 +
              <h3>Design</h3>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
              <hr>
 +
              <p class="text-center"><a href="https://2016.igem.org/Team:CIEI-BJ/Design" class="btn btn-success" role="button">Go</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-lg-4 col-md-4 col-sm-6 hidden-sm hidden-xs">
 +
          <div class="thumbnail"> <img src="images/400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
 +
            <div class="caption">
 +
              <h3>Experiments</h3>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
              <hr>
 +
              <p class="text-center"><a href="https://2016.igem.org/Team:CIEI-BJ/Experiments" class="btn btn-success" role="button">Go</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-lg-4 col-md-4 col-sm-6 hidden-sm hidden-xs">
 +
          <div class="thumbnail"> <img src="images/400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
 +
            <div class="caption">
 +
              <h3>Proof of Concept</h3>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
              <hr>
 +
              <p class="text-center"><a href="https://2016.igem.org/Team:CIEI-BJ/Proof" class="btn btn-success" role="button">Go</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-lg-4 col-md-4 col-sm-6 hidden-sm hidden-xs">
 +
          <div class="thumbnail"> <img src="images/400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
 +
            <div class="caption">
 +
              <h3>Demonstrate</h3>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
              <hr>
 +
              <p class="text-center"><a href="https://2016.igem.org/Team:CIEI-BJ/Demonstrate" class="btn btn-success" role="button">Go</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col-lg-4 col-md-4 col-sm-6 hidden-sm hidden-xs">
 +
          <div class="thumbnail"> <img src="images/400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
 +
            <div class="caption">
 +
              <h3>Results</h3>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
              <hr>
 +
              <p class="text-center"><a href="https://2016.igem.org/Team:CIEI-BJ/Results" class="btn btn-success" role="button">Go</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
</div>
 +
      <div class="row">
 +
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
 +
          <div class="thumbnail"> <img src="images/400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
 +
            <div class="caption">
 +
              <h3>Notebook</h3>
 +
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
              <hr>
 +
              <p class="text-center"><a href="https://2016.igem.org/Team:CIEI-BJ/Notebook" class="btn btn-info" role="button">Go</a></p>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
</div>
 +
</div>
 +
<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;">
 +
提示2效果
 +
</div>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
 
     <!-- Collect the nav links, forms, and other content for toggling -->
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Line 29: Line 127:
 
         <li class="active"><a href="https://2016.igem.org/Team:CIEI-BJ">Home <span class="sr-only">(current)</span></a> </li>
 
         <li class="active"><a href="https://2016.igem.org/Team:CIEI-BJ">Home <span class="sr-only">(current)</span></a> </li>
 
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Team">Team</a> </li>
 
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Team">Team</a> </li>
−
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Description">Project</a> </li>
+
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Description" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">Project</a> </li>
 +
        <!--
 +
        <a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>
 +
        -->
 
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Parts">Parts</a> </li>
 
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Parts">Parts</a> </li>
 
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Safety">Safety</a> </li>
 
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Safety">Safety</a> </li>
Line 50: Line 151:
 
</nav>
 
</nav>
 
<div class="container">
 
<div class="container">
−
  <div class="row">
+
−
    <p>
+
−
      <header></header>
+
−
    </p>
+
−
  </div>
+
 
</div>
 
</div>
−
<footer class="text-center">
 
−
  <div class="container">
 
−
    <div class="row"></div>
 
−
  </div>
 
−
</footer>
 
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  
 
<!-- This is the jquery-1.11.3.min.js part -->
 
<!-- This is the jquery-1.11.3.min.js part -->

Revision as of 01:54, 3 October 2016

<Welcome to CIEI_BJ Wiki> Bootstrap Product Page Template