(Prototype team template page) |
|||
Line 45: | Line 45: | ||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
</script> | </script> | ||
+ | |||
+ | <script src="https://2019.igem.org/wiki/index.php?title=Template:UM_MACAU/ jquery.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script src="https://2019.igem.org/wiki/index.php?title=Template:UM_MACAU/ bootstrap.js&action=raw&ctype=text/javascript"></script> | ||
Line 549: | Line 552: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Line 810: | Line 799: | ||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
+ | <nav class="navbar navbar-expand-lg navbar-light bg-light"> | ||
+ | <a class="navbar-brand" href="#">Navbar</a> | ||
+ | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
+ | <span class="navbar-toggler-icon"></span> | ||
+ | </button> | ||
+ | |||
+ | <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||
+ | <ul class="navbar-nav mr-auto"> | ||
+ | <li class="nav-item active"> | ||
+ | <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#">Link</a> | ||
+ | </li> | ||
+ | <li class="nav-item dropdown"> | ||
+ | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | ||
+ | Dropdown | ||
+ | </a> | ||
+ | <div class="dropdown-menu" aria-labelledby="navbarDropdown"> | ||
+ | <a class="dropdown-item" href="#">Action</a> | ||
+ | <a class="dropdown-item" href="#">Another action</a> | ||
+ | <div class="dropdown-divider"></div> | ||
+ | <a class="dropdown-item" href="#">Something else here</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <form class="form-inline my-2 my-lg-0"> | ||
+ | <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> | ||
+ | <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> | ||
+ | </form> | ||
+ | </div> | ||
+ | </nav> | ||
+ | This example uses color (bg-light) and spacing (my-2, my-lg-0, mr-sm-0, my-sm-0) utility classes. | ||
+ | |||
+ | Brand | ||
+ | The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. | ||
+ | |||
+ | Navbar | ||
+ | Navbar | ||
+ | Copy | ||
+ | <!-- As a link --> | ||
+ | <nav class="navbar navbar-light bg-light"> | ||
+ | <a class="navbar-brand" href="#">Navbar</a> | ||
+ | </nav> | ||
+ | |||
+ | <!-- As a heading --> | ||
+ | <nav class="navbar navbar-light bg-light"> | ||
+ | <span class="navbar-brand mb-0 h1">Navbar</span> | ||
+ | </nav> | ||
+ | |||
+ | |||
+ | <div class="igem_2019_team_mobile_bar"> | ||
+ | |||
+ | <div class="igem_logo_mobile"> | ||
+ | <img src="https://static.igem.org/mediawiki/2019/3/3c/Igem_mobile_menu_logo.svg"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="igem_menu_control_mobile"> | ||
+ | <img id="menu_control_image" src="https://static.igem.org/mediawiki/2019/e/ee/2019_team_menu_icon.svg"> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
<div class="igem_2019_team_content"> | <div class="igem_2019_team_content"> |
Revision as of 13:53, 18 July 2019
This example uses color (bg-light) and spacing (my-2, my-lg-0, mr-sm-0, my-sm-0) utility classes. Brand The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles. Navbar Navbar Copy