Difference between revisions of "Team:GreatBay China/Collaborations"

Line 1: Line 1:
−
<html><title>GBC-Team</title>
+
<!DOCTYPE html>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<html>
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:GreatBay_China/css/bootstrap.css&action=raw&ctype=text/css" />
+
<head>
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:GreatBay_China/js/jquery.min.js&action=raw&ctype=text/javascript"></script>
+
<meta charset="utf-8">  
−
<script type="text/javascript">
+
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
−
　$(function(){
+
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
　　$('ul li span').hover(function(){
+
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
−
　　 $(this).addClass('hover');
+
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
},function(){
+
</head>
−
$(this).removeClass('hover');
+
−
});
+
−
　　$('ul li').mouseover(function(){
+
−
　 　$(this).children('div').stop().slideDown().parent().siblings().children('div').stop().slideUp();
+
−
});
+
−
　　$('ul li span').mouseleave(function(){
+
−
　 　$(this).siblings('div').stop().slideUp()});
+
−
　　$('ul li div').bind('mouseleave',function(){$(this).stop().slideUp();});
+
−
　})
+
−
</script>
+
−
+
−
<style type="text/css">
+
−
 
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
−
margin-bottom: 0px;
+
−
}
+
−
 
+
−
#top_title,#sideMenu{
+
−
display: none;
+
−
margin-bottom:0;
+
−
}
+
−
 
+
−
 
+
−
#globalWrapper {
+
−
    font-size: 100%;
+
−
}
+
−
 
+
−
#content{
+
−
width:100%;
+
−
height:auto;
+
−
        border: none;
+
−
z-index: -2;
+
−
background-size:100%;
+
−
padding:0 0 0 0;
+
−
margin-top:-12px;
+
−
margin-left:0;
+
−
+
−
}
+
−
 
+
−
html,body{
+
−
background:#FDE6E6;
+
−
font-size: 100%;
+
−
font-family: Gadugi;
+
−
font-weight：70；
+
−
}
+
−
body a{
+
−
transition: 0.5s all;
+
−
-webkit-transition: 0.5s all;
+
−
-o-transition: 0.5s all;
+
−
-moz-transition: 0.5s all;
+
−
-ms-transition: 0.5s all;
+
−
}
+
−
 
+
−
 
+
−
h1,h2,h3,h4,h5,h6,label,p{
+
−
margin:0;
+
−
}
+
−
 
+
−
/* navigator */
+
−
/* the entire div */
+
−
.top-nav{
+
−
z-index:1;
+
−
background-image:url('https://static.igem.org/mediawiki/2018/3/3b/T--GreatBay_China--menu2.png');
+
−
background-repeat:no-repeat;
+
−
background-size:120px;
+
−
background-position:15% 1%;
+
−
position:fixed;
+
−
top:80px;
+
−
right:85%;
+
−
padding-bottom:120px;
+
−
}
+
−
 
+
−
 
+
−
*{
+
−
margin:0; padding:0
+
−
}
+
−
 
+
−
.top-nav a,a:hover{
+
−
text-decoration:none;color:#000;
+
−
}
+
−
/* the menu position and color*/
+
−
.top-nav ul{
+
−
position:relative;
+
−
top:50px;
+
−
list-style:none;margin:0 auto;
+
−
width:90px;
+
−
line-height:2;
+
−
text-align:center;
+
−
font-size:15px;
+
−
padding-bottom: 100px;
+
−
color:#ff954d;
+
−
}
+
−
/* the pull out menu */
+
−
.top-nav ul li{
+
−
position:relative;
+
−
height:31px;
+
−
_float:left;
+
−
}
+
−
/* style for menu */
+
−
.top-nav ul li span,ul li div a{
+
−
color:#ff954d;
+
−
display:block;
+
−
width:85px;
+
−
height:30px;
+
−
line-height:30px;
+
−
text-align:center;
+
−
}
+
−
/* menu when you hover */
+
−
.top-nav ul li .hover{
+
−
background:rgba(255,244,102,0.5);
+
−
}
+
−
/* sub menu when you hover */
+
−
.top-nav ul li div{
+
−
font-size:14px;
+
−
width:90px;
+
−
display:none;
+
−
position:relative;
+
−
left:-80px;
+
−
top:-30px;
+
−
}
+
−
/* link style */
+
−
.top-nav ul li div a{
+
−
background: rgba(255,244,102,0.5);
+
−
color:#ff954d;
+
−
}
+
−
/* submenu link style */
+
−
.top-nav ul li div a:hover{
+
−
color:#ff954d;
+
−
background:#bdff7b;
+
−
}
+
−
/* special for team  */
+
−
.top-nav #active{
+
−
background:rgba(255,244,102,0.5)
+
−
}
+
−
 
+
−
 
+
−
/* logo */
+
−
 
+
−
.logo{
+
−
width:100px;
+
−
position:fixed;
+
−
top:15px;
+
−
left:85%;
+
−
}
+
−
 
+
−
/* head, cat staring at the jar */
+
−
 
+
−
.head{
+
−
z-index: 1;
+
−
    background-image: url('https://static.igem.org/mediawiki/2018/7/74/T--GreatBay_China--Top.png');
+
−
background-size: 100%;
+
−
left:15%;
+
−
position:absolute;
+
−
top:0;
+
−
height:180px;
+
−
width:70%;
+
−
padding:0 0 0 0;
+
−
margin:0 0 0 0;
+
−
}
+
−
/* the purple colomn at middle */
+
−
.rolldown{
+
−
display:inline;
+
−
z-index: -1;
+
−
padding: 1.63em;
+
−
position:absolute;
+
−
width:70%;
+
−
left:15%;
+
−
background:rgba(125, 63, 152, 0.4);
+
−
min-height:2000px;
+
−
padding:0 0 0 0;
+
−
margin:0 0 0 0;
+
−
}
+
−
.rolldown h4{
+
−
  color: #fff;
+
−
margin: 0.22em 0;
+
−
}
+
−
.rolldown p
+
−
{
+
−
  color: #fff;
+
−
  line-height: 2.2em;
+
−
  font-size: 14px;
+
−
  margin: 0 0 0.5em;
+
−
}
+
−
.members
+
−
{
+
−
display:inline-block;
+
−
padding:5px;
+
−
    width：20%；
+
−
}
+
−
.line
+
−
{
+
−
display:block;
+
−
margin:20px;
+
−
}
+
−
</style>
+
−
 
+
−
<!-- <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> -->
+
−
 
+
 
<body>
 
<body>
  
−
<div class="home">
+
<h2>创建模态框（Modal）</h2>
−
<div class="head"></div>
+
<!-- 按钮触发模态框 -->
−
        <div class="logo"><img src="https://static.igem.org/mediawiki/2018/1/14/T--GreatBay_China--logo1.jpg" /></div>
+
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
−
<div class="top-nav">
+
开始演示模态框
−
<ul>
+
</button>
−
<li>
+
<!-- 模态框（Modal） -->
−
                                                <li id="active">
+
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
−
<span>Team</span>
+
<div class="modal-dialog">
−
                                                       
+
<div class="modal-content">
−
<div>
+
<div class="modal-header">
−
                                                       
+
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
−
<a href="https://2018.igem.org/Team:GreatBay_China/Team">Team</a>  
+
&times;
−
<a href="https://2018.igem.org/Team:GreatBay_China/Collaborations">Collaboration</a>
+
</button>
−
<a href="https://2018.igem.org/Team:GreatBay_China/Attributions">Attributions</a>  
+
<h4 class="modal-title" id="myModalLabel">
−
</div>
+
模态框（Modal）标题
−
</li>
+
</h4>
−
<li>
+
</div>
−
<span>Project</span>
+
<div class="modal-body">
−
<div>
+
在这里添加一些文本
−
<a href="https://2018.igem.org/Team:GreatBay_China/Description">Description</a>
+
</div>
−
<a href="https://2018.igem.org/Team:GreatBay_China/Design">Design</a>
+
<div class="modal-footer">
−
<a href="https://2018.igem.org/Team:GreatBay_China/Experiments">Experiments</a>
+
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
−
<a href="https://2018.igem.org/Team:GreatBay_China/Results" >Results</a>
+
</button>
−
<a href="https://2018.igem.org/Team:GreatBay_China/Demonstrate">Demonstrate</a>
+
<button type="button" class="btn btn-primary">
−
<a href="https://2018.igem.org/Team:GreatBay_China/Discussionl" >Discussion</a> 
+
提交更改
−
<a href="https://2018.igem.org/Team:GreatBay_China/Improve" >Improve</a>
+
</button>
−
</div>
+
</div>
−
</li>
+
</div><!-- /.modal-content -->
−
<li>
+
</div><!-- /.modal -->
−
<a href="https://2018.igem.org/Team:GreatBay_China/Parts"><span>Parts</span></a>  
+
−
<div>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Basic_Part">Basic</a>  
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Composite_Part">Composite</a> 
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Part_Collection">Collection</a>
+
−
</div>
+
−
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Human_Practices"><span>HP</span></a>
+
−
<div>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Engagement">Engagement</a>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Applied_Design">Product</a>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/HP/Gold_Integrated">Integrated</a>
+
−
</div>
+
−
</li>
+
−
<li>
+
−
<span>Lab</span>
+
−
<div>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Notebook">Notebook</a>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Interlab">Interlab</a>
+
−
</div>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Judging"><span>Judging</span></a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Safety"><span>Safety</span></a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:GreatBay_China/Model"><span>Model</span></a>
+
−
</li>
+
−
<li>
+
−
+
−
<a href="https://2018.igem.org/Team:GreatBay_China"><span>Home</span></a>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
+
−
+
−
 
+
−
+
−
<div class="rolldown">
+
−
 
+
−
 
+
−
        <div class="logos">
+
−
        <br><br><br><br><br><br><br><br><br><br>
+
−
  <h1>Collaborations</h1><br>
+
−
+
−
<div class='line'>
+
−
<div class=“logos” >
+
−
<img class="photo" id=‘RDFZ’ height="100" src="https://static.igem.org/mediawiki/2018/7/7a/T--GreatBay_China--RDFZlogo.png" />
+
−
<h4>RDFZ_China</h4>
+
−
</div>
+
−
<div class=“logos”  >
+
−
<img class="photo" id=’SMS’ width="240px" src="https://static.igem.org/mediawiki/2018/e/e6/T--GreatBay_China--SMSlogo.jpeg" />
+
−
<h4>SMS_Shenzhen</h4>
+
−
</div>
+
−
<div class=“logos”  >
+
−
<img class="photo" id=‘SZU’ width="214px" src="https://static.igem.org/mediawiki/2018/3/3e/T--GreatBay_China--SZUlogo.png" />
+
−
<h4>SZU_China</h4>
+
−
</div>
+
−
</div>
+
−
 
+
−
        </div>
+
−
 
+
−
 
+
−
   
+
−
 
+
−
+
−
</div>
+
−
 
+
−
<div class="clearfix">  
+
−
</div>
+
 
</div>
 
</div>
−
 
−
 
−
 
−
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:06, 1 October 2018

<!DOCTYPE html> Bootstrap 实例 - 模态框（Modal）插件

创建模态框（Modal）