(Header template) |
|||
Line 1: | Line 1: | ||
− | < | + | <html> |
− | < | + | <link rel="stylesheet" type="text/css" |
− | < | + | href="https://2019.igem.org/Template:USTC-Software/css/default?action=raw&ctype=text/css"> |
− | + | <link rel="stylesheet" type="text/css" | |
− | + | href="https://2019.igem.org/Template:USTC-Software/css/bootstrap?action=raw&ctype=text/css"> | |
− | + | <script type="text/javascript" | |
+ | src="https://2019.igem.org/Template:USTC-Software/js/jquery?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" | ||
+ | src="https://2019.igem.org/Template:USTC-Software/js/popper?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" | ||
+ | src="https://2019.igem.org/Template:USTC-Software/js/bootstrap?action=raw&ctype=text/javascript"></script> | ||
− | + | <style> | |
+ | #collapsibleNavbar { | ||
+ | justify-content: center; | ||
+ | } | ||
− | + | .nav-link { | |
− | + | margin-left: 20px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .dropdown-menu.show { | |
− | + | display: flex; | |
+ | flex-direction: column; | ||
+ | text-align: center; | ||
+ | top: 46px; | ||
+ | } | ||
+ | .dropdown-menu.show a:visited { | ||
+ | color: #007bff; | ||
+ | } | ||
+ | </style> | ||
− | + | <nav class="navbar navbar-expand-md navbar-dark bg-primary"> | |
− | + | <a class="navbar-brand" href="#">USTC-SOFTWARE</a> | |
− | + | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> | |
− | + | <span class="navbar-toggler-icon"></span> | |
− | + | </button> | |
− | < | + | <div class="collapse navbar-collapse" id="collapsibleNavbar"> |
− | + | <ul class="navbar-nav"> | |
− | + | <li class="nav-item dropdown"> | |
− | + | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">TEAM</a> | |
− | + | <div class="dropdown-menu"> | |
− | + | <a href="#" class="drop-item">Team Members</a> | |
− | + | <a href="#" class="drop-item">Collaborations</a> | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | <div class=" | + | </li> |
− | < | + | <li class="nav-item dropdown"> |
− | + | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">PROJECT</a> | |
− | + | <div class="dropdown-menu"> | |
− | </ | + | <a href="#" class="drop-item">Description</a> |
+ | <a href="#" class="drop-item">Design</a> | ||
+ | <a href="#" class="drop-item">Experiments</a> | ||
+ | <a href="#" class="drop-item">Notebook</a> | ||
+ | <a href="#" class="drop-item">Contribution</a> | ||
+ | <a href="#" class="drop-item">Results</a> | ||
+ | <a href="#" class="drop-item">Demonstrate</a> | ||
+ | <a href="#" class="drop-item">Improve</a> | ||
+ | <a href="#" class="drop-item">Attributions</a> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</li> | </li> | ||
− | + | <li class="nav-item dropdown"> | |
− | <li class=" | + | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">PARTS</a> |
− | <a class=" | + | <div class="dropdown-menu"> |
− | < | + | <a href="#" class="drop-item">Parts Overview</a> |
− | + | <a href="#" class="drop-item">Basic Parts</a> | |
− | + | <a href="#" class="drop-item">Composite Parts</a> | |
− | + | <a href="#" class="drop-item">Part Collection</a> | |
+ | </div> | ||
</li> | </li> | ||
− | + | <li class="nav-item"> | |
− | <li class=" | + | <a class="nav-link" href="#">SAFETY</a> |
− | <a class=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</li> | </li> | ||
− | + | <li class="nav-item dropdown"> | |
− | <li class=" | + | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">HUMAN PRACTICE</a> |
− | <a class=" | + | <div class="dropdown-menu"> |
− | < | + | <a href="#" class="drop-item">Human Practices</a> |
− | + | <a href="#" class="drop-item">Education & Engagement</a> | |
− | + | </div> | |
− | + | ||
</li> | </li> | ||
− | + | <li class="nav-item dropdown"> | |
− | <li class=" | + | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">AWARDS</a> |
− | <a class=" | + | <div class="dropdown-menu"> |
− | < | + | <a href="#" class="drop-item">Enterpreneurship</a> |
− | + | <a href="#" class="drop-item">Measurement</a> | |
− | + | <a href="#" class="drop-item">Model</a> | |
− | + | <a href="#" class="drop-item">Plant</a> | |
+ | <a href="#" class="drop-item">Software</a> | ||
+ | </div> | ||
</li> | </li> | ||
− | + | </ul> | |
− | + | </div> | |
− | + | </nav> | |
− | + | <br> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="container"> | |
− | + | <h3>折叠导航栏</h3> | |
− | + | <p>通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项。</p> | |
− | + | <p>提示: 如果你删除 .navbar-expand-md 类,导航链接会一直隐藏,且切换按钮会一直显示。</p> | |
− | + | ||
− | </ | + | |
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Latest revision as of 10:49, 25 July 2019
折叠导航栏
通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项。
提示: 如果你删除 .navbar-expand-md 类,导航链接会一直隐藏,且切换按钮会一直显示。