mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates
This commit is contained in:
Mark Otto
+131
-42
@@ -227,27 +227,27 @@
|
||||
================================================== -->
|
||||
<section id="sidenav">
|
||||
<div class="page-header">
|
||||
<h1>Side nav <small></small></h1>
|
||||
<h1>Side nav <small>for lists of links</small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Examples</h3>
|
||||
<p>Side navs can be just links, links with headings, and links with icons.</p>
|
||||
<div class="well side-nav">
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li class="active"><a class="nav-item" href="#">Home</a></li>
|
||||
<li><a class="nav-item" href="#">Library</a></li>
|
||||
<li><a class="nav-item" href="#">Profile</a></li>
|
||||
<li><a class="nav-item" href="#">Settings</a></li>
|
||||
<li><a class="nav-item" href="#">Help</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="well side-nav">
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
|
||||
<li><a class="nav-item" href="#">Profile</a></li>
|
||||
<li><a class="nav-item" href="#">Settings</a></li>
|
||||
</ul>
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
|
||||
@@ -255,6 +255,34 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3>Why use it</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Markup</h3>
|
||||
<p>Marking up a side nav is at the core just writing an unordered list of links.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav-group">
|
||||
<li class="active">
|
||||
<a class="nav-item" href="#">Home</a>
|
||||
</li>
|
||||
<li><a class="nav-item" href="#">Library</a></li>
|
||||
<li><a class="nav-item" href="#">Help</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<h6 class="nav-label"></h6>
|
||||
<ul class="nav-group">
|
||||
...
|
||||
</ul>
|
||||
<h6 class="nav-label"></h6>
|
||||
<ul class="nav-group">
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -267,10 +295,12 @@
|
||||
<div class="page-header">
|
||||
<h1>Navbar</h1>
|
||||
</div>
|
||||
<div class="navbar navbar-static" >
|
||||
<h2>Static navbar example</h2>
|
||||
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
|
||||
<div class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="#">Project Name</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@@ -306,20 +336,70 @@
|
||||
</div><!-- /navbar -->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>What is it</h3>
|
||||
<p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
|
||||
<div class="span8">
|
||||
<h3>Navbar scaffolding</h3>
|
||||
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
<p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<br>
|
||||
<h3>Brand name</h3>
|
||||
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a class="brand" href="#">
|
||||
Project name
|
||||
</a>
|
||||
</pre>
|
||||
<br>
|
||||
<h3>Search form</h3>
|
||||
<p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-search">
|
||||
<input type="text" class="search-query pull-left" placeholder="Search">
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Customizable</h3>
|
||||
<p>All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Dropdowns included</h3>
|
||||
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code><li></code> tags also support <code>.active</code> for showing current page selection.</p>
|
||||
<h3>Nav links</h3>
|
||||
<p>Nav items are simple to add via unordered lists.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="active">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
<a href="#"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown">
|
||||
Account
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -507,34 +587,39 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="span6">
|
||||
<h3>Why use them</h3>
|
||||
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<p>A single example shown as it might be displayed across multiple pages.</p>
|
||||
<ul class="breadcrumb">
|
||||
<li class="active">Home</li>
|
||||
</ul>
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li class="active">Middle page</li>
|
||||
<li class="active">Library</li>
|
||||
</ul>
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Middle page</a> <span class="divider">/</span></li>
|
||||
<li class="active">Another one</li>
|
||||
</ul>
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Middle page</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Another one</a> <span class="divider">/</span></li>
|
||||
<li class="active">You are here</li>
|
||||
<li><a href="#">Library</a> <span class="divider">/</span></li>
|
||||
<li class="active">Data</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h3>Markup</h3>
|
||||
<p>HTML is your standard unordered list with links.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="#">Home</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Middle page</a> <span class="divider">/</span></li>
|
||||
<li><a href="#">Another one</a> <span class="divider">/</span></li>
|
||||
<li class="active">You are here</li>
|
||||
<li>
|
||||
<a href="#">Home</a> <span class="divider">/</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Library</a> <span class="divider">/</span>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="#">Data</a>
|
||||
</li>
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
@@ -545,13 +630,14 @@
|
||||
|
||||
|
||||
<!-- Step nav
|
||||
================================================== -->
|
||||
==================================================
|
||||
|
||||
COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
|
||||
|
||||
<section id="stepNav">
|
||||
<div class="page-header">
|
||||
<h1>Step nav <small></small></h1>
|
||||
</div>
|
||||
|
||||
<!-- Step nav -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<p>Placeholder for now!</p>
|
||||
@@ -571,8 +657,8 @@
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
@@ -682,6 +768,9 @@
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Block messages -->
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
|
||||
Reference in New Issue
Block a user