1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 07:06:36 +02:00

update navbars in jumbotron, offcanvas, starter examples to flex versions

This commit is contained in:
Mark Otto
2016-12-22 23:08:02 -08:00
committed by Mark Otto
parent 9fd339bdc8
commit 4377e2956b
3 changed files with 93 additions and 34 deletions

View File

@@ -20,19 +20,37 @@
<body> <body>
<nav class="navbar navbar-fixed-top navbar-inverse bg-inverse"> <nav class="navbar navbar-inverse navbar-fixed-top bg-inverse navbar-toggleable-md">
<a class="navbar-brand" href="#">Project name</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<ul class="nav navbar-nav"> <span class="navbar-toggler-icon"></span>
<li class="nav-item active"> </button>
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="navbar-brand" href="#">Navbar</a>
</li>
<li class="nav-item"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<a class="nav-link" href="#">About</a> <ul class="nav navbar-nav">
</li> <li class="nav-item active">
<li class="nav-item"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Contact</a> </li>
</li> <li class="nav-item">
</ul> <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav> </nav>
<!-- Main jumbotron for a primary marketing message or call to action --> <!-- Main jumbotron for a primary marketing message or call to action -->

View File

@@ -19,16 +19,39 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
<div class="container"> <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse navbar-toggleable-md">
<a class="navbar-brand" href="#">Project name</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item active">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> </li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul> </ul>
</div><!-- /.container --> <form class="form-inline my-2 my-lg-0">
</nav><!-- /.navbar --> <input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container"> <div class="container">

View File

@@ -20,19 +20,37 @@
<body> <body>
<nav class="navbar navbar-fixed-top navbar-inverse bg-inverse"> <nav class="navbar navbar-inverse bg-inverse navbar-fixed-top navbar-toggleable-md">
<a class="navbar-brand" href="#">Project name</a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<ul class="nav navbar-nav"> <span class="navbar-toggler-icon"></span>
<li class="nav-item active"> </button>
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="navbar-brand" href="#">Navbar</a>
</li>
<li class="nav-item"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<a class="nav-link" href="#">About</a> <ul class="nav navbar-nav">
</li> <li class="nav-item active">
<li class="nav-item"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Contact</a> </li>
</li> <li class="nav-item">
</ul> <a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav> </nav>
<div class="container"> <div class="container">