(Blanked the page) |
|||
(5 intermediate revisions by the same user not shown) | |||
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> | ||
+ | </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> | ||
+ | </li> | ||
+ | <li class="nav-item dropdown"> | ||
+ | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">PARTS</a> | ||
+ | <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 class="nav-item"> | ||
+ | <a class="nav-link" href="#">SAFETY</a> | ||
+ | </li> | ||
+ | <li class="nav-item dropdown"> | ||
+ | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">HUMAN PRACTICE</a> | ||
+ | <div class="dropdown-menu"> | ||
+ | <a href="#" class="drop-item">Human Practices</a> | ||
+ | <a href="#" class="drop-item">Education & Engagement</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="nav-item dropdown"> | ||
+ | <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">AWARDS</a> | ||
+ | <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> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <br> | ||
+ | |||
+ | <div class="container"> | ||
+ | <h3>折叠导航栏</h3> | ||
+ | <p>通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项。</p> | ||
+ | <p>提示: 如果你删除 .navbar-expand-md 类,导航链接会一直隐藏,且切换按钮会一直显示。</p> | ||
+ | </div> | ||
+ | |||
+ | </html> |
Latest revision as of 10:38, 25 July 2019
折叠导航栏
通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项。
提示: 如果你删除 .navbar-expand-md 类,导航链接会一直隐藏,且切换按钮会一直显示。