Bootstrap

-- cgit v1.2.3 From df869f1eb074f5c2baaaf744f333c5f5d6ce0bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:45:37 -0700 Subject: fix grids --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 58fbecc39..7ed6c68ac 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,7 +27,7 @@ - +

Bootstrap

-- cgit v1.2.3 From c1c7528dd9f0617cb65bc5fac7aa6b2cfc2eb822 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:48:03 -0700 Subject: drop the side nav, restore topbar --- docs/base-css.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 7ed6c68ac..56756b81f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -29,6 +29,50 @@ + +

+ + Bootstrap +

+ Overview +
+ Scaffolding +
+ Base CSS +
+ Components +
+ Javascript plugins +
+ Using LESS +
+ Customize +
+ Examples +

Bootstrap

Date: Thu, 7 Jun 2012 22:10:36 -0700 Subject: restore top navs entirely --- docs/base-css.html | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 56756b81f..e012f2741 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -33,7 +33,7 @@ ================================================== -->

Bootstrap

- Scaffolding -
- Global styles
- Grid system
- Fluid grid system
- Customizing
- Layouts
- Responsive design
-
- Base CSS -
- Typography
- Code
- Tables
- Forms
- Buttons
- Icons by Glyphicons
-
- Components -
- Button groups
- Button dropdowns
- Nav, tabs, pills
- Navbar
- Breadcrumbs
- Pagination
- Labels
- Badges
- Typography
- Thumbnails
- Alerts
- Progress bars
- Miscellaneous
-
- Javascript -
- All plugins
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
-
- LESS -
- Built with Less
- Variables
- Mixins
- Compiling Bootstrap
-
- Customize -
- Examples -

-- cgit v1.2.3 From aff3694f28946a0640f15dc07591dbfb332fcbaf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 12:58:55 -0700 Subject: remove mention of prettify from docs, fix docs subnav width when fixed --- docs/base-css.html | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index de0363dd4..084654b27 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -424,19 +424,6 @@ For example, <code>section</code> should be wrapped as inline.

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

- -

Google Prettify

Take the same <pre> element and add two optional classes for enhanced rendering.

-<p>Sample text here...</p>
-

-<pre class="prettyprint
-     linenums">
-  &lt;p&gt;Sample text here...&lt;/p&gt;
-</pre>
-

Download google-code-prettify and view the readme for how to use.

@@ -448,6 +435,8 @@ For example, <code>section</code> should be wrapped as inline.

Tables For, you guessed it, tabular data

+ +

Table markup

-- cgit v1.2.3 From ca63ea2f26facca1510390f85eed77d55f8f2b89 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 13:15:28 -0700 Subject: overhaul tables docs for more streamlined content --- docs/base-css.html | 299 +++++++++++++++++++---------------------------------- 1 file changed, 105 insertions(+), 194 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 084654b27..71f8da87e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -435,150 +435,8 @@ For example, <code>section</code> should be wrapped as inline.

Tables For, you guessed it, tabular data

- - -

Table markup

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Tag	Description
- `<table>` -	- Wrapping element for displaying data in a tabular format -
- `<thead>` -	- Container element for table header rows (`<tr>`) to label table columns -
- `<tbody>` -	- Container element for table rows (`<tr>`) in the body of the table -
- `<tr>` -	- Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row -
- `<td>` -	- Default table cell -
- `<th>` -	- Special table cell for column (or row, depending on scope and placement) labels - Must be used within a `<thead>` -
- `<caption>` -	- Description or summary of what the table holds, especially useful for screen readers -

-<table>
-  <thead>
-    <tr>
-      <th>…</th>
-      <th>…</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>…</td>
-      <td>…</td>
-    </tr>
-  </tbody>
-</table>
-

- - -

Table options

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name	Class	Description
Default	None	No styles, just columns and rows
Basic	- `.table` -	Only horizontal lines between rows
Bordered	- `.table-bordered` -	Rounds corners and adds outer border
Zebra-stripe	- `.table-striped` -	Adds light gray background color to odd rows (1, 3, 5, etc)
Condensed	- `.table-condensed` -	Cuts vertical padding in half, from 8px to 4px, within all `td` and `th` elements

- - -

Example tables

- -

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

@@ -617,9 +475,15 @@ For example, <code>section</code> should be wrapped as inline. </table> -

2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

+ +

+ + +

Optional classes

Add any of the follow classes to the .table base class.

+ +

`.table-striped`

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

@@ -658,9 +522,8 @@ For example, <code>section</code> should be wrapped as inline. </table> - -

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

`.table-bordered`

Add borders and rounded corners to the table.

@@ -703,8 +566,8 @@ For example, <code>section</code> should be wrapped as inline. </table> -

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

`.table-condensed`

Makes tables more compact by cutting cell padding in half.

@@ -743,48 +606,96 @@ For example, <code>section</code> should be wrapped as inline. -

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Full name
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

-<table class="table table-striped table-bordered table-condensed">
-  ...
+  
+
+
+  Supported table markup
+  List of supported table HTML elements and how they should be used.
+  
+    +      +      +    
+    
+      
+        
+        
+      
+    
+    
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+  


Tag Description

+          <table>
+        
+          Wrapping element for displaying data in a tabular format
+        

+          <thead>
+        
+          Container element for table header rows (<tr>) to label table columns
+        

+          <tbody>
+        
+          Container element for table rows (<tr>) in the body of the table
+        

+          <tr>
+        
+          Container element for a set of table cells (<td> or <th>) that appears on a single row
+        

+          <td>
+        
+          Default table cell
+        

+          <th>
+        
+          Special table cell for column (or row, depending on scope and placement) labels

+          Must be used within a <thead>
+        

+          <caption>
+        
+          Description or summary of what the table holds, especially useful for screen readers
+        
++<table>
+  <thead>
+    <tr>
+      <th>…</th>
+      <th>…</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>…</td>
+      <td>…</td>
+    </tr>
+  </tbody>
 </table>
 
 
-- 
cgit v1.2.3


From c65006601e65cbfa23611f55c0af314fc762d84d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 9 Jun 2012 19:15:46 -0700
Subject: overhaul forms docs to simplify presentation of everything, reduce
 text, and increase visibility of examples

---
 docs/base-css.html | 755 +++++++++++++++++++++++++++++------------------------
 1 file changed, 409 insertions(+), 346 deletions(-)

(limited to 'docs/base-css.html')

diff --git a/docs/base-css.html b/docs/base-css.html
index 71f8da87e..0525a9674 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -710,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.
     Forms

Tag	Description
+ `<table>` +	+ Wrapping element for displaying data in a tabular format +
+ `<thead>` +	+ Container element for table header rows (`<tr>`) to label table columns +
+ `<tbody>` +	+ Container element for table rows (`<tr>`) in the body of the table +
+ `<tr>` +	+ Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row +
+ `<td>` +	+ Default table cell +
+ `<th>` +	+ Special table cell for column (or row, depending on scope and placement) labels + Must be used within a `<thead>` +
+ `<caption>` +	+ Description or summary of what the table holds, especially useful for screen readers +

Controls and layouts

Forms include styles for all the base form controls like input, textarea, and select you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.

Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.

Error, warning, and success states are included for form controls, as wel as disabled.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name	Class	Description
Vertical (default)	`.form-vertical` (not required)	Stacked, left-aligned labels over controls
Inline	`.form-inline`	Left-aligned label and inline-block controls for compact style
Search	`.form-search`	Extra-rounded text input for a typical search aesthetic
Horizontal	`.form-horizontal`	Float left, right-aligned labels on same line as controls

- -

Example forms using just form controls, no extra markup

Basic form

Smart and lightweight defaults without extra markup.

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

Label name - +

Example block-level help text here.

Check me out @@ -761,7 +724,7 @@ For example, <code>section</code> should be wrapped as inline.

 <form class="well">
   <label>Label name</label>
-  <input type="text" class="span3" placeholder="Type something…">
+  <input type="text" placeholder="Type something…">
   <span class="help-block">Example block-level help text here.</span>
   <label class="checkbox">
     <input type="checkbox"> Check me out
@@ -770,21 +733,28 @@ For example, <code>section</code> should be wrapped as inline.
 </form>

+ +

+ + +

Optional layouts

Included with Bootstrap are three optional form layouts for common use cases.

Search form

Add .form-search to the form and .search-query to the input.

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

-<form class="well form-search">
+<form class="form-search">
   <input type="text" class="input-medium search-query">
   <button type="submit" class="btn">Search</button>
 </form>

Inline form

Add .form-inline to finesse the vertical alignment and spacing of form controls.

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

-<form class="well form-inline">
+<form class="form-inline">
   <input type="text" class="input-small" placeholder="Email">
   <input type="password" class="input-small" placeholder="Password">
   <label class="checkbox">
@@ -804,331 +774,424 @@ For example, <code>section</code> should be wrapped as inline.
 </form>

-
- -

Horizontal forms

Shown on the right are all the default form controls we support. Here's the bulleted list:

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

text inputs (text, password, email, etc)
checkbox
radio
select
multiple select
file input
textarea
Add .form-horizontal to the form
Wrap labels and controls in .control-group
Add .control-label to the label
Wrap any associated controls in .controls for proper alignment

- -

- Text input -

- -

In addition to freeform text, any HTML5 text-based input appears like so.

- Checkbox -

- - - Option one is this and that—be sure to include why it's great - -

- Select list -

- -

- Multicon-select -

- -

- File input -

- -

+ +

+ Email +

- Textarea -

- -

+ Password +

- - +

+ + Remember me + +

Example markup

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

 <form class="form-horizontal">
-  <fieldset>
-    <legend>Legend text</legend>
-    <div class="control-group">
-      <label class="control-label" for="input01">Text input</label>
-      <div class="controls">
-        <input type="text" class="input-xlarge" id="input01">
-        <p class="help-block">Supporting help text</p>
-      </div>
+  <div class="control-group">
+    <label class="control-label" for="">Email</label>
+    <div class="controls">
+      <input type="text" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="">Password</label>
+    <div class="controls">
+      <input type="password" placeholder="Password">
     </div>
-  </fieldset>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
 </form>

-
-

Form control states

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

Form validation

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

+ + +

Supported form controls

Examples of standard form controls supported in an example form layout.

+ +

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Requires the use of a specified type at all times.

-<fieldset
-  class="control-group error">
-  …
-</fieldset>
+<input type="text" placeholder="Text input">

- Focused input -

- -

- Uneditable input -

- Some value here -

- Disabled input -

- -

- Disabled checkbox -

- - - This is a disabled checkbox - -

- Input with warning -

- - Something may have gone wrong -

- Input with error -

- - Please correct the error -

- Input with success -

- - Woohoo! -

- Select with success -

- - Woohoo! -

- - -

Textarea

Form control which supports multiple lines of text. Change row attribute as necessary.

+ +

+<textarea id="textarea" rows="3"></textarea>
+

+ +

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

+ +

+<label class="checkbox">
+  <input type="checkbox" value="">
+  Option one is this and that—be sure to include why it's great
+</label>
+
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+  Option one is this and that—be sure to include why it's great
+</label>
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+  Option two can be something else and selecting it will deselect option one
+</label>
+

+ +

Inline checkboxes

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

+ +

+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+

+ +

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.

+ +

+<select>
+  <option>something</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+

+ + +

Extending form controls

Prepend & append inputs

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

Checkboxes and radios

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

Inline forms and append/prepend

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

Form help text

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

- -

- Form grid sizes -

- - - - - - -

Use the same .span* classes from the grid system for input sizes.

- Alternate sizes -

- - - -

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

- Prepended text -

- @ -

Here's some help text

- Appended text -

- .00 -

- Here's more help text -

- Append and prepend -

- $.00 -

- Append with button -

- -

- Two-button append -

- -

- Inline checkboxes -

- - 1 - - - 2 - - - 3 - -

- Checkboxes -

- - - Option one is this and that—be sure to include why it's great - - - - Option two can also be checked and included in form results - - - - Option three can—yes, you guessed it—also be checked and included in form results - -

Note: Labels surround all the options for much larger click areas and a more usable form.

Adding on top of existing browser controls, Bootstrap includes other useful form components.

+ +

Prepended and appended inputs

Add text or buttons before or after any text-based input.

+ +

Default options

Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

+ +

+ @ +

+
+

+ .00 +

+ +

+<div class="input-prepend">
+  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+</div>
+<div class="input-append">
+  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+

+ +

Combined

Use both classes and two instances of .add-on to prepend and append an input.

+ +

+<div class="input-prepend input-append">
+  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+

+ +

Buttons instead of text

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

+ +

+<div class="input-append">
+  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+</div>
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+</div>
+

+ +

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

+ +

Relative sizing

+ +

+<input class="input-mini" type="text">
+<input class="input-small" type="text">
+<input class="input-medium" type="text">
+<input class="input-large" type="text">
+<input class="input-xlarge" type="text">
+<input class="input-xxlarge" type="text">
+

+ +

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

+ +

+<input class="span1" type="text">
+<input class="span2" type="text">
+<input class="span3" type="text">
+

+ +

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

+ +

+  <span class="input-xlarge uneditable-input">Some value here</span>
+

+ +

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

+ +

+<div class="form-actions">
+  <button type="submit" class="btn btn-primary">Save changes</button>
+  <button class="btn">Cancel</button>
+</div>
+

+ +

Help text

Inline and block level support for help text that appears around form controls.

Inline help

+ +

+<span class="help-inline">Inline help text</span>
+

+ +

Block help

+ +

+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+

+ + +

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

+ +

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

+ +

+<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+

+ +

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

+ +

+<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+

+ +

Validation states

Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

+ +

+<div class="control-group warning">
+  <label class="control-label" for="inputWarning">Input with warning</label>
+  <div class="controls">
+    <input type="text" id="inputWarning">
+    <span class="help-inline">Something may have gone wrong</span>
+  </div>
+</div>
+<div class="control-group error">
+  <label class="control-label" for="inputError">Input with error</label>
+  <div class="controls">
+    <input type="text" id="inputError">
+    <span class="help-inline">Please correct the error</span>
+  </div>
+</div>
+<div class="control-group success">
+  <label class="control-label" for="inputSuccess">Input with success</label>
+  <div class="controls">
+    <input type="text" id="inputSuccess">
+    <span class="help-inline">Woohoo!</span>
+  </div>
+</div>
+

+ -- cgit v1.2.3 From fc2481b8e57ec79a4ec0e7f6d26f4c8492bc84f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 19:26:06 -0700 Subject: fix form display issue in docs --- docs/base-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 0525a9674..979a87385 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -963,7 +963,7 @@ For example, <code>section</code> should be wrapped as inline.

Default options

Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

-- cgit v1.2.3 From 5ef2b6561a8409cc26c413e4a152df89a383f0e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 22:47:45 -0700 Subject: realign icons to five cols, fix buttons --- docs/base-css.html | 92 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 61 insertions(+), 31 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 979a87385..618dee29a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1202,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline. + +

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

@@ -1249,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Multiple sizes

+ +

+ + +

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

@@ -1269,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline.

-
-

Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

+ + +

Disabled state

Make buttons look unclickable by fading them back 50%.

+ +

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

- - -

+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

Button element

Add the disabled attribute to <button> buttons.

+ + +

+<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button class="btn btn-large" disabled>Button</button>
+

+ + +

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

- -Link - - - + + Link + + +

 <a class="btn" href="">Link</a>
@@ -1346,6 +1372,10 @@ For example, <code>section</code> should be wrapped as inline.
          icon-download
          icon-upload
          icon-inbox
+      
+

icon-play-circle
icon-repeat
icon-refresh
icon-lock
icon-flag
icon-headphones

icon-volume-off
icon-volume-down
icon-volume-up
icon-align-right
icon-align-justify
icon-list

icon-indent-left
icon-indent-right
icon-facetime-video
icon-move
icon-step-backward
icon-fast-backward

icon-backward
icon-play
icon-pause
icon-minus-sign
icon-remove-sign
icon-ok-sign

icon-question-sign
icon-info-sign
icon-screenshot
icon-leaf
icon-fire
icon-eye-open

icon-eye-close
icon-warning-sign
icon-plane
icon-random
icon-comment
icon-magnet

icon-chevron-up
icon-chevron-down
icon-retweet

Date: Sat, 9 Jun 2012 23:26:46 -0700 Subject: redo icons section --- docs/base-css.html | 94 ++++++++++++++++++++++++------------------------------ 1 file changed, 41 insertions(+), 53 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 618dee29a..ee12d62e2 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1341,6 +1341,9 @@ For example, <code>section</code> should be wrapped as inline. + +

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

@@ -1504,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline.

-
+

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

 <i class="icon-search"></i>

@@ -1521,66 +1520,55 @@ For example, <code>section</code> should be wrapped as inline.

 <i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

As visuals for your sidebar navigation
For a purely icon-driven navigation
For buttons to help convey the meaning of an action
With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

+ +

Examples

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Bootstrap

Bootstrap

Bootstrap

Bootstrap

Google Prettify

Tables For, you guessed it, tabular data

Table markup

Tables For, you guessed it, tabular data

Table markup

Table options

Example tables

1. Default table styles

Default styles

2. Striped table

Optional classes

.table-striped

3. Bordered table

.table-bordered

4. Condensed table

.table-condensed

5. Combine them all!

Supported table markup

Forms

Controls and layouts

Example forms using just form controls, no extra markup

Basic form

Default styles

Optional layouts

Search form

Inline form

Horizontal forms

Horizontal form

Example markup

Form control states

Form validation

Supported form controls

Inputs

Textarea

Checkboxes and radios

Default (stacked)

Inline checkboxes

Selects

Extending form controls

Prepend & append inputs

Checkboxes and radios

Inline forms and append/prepend

Form help text

Prepended and appended inputs

Default options

Combined

Buttons instead of text

Control sizing

Relative sizing

Grid sizing

Uneditable inputs

Form actions

Help text

Inline help

Block help

Form control states

Input focus

Disabled inputs

Validation states

Default options

Buttons

Default buttons

Buttons for actions

Cross browser compatibility

Cross browser compatibility

Multiple sizes

Button sizes

Disabled state

Disabled state

Anchor element

One class, multiple tags

Button element

One class, multiple tags

Icons Graciously provided by Glyphicons

Icon glyphs

Built as a sprite

`.table-striped`

`.table-bordered`

`.table-condensed`