Difference between revisions of "Team:USTC-Software/Header"

Line 1: Line 1:
 
<html>
 
<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"
−
<p>hello world</p>
+
    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;
 +
    }
 +
</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>
 
</html>

Revision as of 08:52, 25 July 2019


折叠导航栏

通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。

提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。