From 72a536393c2f2aba4f855384e94c4ce09bc2e39c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Dec 2011 22:58:56 -0800 Subject: mostly docs updates, but also some bug fixes per github issues --- docs/assets/css/docs.css | 4 +- docs/components.html | 179 ++++++++++++++++++++++++++++++----------------- docs/javascript.html | 2 +- docs/scaffolding.html | 51 ++++++++------ docs/upgrading.html | 152 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 301 insertions(+), 87 deletions(-) create mode 100644 docs/upgrading.html (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 586b5334b..3cf2208e9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -25,7 +25,7 @@ body > .navbar-fixed .brand { float: right; font-weight: bold; color: #000; - text-shadow: 0 1px 0 rgba(255,255,255,.1); + text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); } body > .navbar-fixed .brand:hover { text-decoration: none; @@ -449,7 +449,7 @@ h2 + table { /* Provide enough space on right-hand side for benefits list */ .jumbotron h1, .jumbotron p { - margin-right: 20%; + margin-right: 40%; } } diff --git a/docs/components.html b/docs/components.html index b4a88dd07..56e71b0f7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,94 +58,145 @@ ================================================== -->
-

Media Displaying images and videos

+

Thumbnails Grids of images, videos, text, and more

- +
-
-

Media grid

-

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

-
-
-

Example thumbnails

-

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

-

Large

-
+ +
+
+

Why use thumbnails

+

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

+
+
+

Simple, flexible markup

+

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

+
+
+

Uses grid column sizes

+

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

+
+
+ +
+
+

The markup

+

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

+
+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+    </a>
+  </li>
+  ...
+</ul>
+
+

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

+
+<ul class="thumbnails">
+  <li class="span3">
+    <div class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+      <h5>Thumbnail label</h5>
+      <p>Thumbnail caption right here...</p>
+    </div>
+  </li>
+  ...
+</ul>
+
+
+
+

More examples

+

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

+ -

Small

- -

Coding them

-

Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.

-
-<ul class="media-grid">
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
-    </a>
-  </li>
-</ul>
-
-
+
+
diff --git a/docs/javascript.html b/docs/javascript.html index 6c0e12c19..56e60e98c 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -819,7 +819,7 @@ $('a[data-toggle="tab"]').bind('shown', function (e) { 
<button class="btn" data-complete-text="finished!" >...</button>
 <script>
   $('.btn').button('complete')
-</scrip>
+</script>

Demo

diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 8b7e620fb..7431ae58b 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -64,34 +64,34 @@

Default 940px grid

-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
-
4
-
4
-
4
+
4
+
4
+
4
-
4
-
8
+
4
+
8
-
6
-
6
+
6
+
6
-
12
+
12
@@ -383,6 +383,17 @@ }); + + diff --git a/docs/upgrading.html b/docs/upgrading.html new file mode 100644 index 000000000..cd0ca8e22 --- /dev/null +++ b/docs/upgrading.html @@ -0,0 +1,152 @@ + + + + + Bootstrap, from Twitter: Upgrading from v1.4 to v2.0 + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Bootstrap + +
+
+
+ +
+ + +
+

Upgrading to Bootstrap 2

+

Learn about significant changes and additions since v1.4 with this handy guide.

+
+ + +

Rough outline

+
    +
  • Docs completely overhauled +
      +
    • Responsive thanks to new grid system
      • +
    • Now less marketing and more information
      • +
    • Extensive use of tables to share classes and elements of most components
      • +
    • Broken down into several pages for easier consumption
      • +
    +
    • +
  • Updated grid system, now only 12 columns +
      +
    • Same great classes, but now only 12 columns
      • +
    • Responsive approach means your projects virtually work out of the box on smartphones, tablets, and more
      • +
    +
    • +
  • New thumbnails (previously media grids) +
      +
    • .media-grid class has been changed to .thumbnails
      • +
    • Individual thumbnails now require .thumbnail class
      • +
    +
    • +
  • Updated forms +
      +
    • Default form style is now stacked to use less CSS and add flexibility
      • +
    • Exact same markup is required for vertical or horizontal forms—just swap the classes
      • +
    • New form defaults for search, inline, vertical, and horizontal
      • +
    +
    • +
  • Updated tables +
      +
    • Table classes made more consistent
      • +
    • Removed unused table color options (too much code for such little impact)
      • +
    +
    • +
  • Typography +
      +
    • Right-aligned option for blockquotes if float: right;
      • +
    +
    • +
  • Buttons +
      +
    • Added button bar options
      • +
    +
    • +
  • +
      +
    • +
    +
    • +
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + -- cgit v1.2.3