Difference between revisions of "Template:UM Macau"

(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:
  
  
 
 
<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>
 
  
  
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