mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
new navbar ideas
This commit is contained in:
Mark Otto
+74
-76
@@ -3,85 +3,84 @@ layout: page
|
||||
title: Navbar
|
||||
---
|
||||
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="navbar" class="page-header">Navbar</h1>
|
||||
## Default navbar
|
||||
|
||||
<h2 id="navbar-default">Default navbar</h2>
|
||||
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
|
||||
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
|
||||
<h4>Overflowing content</h4>
|
||||
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
|
||||
<ol type="a">
|
||||
<li>Reduce the amount or width of navbar items.</li>
|
||||
<li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
|
||||
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Requires JavaScript</h4>
|
||||
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Changing the collapsed mobile navbar breakpoint</h4>
|
||||
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
|
||||
<h4>Overflowing content</h4>
|
||||
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
|
||||
<ol type="a">
|
||||
<li>Reduce the amount or width of navbar items.</li>
|
||||
<li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
|
||||
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Requires JavaScript</h4>
|
||||
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Changing the collapsed mobile navbar breakpoint</h4>
|
||||
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-example">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</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-secondary">Submit</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</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-secondary">Submit</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="container-fluid">
|
||||
@@ -467,4 +466,3 @@ body { padding-bottom: 70px; }
|
||||
...
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
layout: page
|
||||
title: New navbar
|
||||
---
|
||||
|
||||
Proposal to replace the existing navbar with something simpler and more customizable.
|
||||
|
||||
<div class="navbar navbar-default">
|
||||
<h3 class="navbar-brand pull-left">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default">
|
||||
<h3 class="navbar-brand pull-left">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default">
|
||||
<h3 class="navbar-brand pull-left">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Help</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default">
|
||||
<h3 class="navbar-brand pull-left">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form action="" class="form-inline pull-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-primary" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-inverse">
|
||||
<h3 class="navbar-brand pull-left">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form action="" class="form-inline pull-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-primary" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="navbar navbar-default">
|
||||
<div class="collapse" id="navbar-header">
|
||||
<h3>Collapsed content</h3>
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
</div>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
||||
☰
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user