Difference between revisions of "Template:CIEI-BJ"

Line 38: Line 38:
  
 
<!--http://www.ablanxue.com/prone_3421_1.html-->  
 
<!--http://www.ablanxue.com/prone_3421_1.html-->  
 +
  
 
<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">  
 
<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">  
<div class="Project" display="none">
+
提示1效果
<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>  
 
</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 127: Line 49:
 
         <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" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">Project</a> </li>
+
         <li><a href="https://2016.igem.org/Team:CIEI-BJ/Description">Project</a> </li>
 
         <!--
 
         <!--
 
         <a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>  
 
         <a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>  
Line 150: Line 72:
 
   <!-- /.container-fluid -->  
 
   <!-- /.container-fluid -->  
 
</nav>
 
</nav>
<div class="container">
+
<div class="mydiv1">Here's the example of the menu when mouse moved to project
 
   
 
   
 
</div>
 
</div>

Revision as of 01:56, 3 October 2016

<Welcome to CIEI_BJ Wiki> Bootstrap Product Page Template

Here's the example of the menu when mouse moved to project