diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fe957d19f1..9803e2a6a2 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3169,10 +3169,6 @@ input[type="submit"].btn.btn-mini { border-radius: 4px; } -.alert-heading { - color: inherit; -} - .alert .close { position: relative; top: -2px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 1e02c299ea..d6791ff072 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -12,18 +12,18 @@ body { position: relative; - padding-top: 40px; + padding-top: 100px; font-size: 14px; background-color: #fff; background-image: url(../img/grid-20px.png); background-repeat: repeat-x; - background-position: 0 0; + background-position: 0 40px; } /* Custom container for the narrow docs */ .bs-docs-container { max-width: 780px; - margin: 0 0 0 240px; + margin: 0 auto; } /* Increase docs base type size and line-heights */ @@ -37,12 +37,44 @@ li { line-height: 25px; } +/* Code in headings */ +h3 code { + font-size: 14px; + font-weight: normal; +} + + + +/* Tweak navbar brand link to be super sleek +-------------------------------------------------- */ + +.navbar, +.subnav { + font-size: 13px; +} +body > .navbar-fixed-top .brand { + padding-right: 0; + padding-left: 0; + margin-left: 20px; + float: right; + font-weight: bold; + color: #000; + text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + transition: all .2s linear; +} +body > .navbar-fixed-top .brand:hover { + text-decoration: none; +} + /* Left nav -------------------------------------------------- */ .bs-docs-nav { + display: none; position: fixed; top: 0; left: 0; @@ -149,6 +181,7 @@ hr.soften { ------------------------- */ .jumbotron { position: relative; + text-align: center; } .jumbotron h1 { margin-bottom: 10px; @@ -177,7 +210,8 @@ hr.soften { /* Masthead (docs home) ------------------------- */ .masthead { - margin-bottom: 60px; + margin-top: 20px; + margin-bottom: 80px; } .masthead h1, .masthead p { @@ -224,12 +258,16 @@ hr.soften { ------------------------- */ /* supporting docs pages */ .subhead { + text-align: left; } .subhead h1 { font-size: 60px; } .subhead .lead { + margin-bottom: 30px; line-height: 25px; + font-size: 30px; + line-height: 40px; } /* Subnav */ @@ -314,7 +352,7 @@ hr.soften { filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ } .subnav-fixed .nav { - width: 938px; + max-width: 780px; margin: 0 auto; padding: 0 1px; } @@ -338,6 +376,7 @@ hr.soften { margin: 36px 0 27px; font-size: 40px; font-weight: 300; + text-align: center; } .marketing h2, .marketing h3 { @@ -364,6 +403,7 @@ hr.soften { font-weight: 300; line-height: 24px; color: #999; + text-align: center; } @@ -421,8 +461,12 @@ hr.soften { -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); box-shadow: 0 1px 2px rgba(0,0,0,.075); } +.mini-layout, +.mini-layout .mini-layout-body, +.mini-layout.fluid .mini-layout-sidebar { + height: 300px; +} .mini-layout { - height: 240px; margin-bottom: 20px; padding: 9px; } @@ -435,7 +479,6 @@ hr.soften { background-color: #dceaf4; margin: 0 auto; width: 70%; - height: 240px; } .mini-layout.fluid .mini-layout-sidebar, .mini-layout.fluid .mini-layout-header, @@ -445,7 +488,6 @@ hr.soften { .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; width: 20%; - height: 240px; } .mini-layout.fluid .mini-layout-body { width: 77.5%; @@ -598,6 +640,9 @@ h2 + .row { } /* Example sites showcase */ +.example-sites { + margin-left: 20px; +} .example-sites img { max-width: 100%; margin: 0 auto; @@ -694,9 +739,45 @@ form.well { .bs-docs-example p:last-child { margin-bottom: 0; } -.bs-docs-example .table { +.bs-docs-example .table, +.bs-docs-example .progress, +.bs-docs-example .well, +.bs-docs-example .alert, +.bs-docs-example .hero-unit, +.bs-docs-example .pagination, +.bs-docs-example .navbar, +.bs-docs-example .nav { margin-bottom: 5px; } +.bs-docs-example .pagination { + margin-top: 0; +} +.bs-navbar-top-example, +.bs-navbar-bottom-example { + z-index: 1; + padding: 0; + height: 90px; +} +.bs-navbar-top-example { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.bs-navbar-top-example:after { + top: auto; + bottom: -1px; + -webkit-border-radius: 0 4px 0 4px; + -moz-border-radius: 0 4px 0 4px; + border-radius: 0 4px 0 4px; +} +.bs-navbar-bottom-example { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} +.bs-navbar-bottom-example .navbar { + margin-bottom: 0; +} form.bs-docs-example { padding-bottom: 19px; } @@ -772,13 +853,6 @@ form.bs-docs-example { border: 1px solid #d6e9c6; } -/* Grid examples -------------------------- */ -.bs-docs-grid { - width: 940px; - margin-left: -80px; -} - /* Responsive Docs @@ -886,7 +960,7 @@ form.bs-docs-example { /* Jumbotron buttons */ .jumbotron .btn { margin-bottom: 10px; - } +av } /* Subnav */ .subnav { @@ -988,14 +1062,13 @@ form.bs-docs-example { /* LARGE DESKTOP SCREENS */ @media (min-width: 1210px) { - /* Update subnav container */ - .subnav-fixed .nav { - width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ + .bs-docs-container { + max-width: 970px; } - .bs-docs-grid { - width: 1170px; - margin-left: -195px; + /* Update subnav container */ + .subnav-fixed .nav { + max-width: 970px; /* 2px less to account for left/right borders being removed when in fixed mode */ } } diff --git a/docs/base-css.html b/docs/base-css.html index 7ed6c68ac2..ee12d62e2f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,84 +27,50 @@ - + -
- - + +
+
+
+ + Bootstrap +
+ +
+
+
@@ -114,6 +80,16 @@

Base CSS

On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

+
+ +
@@ -448,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.

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

Tables For, you guessed it, tabular data

-

Table markup

+

Default styles

+

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

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table">
+  …
+</table>
+
+ +
+ + +

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).

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table table-striped">
+  …
+</table>
+
+ +

.table-bordered

+

Add borders and rounded corners to the table.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-bordered">
+  …
+</table>
+
+ +

.table-condensed

+

Makes tables more compact by cutting cell padding in half.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-condensed">
+  …
+</table>
+
+ + +
+ + +

Supported table markup

+

List of supported table HTML elements and how they should be used.

@@ -562,267 +699,6 @@ For example, <code>section</code> should be wrapped as inline. </table> - -

Table options

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameClassDescription
DefaultNoneNo 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.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-<table class="table">
-  …
-</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.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-<table class="table table-striped">
-  …
-</table>
-
- - -

3. Bordered table

-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-bordered">
-  …
-</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).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-condensed">
-  …
-</table>
-
- - -

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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-striped table-bordered table-condensed">
-  ...
-</table>
-
- @@ -834,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.

Forms

-

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameClassDescription
Vertical (default).form-vertical (not required)Stacked, left-aligned labels over controls
Inline.form-inlineLeft-aligned label and inline-block controls for compact style
Search.form-searchExtra-rounded text input for a typical search aesthetic
Horizontal.form-horizontalFloat 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.

- +

Example block-level help text here.