diff options
| author | Jacob Thornton <[email protected]> | 2012-01-08 11:24:16 -0800 |
|---|---|---|
| committer | Jacob Thornton <[email protected]> | 2012-01-08 11:24:16 -0800 |
| commit | c78016e3acaa84adbdde9297c1082825b165f77c (patch) | |
| tree | 8fa8d6725bd712de193629f274e81af4a12deb0d /docs | |
| parent | f1cbd22b99c3fec54d18341c31cfb1c237db44f2 (diff) | |
| parent | cb5245869869d6ee46b47ec75ceee07013acdda0 (diff) | |
| download | bootstrap-c78016e3acaa84adbdde9297c1082825b165f77c.tar.xz bootstrap-c78016e3acaa84adbdde9297c1082825b165f77c.zip | |
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components.html | 89 | ||||
| -rw-r--r-- | docs/scaffolding.html | 6 |
2 files changed, 48 insertions, 47 deletions
diff --git a/docs/components.html b/docs/components.html index bd8753401..2a9d15846 100644 --- a/docs/components.html +++ b/docs/components.html @@ -222,9 +222,12 @@ <h3>Application-style navigation</h3> <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p> <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p> + <h4>With icons</h4> + <p>Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.</p> </div> <div class="span4"> - <h3>Example sidebar navigation</h3> + <h3>Example nav list</h3> + <p>Take a list of links and add <code>class="nav list"</code>:</p> <div class="well" style="padding: 8px 0;"> <ul class="nav list"> <li class="nav-header">List header</li> @@ -237,9 +240,6 @@ <li><a href="#">Help</a></li> </ul> </div> <!-- /well --> - </div> - <div class="span4"> - <h3>Simple markup</h3> <pre class="prettyprint linenums"> <ul class="nav list"> <li class="nav-header"> @@ -255,6 +255,34 @@ </ul> </pre> </div> + <div class="span4"> + <h3>Example with icons</h3> + <p>Same example, but with <code><i></code> tags for icons.</p> + <div class="well" style="padding: 8px 0;"> + <ul class="nav list"> + <li class="nav-header">List header</li> + <li class="active"><a href="#"><i class="home"></i> Home</a></li> + <li><a href="#"><i class="book"></i> Library</a></li> + <li><a href="#"><i class="pencil"></i> Applications</a></li> + <li class="nav-header">Another list header</li> + <li><a href="#"><i class="user"></i> Profile</a></li> + <li><a href="#"><i class="cog"></i> Settings</a></li> + <li><a href="#"><i class="flag"></i> Help</a></li> + </ul> + </div> <!-- /well --> +<pre class="prettyprint linenums"> +<ul class="nav list"> + ... + <li> + <a href="#"> + <i class="book"></i> + Library + </a> + </li> + ... +</ul> +</pre> + </div> </div> @@ -262,23 +290,13 @@ <div class="row"> <div class="span4"> <h3>What's included</h3> - <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:</p> - <ul> - <li>top (default)</li> - <li>right</li> - <li>bottom</li> - <li>left</li> - </ul> + <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p> <p>Changing between them is easy and only requires changing very little markup.</p> - <hr> - <h3>Custom jQuery plugin</h3> - <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p> - <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> </div> - <div class="span8"> + <div class="span4"> <h3>Tabbable example</h3> <p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p> - <div class="tabbable"> + <div class="tabbable" style="margin-bottom: 9px;"> <ul class="nav tabs"> <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> <li><a href="#2" data-toggle="tab">Section 2</a></li> @@ -296,9 +314,16 @@ </div> </div> </div> <!-- /tabbable --> - <hr> - <h3>Straightforward markup</h3> - <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> + </div> + <div class="span4"> + <h3>Custom jQuery plugin</h3> + <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p> + <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> + </div> + </div> + + <h3>Straightforward markup</h3> + <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <pre class="prettyprint linenums"> <div class="tabbable"> <ul class="nav tabs"> @@ -315,8 +340,6 @@ </div> </div> </pre> - </div> - </div> <h3>Tabbable in any direction</h3> <div class="row"> @@ -809,28 +832,6 @@ -<!-- Autocomplete -================================================== --> -<section id="autocomplete"> - <div class="page-header"> - <h1>Autocomplete <small></small></h1> - </div> - -</section> - - - -<!-- Carousel -================================================== --> -<section id="carousel"> - <div class="page-header"> - <h1>Carousel <small></small></h1> - </div> - -</section> - - - <!-- Alerts & Messages ================================================== --> <section id="alerts"> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index bf42d4468..10e5a43be 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -243,11 +243,11 @@ </div> <pre class="prettyprint linenums"> <body> - <div class="fluid-container"> - <div class="sidebar"> + <div class="fluid-container sidebar-left"> + <div class="fluid-sidebar"> ... </div> - <div class="content"> + <div class="fluid-content"> ... </div> </div> |
