<div class="navbar-wrapper">
<div class="container">
- <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<body>
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<body>
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
- <form class="navbar-form navbar-right" role="form">
+ <form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="masthead">
<h3 class="text-muted">Project name</h3>
- <div role="navigation">
+ <nav>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
- </div>
+ </nav>
</div>
<!-- Jumbotron -->
<body>
<!-- Fixed navbar -->
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<body>
<!-- Static navbar -->
- <nav class="navbar navbar-default navbar-static-top" role="navigation">
+ <nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<div class="container">
<!-- Static navbar -->
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<body>
<!-- Fixed navbar -->
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
</ul>
</li>
</ul>
+ <form class="navbar-form navbar-left" role="search">
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Search">
+ </div>
+ <button type="submit" class="btn btn-default">Submit</button>
+ </form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
/* Account for fixed navbar */
body {
- min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}
+body,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ min-width: 970px;
+}
+
/* Don't let the lead text change font-size. */
.lead {
font-size: 16px;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
+ visibility: visible !important;
}
.navbar-toggle {
color: #999 !important;
background-color: transparent !important;
}
+
+/* Undo form expansion */
+.navbar-form {
+ float: left;
+ width: auto;
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-right: 0;
+ margin-left: 0;
+ border: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Copy-pasted from forms.less since we mixin the .form-inline styles. */
+.navbar-form .form-group {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+
+.navbar-form .form-control {
+ display: inline-block;
+ width: auto;
+ vertical-align: middle;
+}
+
+.navbar-form .form-control-static {
+ display: inline-block;
+}
+
+.navbar-form .input-group {
+ display: inline-table;
+ vertical-align: middle;
+}
+
+.navbar-form .input-group .input-group-addon,
+.navbar-form .input-group .input-group-btn,
+.navbar-form .input-group .form-control {
+ width: auto;
+}
+
+.navbar-form .input-group > .form-control {
+ width: 100%;
+}
+
+.navbar-form .control-label {
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+
+.navbar-form .radio,
+.navbar-form .checkbox {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ vertical-align: middle;
+}
+
+.navbar-form .radio label,
+.navbar-form .checkbox label {
+ padding-left: 0;
+}
+
+.navbar-form .radio input[type="radio"],
+.navbar-form .checkbox input[type="checkbox"] {
+ position: relative;
+ margin-left: 0;
+}
+
+.navbar-form .has-feedback .form-control-feedback {
+ top: 0;
+}
</head>
<body>
- <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+ <nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
- <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
+ <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<div class="container">
- <form class="form-signin" role="form">
+ <form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<body>
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<body>
<!-- Fixed navbar -->
- <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<body role="document">
<!-- Fixed navbar -->
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
- <h1>Hello, world!</h1>
- <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
- <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
+ <h1>Theme example</h1>
+ <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>