From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- docs/components.html | 171 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 130 insertions(+), 41 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5c25a98a4..5bafc5a60 100644 --- a/docs/components.html +++ b/docs/components.html @@ -227,27 +227,27 @@ ================================================== -->
-

Side nav

+

Side nav for lists of links

+

Examples

+

Side navs can be just links, links with headings, and links with icons.

-
Your account
+
Your account
+ -
-
-
-
Your account
+
+

Why use it

+

+
+
+

Markup

+

Marking up a side nav is at the core just writing an unordered list of links.

+
+  <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>
+
+

Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

+
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+
+
@@ -267,10 +295,12 @@

Navbar

-
+

Static navbar example

+

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

+
- Project Name + Project name
-
-

What is it

-

Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

-
-
-

Customizable

-

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.

+
+

Navbar scaffolding

+

The navbar requires only a few divs to structure it well for static or fixed display.

+
+<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container" style="width: auto;">
+      ...
+    </div>
+  </div>
+</div>
+
+

To make the navbar fixed, swamp the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

+
+<div class="navbar navbar-fixed">
+  ...
+</div>
+
+
+

Brand name

+

A simple link to show your brand or project name only requires an anchor tag.

+
+<a class="brand" href="#">
+  Project name
+</a>
+
+
+

Search form

+

Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

+
+<form class="navbar-search">
+  <input type="text" class="search-query pull-left" placeholder="Search">
+</form>
+
-

Dropdowns included

-

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 <li> tags also support .active for showing current page selection.

+

Nav links

+

Nav items are simple to add via unordered lists.

+
+<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
+
+

Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

+
+<ul class="nav">
+  <li class="dropdown">
+    <a href="#"
+          class="dropdown-toggle"
+          data-toggle="dropdown">
+          Account
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+
-

Note: When using the navbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.

@@ -507,34 +587,39 @@
-
-

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.

-
-
+
+

Why use them

+

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.

+ +

Examples

+

A single example shown as it might be displayed across multiple pages.

  • Home
  • Home /
    • -
  • Middle page
    • -
- +
+
+

Markup

+

HTML is your standard unordered list with links.

 <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>
@@ -545,13 +630,14 @@ +================================================== + +COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. +

Step nav

- -

Placeholder for now!

@@ -571,8 +657,8 @@
-
+--> @@ -682,6 +768,9 @@
+ +
+
-- cgit v1.2.3