Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fixing bootstapwp_autoset_featured_img function

  • Loading branch information...
commit 0cb2a739947b80d57f48fa52c55de7ad2f2dd78a 1 parent 273c800
@rachelbaker authored
View
30 README.md
@@ -39,21 +39,43 @@ Bug tracker
**Report theme bugs** [https://github.com/rachelbaker/bootstrapwp-Twitter-Bootstrap-for-WordPress/issues](https://github.com/rachelbaker/bootstrapwp-Twitter-Bootstrap-for-WordPress/issues)
-##v.90 Changelog (in progress)
+##v.90 Changelog (still baking)
-__Functions.php__
+__The goals of this release are:__
-* Fixed bootstrapwp_autoset_featured_img() function to return if there is no image set, clearing debug errors.
-* Removed Custom Walker class from file and replaced with external include call for file 'includes/class-bootstrap_walker_nav_menu.php'.
+1. Add Theme Options Screen
+2. Fix Custom Walker Menu PHP errors
+3. Fix Automatic Thumbnail PHP errors
+4. Remove any unnecessary theme files
+5. Update styles and scripts to Bootstrap 2.10 dev branch
+
+__Archive.php__
+
+* Replaced conditional for `the_post_thumbnail()` with `bootstrapwp_autoset_featured_img()`.
+
+__Author.php__
+
+* Replaced conditional for `the_post_thumbnail()` with `bootstrapwp_autoset_featured_img()`.
__Class-bootstrapwp-walker-nav_menu.php__
* Extending Walker_Nav_Menu to modify class assigned to submenu ul element.
+__Functions.php__
+
+* Fixed `bootstrapwp_autoset_featured_img()` function to return if there is no image set, clearing debug errors.
+* Removed the post hooks for `bootstrap_autoset_featured_img()` function to clear debug errors.
+* Added `bootstrapwp_post_thumbnail_check()` function to check if the post displayed in the loop has a post thumbnail already.
+* Removed Custom Walker class from file and replaced with external include call for file 'includes/class-bootstrap_walker_nav_menu.php'.
+
__Index.php__
* Removed unnecessary double loop for page title.
+__Page-blog.php__
+
+* Replaced conditional for `the_post_thumbnail()` with `bootstrapwp_autoset_featured_img()`.
+
__Docs Folder__
* Removed entire 'docs' folder to clean up theme files.
View
7 archive.php
@@ -54,10 +54,9 @@
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><h3><?php the_title();?></h3></a>
<p class="meta"><?php echo bootstrapwp_posted_on();?></p>
<div class="row">
- <div class="span2"><?php // Checking for a post thumbnail
- if ( has_post_thumbnail() ) ?>
- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
- <?php the_post_thumbnail();?></a>
+ <div class="span2">
+ <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
+ <?php echo bootstrapwp_autoset_featured_img(); ?></a>
</div><!-- /.span2 -->
<div class="span6">
<?php the_excerpt();?>
View
7 author.php
@@ -44,10 +44,9 @@
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><h3><?php the_title();?></h3></a>
<p class="meta"><?php echo bootstrapwp_posted_on();?></p>
<div class="row">
- <div class="span2"><?php // Checking for a post thumbnail
- if ( has_post_thumbnail() ) ?>
- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
- <?php the_post_thumbnail();?></a>
+ <div class="span2">
+ <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
+ <?php echo bootstrapwp_autoset_featured_img(); ?></a>
</div><!-- /.span2 -->
<div class="span6">
<?php the_excerpt();?>
View
52 functions.php
@@ -52,10 +52,9 @@ function bootstrapwp_theme_setup() {
/**
* Add support for the Aside and Gallery Post Formats
*/
- add_theme_support( 'post-formats', array( 'aside', 'image', 'gallery' ) );
+ add_theme_support( 'post-formats', array( 'aside', 'image', 'gallery', 'link', 'quote', 'status', 'video', 'audio', 'chat' ) );
}
-endif; // twentyeleven_header_style
-
+endif;
################################################################################
// Loading All CSS Stylesheets
@@ -373,6 +372,20 @@ function bootstrapwp_enhanced_image_navigation( $url ) {
}
add_filter( 'attachment_link', 'bootstrapwp_enhanced_image_navigation' );
+
+/*
+| -------------------------------------------------------------------
+| Checking for Post Thumbnail
+| -------------------------------------------------------------------
+|
+| */
+function bootstrapwp_post_thumbnail_check() {
+ global $post;
+ if (get_the_post_thumbnail()) {
+ return true; }
+ else { return false; }
+}
+
/*
| -------------------------------------------------------------------
| Setting Featured Image (Post Thumbnail)
@@ -380,26 +393,29 @@ function bootstrapwp_enhanced_image_navigation( $url ) {
| Will automatically add the first image attached to a post as the Featured Image if post does not have a featured image previously set.
| */
function bootstrapwp_autoset_featured_img() {
- global $post;
- $already_has_thumb = has_post_thumbnail($post->ID);
- if (!$already_has_thumb) {
- $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
- if ($attached_image) {
+ $post_thumbnail = bootstrapwp_post_thumbnail_check();
+ if ($post_thumbnail == true ){
+ return the_post_thumbnail();
+ }
+ if ($post_thumbnail == false ){
+ $image_args = array(
+ 'post_type' => 'attachment',
+ 'numberposts' => 1,
+ 'post_mime_type' => 'image',
+ 'post_parent' => $post->ID,
+ 'order' => 'desc'
+ );
+ $attached_image = get_children( $image_args );
+ if ($attached_image) {
foreach ($attached_image as $attachment_id => $attachment) {
set_post_thumbnail($post->ID, $attachment_id);
}
- } elseif (!$attached_image) {
- return;
- }
- }
+ return the_post_thumbnail();
+ } else { return " ";}
+ }
} //end function
-add_action('the_post', 'bootstrapwp_autoset_featured_img');
-add_action('save_post', 'bootstrapwp_autoset_featured_img');
-add_action('draft_to_publish', 'bootstrapwp_autoset_featured_img');
-add_action('new_to_publish', 'bootstrapwp_autoset_featured_img');
-add_action('pending_to_publish', 'bootstrapwp_autoset_featured_img');
-add_action('future_to_publish', 'bootstrapwp_autoset_featured_img');
+
/*
| -------------------------------------------------------------------
View
2  less/bootstrap.less
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v2.0.3
+ * Bootstrap v2.0.4
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
View
2  less/bswp-overrides.less
@@ -1,4 +1,4 @@
-// BSWP OVERRIDES v0.87
+// BSWP OVERRIDES v0.90
/********************************************************
Overriding some defaults from the Bootstrap defaults to improve/fix integration with WordPress
-------------------------------------------------- */
View
6 less/button-groups.less
@@ -34,16 +34,16 @@
}
.btn-group > .btn,
.btn-group > .dropdown-menu {
- font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
+ font-size: 13px; // redeclare as part 2 of font-size inline-block hack
}
// Reset fonts for other sizes
.btn-group > .btn-mini,
.btn-group > .btn-small {
- font-size: @baseFontSize - 2px;
+ font-size: 12px;
}
.btn-group > .btn-large {
- font-size: @baseFontSize + 2px;
+ font-size: 16px;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
View
74 less/buttons.less
@@ -10,10 +10,10 @@
.btn {
display: inline-block;
.ie7-inline-block();
- padding: 4px 10px 4px;
+ padding: 4px 14px;
margin-bottom: 0; // For input.btn
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
+ font-size: 13px;
+ line-height: 20px;
*line-height: 20px;
color: @grayDark;
text-align: center;
@@ -27,47 +27,49 @@
.border-radius(4px);
.ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-}
-// Hover state
-.btn:hover {
- color: @grayDark;
- text-decoration: none;
- background-color: darken(@white, 10%);
- *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
- background-position: 0 -15px;
+ // Hover state
+ &:hover {
+ color: @grayDark;
+ text-decoration: none;
+ background-color: darken(@white, 10%);
+ *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
+ background-position: 0 -15px;
+
+ // transition is only when going to hover, otherwise the background
+ // behind the gradient (there for IE<=9 fallback) gets mismatched
+ .transition(background-position .1s linear);
+ }
- // transition is only when going to hover, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- .transition(background-position .1s linear);
-}
+ // Focus state for keyboard and accessibility
+ &:focus {
+ .tab-focus();
+ }
-// Focus state for keyboard and accessibility
-.btn:focus {
- .tab-focus();
-}
+ // Active state
+ &.active,
+ &:active {
+ background-color: darken(@white, 10%);
+ background-color: darken(@white, 15%) e("\9");
+ background-image: none;
+ outline: 0;
+ .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+ }
-// Active state
-.btn.active,
-.btn:active {
- background-color: darken(@white, 10%);
- background-color: darken(@white, 15%) e("\9");
- background-image: none;
- outline: 0;
- .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
-}
+ // Disabled state
+ &.disabled,
+ &[disabled] {
+ cursor: default;
+ background-color: darken(@white, 10%);
+ background-image: none;
+ .opacity(65);
+ .box-shadow(none);
+ }
-// Disabled state
-.btn.disabled,
-.btn[disabled] {
- cursor: default;
- background-color: darken(@white, 10%);
- background-image: none;
- .opacity(65);
- .box-shadow(none);
}
+
// Button Sizes
// --------------------------------------------------
View
10 less/carousel.less
@@ -105,6 +105,7 @@
}
}
+
// Caption for text below images
// -----------------------------
@@ -113,11 +114,18 @@
left: 0;
right: 0;
bottom: 0;
- padding: 10px 15px 5px;
+ padding: 15px;
background: @grayDark;
background: rgba(0,0,0,.75);
}
.carousel-caption h4,
.carousel-caption p {
color: @white;
+ line-height: @baseLineHeight;
+}
+.carousel-caption h4 {
+ margin: 0 0 5px;
+}
+.carousel-caption p {
+ margin-bottom: 0;
}
View
4 less/code.less
@@ -8,7 +8,7 @@ code,
pre {
padding: 0 3px 2px;
#font > #family > .monospace;
- font-size: @baseFontSize - 1;
+ font-size: @baseFontSize - 2;
color: @grayDark;
.border-radius(3px);
}
@@ -26,7 +26,7 @@ pre {
display: block;
padding: (@baseLineHeight - 1) / 2;
margin: 0 0 @baseLineHeight / 2;
- font-size: @baseFontSize * .925; // 13px to 12px
+ font-size: @baseFontSize - 2; // 14px to 12px
line-height: @baseLineHeight;
word-break: break-all;
word-wrap: break-word;
View
68 less/forms.less
@@ -149,12 +149,6 @@ input[type="checkbox"] {
width: auto; // Override of generic input selector
}
-// Make uneditable textareas behave like a textarea
-.uneditable-textarea {
- width: auto;
- height: auto;
-}
-
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
@@ -184,6 +178,41 @@ input[type="checkbox"]:focus {
}
+// Uneditable inputs
+// -------------------------
+
+// Make uneditable inputs look inactive
+.uneditable-input,
+.uneditable-textarea {
+ color: @grayLight;
+ background-color: darken(@inputBackground, 1%);
+ border-color: @inputBorder;
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
+ cursor: not-allowed;
+}
+
+// For text that needs to appear as an input but should not be an input
+.uneditable-input {
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
+ white-space: nowrap;
+}
+
+// Make uneditable textareas behave like a textarea
+.uneditable-textarea {
+ width: auto;
+ height: auto;
+}
+
+
+// Placeholder
+// -------------------------
+
+// Placeholder text gets special styles; can't be bundled together though for some reason
+input,
+textarea {
+ .placeholder();
+}
+
// CHECKBOXES & RADIOS
// -------------------
@@ -277,7 +306,6 @@ select[readonly],
textarea[readonly] {
cursor: not-allowed;
background-color: @inputDisabledBackground;
- border-color: #ddd;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
@@ -333,22 +361,6 @@ select:focus:required:invalid {
.clearfix(); // Adding clearfix to allow for .pull-right button containers
}
-// For text that needs to appear as an input but should not be an input
-.uneditable-input {
- overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
- white-space: nowrap;
- cursor: not-allowed;
- background-color: @inputBackground;
- border-color: #eee;
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
-}
-
-// Placeholder text gets special styles; can't be bundled together though for some reason
-input,
-textarea {
- .placeholder();
-}
-
// HELP TEXT
@@ -381,6 +393,8 @@ textarea {
.input-append {
margin-bottom: 5px;
font-size: 0;
+ white-space: nowrap; // Prevent span and input from separating
+
input,
select,
.uneditable-input {
@@ -395,9 +409,6 @@ textarea {
z-index: 2;
}
}
- .uneditable-input {
- border-left-color: #ccc;
- }
.add-on {
display: inline-block;
width: auto;
@@ -439,10 +450,6 @@ textarea {
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
}
- .uneditable-input {
- border-right-color: #ccc;
- border-left-color: #eee;
- }
.add-on:last-child,
.btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
@@ -502,6 +509,7 @@ input.search-query {
display: inline-block;
.ie7-inline-block();
margin-bottom: 0;
+ vertical-align: middle;
}
// Re-hide hidden elements due to specifity
.hide {
View
6 less/mixins.less
@@ -403,7 +403,7 @@
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard, IE10
+ background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
@@ -413,7 +413,7 @@
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(top, @startColor, @endColor); // The standard, IE10
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
@@ -423,7 +423,7 @@
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@deg, @startColor, @endColor); // The standard, IE10
+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%);
View
34 less/navbar.less
@@ -206,7 +206,7 @@
float: none;
// Vertically center the text given @navbarHeight
@elementHeight: 20px;
- padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
+ padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
line-height: 19px;
color: @navbarLinkColor;
text-decoration: none;
@@ -379,15 +379,19 @@
// Override the default .navbar
-.navbar-subnav {
-}
.navbar-subnav .navbar-inner {
- padding: 0;
- #gradient > .vertical(#f9f9f9, #f1f1f1);
+ #gradient > .vertical(#ffffff, #f1f1f1);
.box-shadow(none);
border: 1px solid #e5e5e5;
}
+// Lighten vertical dividers
+.navbar-subnav .divider-vertical {
+ background-color: #f1f1f1;
+ border-right-color: #ffffff;
+}
+
+
// Change link colors back
.navbar-subnav .nav > li > a {
color: @linkColor;
@@ -401,7 +405,10 @@
.navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover {
color: #777;
- background-color: #e5e5e5;
+ background-color: #eee;
+ -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
+ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
+ box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
}
// Dropdown carets
@@ -411,6 +418,21 @@
border-bottom-color: @linkColor;
}
+// Reset search input form
+.navbar-subnav .search-query {
+ background-color: #fff;
+ border-color: #ccc;
+ .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
+
+ // On :focus, keep the same padding and border
+ &:focus,
+ &.focused {
+ padding: 4px 9px;
+ border: 1px solid rgba(82,168,236,.8);
+ .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
+ }
+}
+
// Open dropdown dropdown-toggle
.navbar-subnav .nav .open > a {
color: @linkColorHover;
View
3  less/pager.less
@@ -4,8 +4,7 @@
.pager {
- margin-left: 0;
- margin-bottom: @baseLineHeight;
+ margin: @baseLineHeight 0;
list-style: none;
text-align: center;
.clearfix();
View
2  less/progress-bars.less
@@ -54,7 +54,7 @@
// Bar of progress
.progress .bar {
width: 0%;
- height: 18px;
+ height: 100%;
color: @white;
font-size: 12px;
text-align: center;
View
5 less/thumbnails.less
@@ -27,10 +27,10 @@
.thumbnail {
display: block;
padding: 4px;
- line-height: 1;
+ line-height: 20px;
border: 1px solid #ddd;
.border-radius(4px);
- .box-shadow(0 1px 1px rgba(0,0,0,.075));
+ .box-shadow(0 1px 3px rgba(0,0,0,.055));
}
// Add a hover state for linked versions only
a.thumbnail:hover {
@@ -47,4 +47,5 @@ a.thumbnail:hover {
}
.thumbnail .caption {
padding: 9px;
+ color: @gray;
}
View
76 less/type.less
@@ -3,8 +3,8 @@
// --------------------------------------------------
-// BODY TEXT
-// ---------
+// Body text
+// -------------------------
p {
margin: 0 0 @baseLineHeight / 2;
@@ -20,73 +20,49 @@ p {
line-height: @baseLineHeight * 1.5;
}
-// HEADINGS
-// --------
+
+// Headings
+// -------------------------
h1, h2, h3, h4, h5, h6 {
- margin: 0;
+ margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
+ line-height: 1;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
font-weight: normal;
+ line-height: 1;
color: @grayLight;
}
}
-h1 {
- font-size: 30px;
- line-height: @baseLineHeight * 2;
- small {
- font-size: 18px;
- }
-}
-h2 {
- font-size: 24px;
- line-height: @baseLineHeight * 2;
- small {
- font-size: 18px;
- }
-}
-h3 {
- font-size: 18px;
- line-height: @baseLineHeight * 1.5;
- small {
- font-size: 14px;
- }
-}
-h4, h5, h6 {
- line-height: @baseLineHeight;
-}
-h4 {
- font-size: 14px;
- small {
- font-size: 12px;
- }
-}
-h5 {
- font-size: 12px;
-}
-h6 {
- font-size: 11px;
- color: @grayLight;
- text-transform: uppercase;
-}
+h1 { font-size: 36px; line-height: 40px; }
+h2 { font-size: 30px; line-height: 40px; }
+h3 { font-size: 24px; line-height: 40px; }
+h4 { font-size: 18px; line-height: 20px; }
+h5 { font-size: 14px; line-height: 20px; }
+h6 { font-size: 12px; line-height: 20px; }
+
+h1 small { font-size: 24px; }
+h2 small { font-size: 18px; }
+h3 small { font-size: 14px; }
+h4 small { font-size: 14px; }
+
// Page header
+// -------------------------
+
.page-header {
- padding-bottom: @baseLineHeight - 1;
- margin: @baseLineHeight 0;
+ padding-bottom: (@baseLineHeight / 2) - 1;
+ margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
border-bottom: 1px solid @grayLighter;
}
-.page-header h1 {
- line-height: 1;
-}
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
// Unordered and Ordered lists
ul, ol {
View
28 less/variables.less
@@ -46,11 +46,11 @@
// -------------------------
@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
-@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
+@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
-@baseFontSize: 13px;
+@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
-@baseLineHeight: 18px;
+@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@@ -73,7 +73,7 @@
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
-@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
+@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@@ -87,7 +87,7 @@
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
-@btnInverseBackground: @gray;
+@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;
@@ -155,8 +155,8 @@
// Navbar
// -------------------------
@navbarHeight: 40px;
-@navbarBackground: @grayDarker;
-@navbarBackgroundHighlight: @grayDark;
+@navbarBackground: #111;
+@navbarBackgroundHighlight: #222;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;
@@ -213,21 +213,23 @@
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
+@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
+@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
-@fluidGridColumnWidth: 6.382978723%;
-@fluidGridGutterWidth: 2.127659574%;
+@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
+@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
-@fluidGridColumnWidth1200: 5.982905983%;
-@fluidGridGutterWidth1200: 2.564102564%;
+@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
+@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
-@fluidGridColumnWidth768: 5.801104972%;
-@fluidGridGutterWidth768: 2.762430939%;
+@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
View
7 page-blog.php
@@ -43,10 +43,11 @@
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><h3><?php the_title();?></h3></a>
<p class="meta"><?php echo bootstrapwp_posted_on();?></p>
<div class="row">
- <div class="span2"><?php // Checking for a post thumbnail
- if ( has_post_thumbnail() ) ?>
+ <div class="span2">
+
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
- <?php the_post_thumbnail();?></a>
+ <?php echo bootstrapwp_autoset_featured_img(); ?></a>
+
</div><!-- /.span2 -->
<div class="span6">
<?php the_excerpt();?>
View
2,370 page-styleguide.php
@@ -10,22 +10,24 @@
*/
get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
- <div class="container">
+ <div class="bs-docs-container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1><?php the_title();?></h1>
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
- <div class="subnav">
- <ul class="nav nav-pills">
- <li><a href="#typography">Typography</a></li>
- <li><a href="#code">Code</a></li>
- <li><a href="#tables">Tables</a></li>
- <li><a href="#forms">Forms</a></li>
- <li><a href="#buttons">Buttons</a></li>
- <li><a href="#icons">Icons by Glyphicons</a></li>
- </ul>
+ <div class="navbar navbar-subnav">
+ <div class="navbar-inner">
+ <ul class="nav">
+ <li><a href="#typography">Typography</a></li>
+ <li><a href="#code">Code</a></li>
+ <li><a href="#tables">Tables</a></li>
+ <li><a href="#forms">Forms</a></li>
+ <li><a href="#buttons">Buttons</a></li>
+ <li><a href="#icons">Icons by Glyphicons</a></li>
+ </ul>
+ </div>
</div>
</header>
@@ -37,289 +39,300 @@
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
- <h2>Headings &amp; body copy</h2>
+ <h2>Headings</h2>
+ <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
+ <div class="bs-docs-example">
+ <h1>h1. Heading 1</h1>
+ <h2>h2. Heading 2</h2>
+ <h3>h3. Heading 3</h3>
+ <h4>h4. Heading 4</h4>
+ <h5>h5. Heading 5</h5>
+ <h6>h6. Heading 6</h6>
+ </div>
- <!-- Headings & Paragraph Copy -->
- <div class="row">
- <div class="span4">
- <h3>Typographic scale</h3>
- <p>The entire typographic grid is based on two Less variables in our variables.less file: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height.</p>
- <p>We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.</p>
- </div>
- <div class="span4">
- <h3>Example body text</h3>
- <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
- <h3>Lead body copy</h3>
- <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
- <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
- </div>
- <div class="span4">
- <div class="well">
- <h1>h1. Heading 1</h1>
- <h2>h2. Heading 2</h2>
- <h3>h3. Heading 3</h3>
- <h4>h4. Heading 4</h4>
- <h5>h5. Heading 5</h5>
- <h6>h6. Heading 6</h6>
- </div>
- </div>
+ <h2>Body copy</h2>
+ <p>Bootstrap's global default <code>font-size</code> is <strong>13px</strong>, with a <code>line-height</code> of <strong>18px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p>
+ <div class="bs-docs-example">
+ <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+ <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
- <!-- Misc Elements -->
- <h2>Emphasis, address, and abbreviation</h2>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th>Element</th>
- <th>Usage</th>
- <th>Optional</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code>&lt;strong&gt;</code>
- </td>
- <td>
- For emphasizing a snippet of text with <strong>important</strong>
- </td>
- <td>
- <span class="muted">None</span>
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;em&gt;</code>
- </td>
- <td>
- For emphasizing a snippet of text with <em>stress</em>
- </td>
- <td>
- <span class="muted">None</span>
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;abbr&gt;</code>
- </td>
- <td>
- Wraps abbreviations and acronyms to show the expanded version on hover
- </td>
- <td>
- <p>Include optional <code>title</code> attribute for expanded text</p>
- Use <code>.initialism</code> class for uppercase abbreviations.
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;address&gt;</code>
- </td>
- <td>
- For contact information for its nearest ancestor or the entire body of work
- </td>
- <td>
- Preserve formatting by ending all lines with <code>&lt;br&gt;</code>
- </td>
- </tr>
- </tbody>
- </table>
+ <h3>Lead body copy</h3>
+ <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
+ <div class="bs-docs-example">
+ <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
+ </div>
- <div class="row">
- <div class="span4">
- <h3>Using emphasis</h3>
- <p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
- <p><strong>Note:</strong> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5, but their usage has changed a bit. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
- </div>
- <div class="span4">
- <h3>Example addresses</h3>
- <p>Here are two examples of how the <code>&lt;address&gt;</code> tag can be used:</p>
- <address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- <address>
- <strong>Full Name</strong><br>
- <a href="mailto:#">first.last@gmail.com</a>
- </address>
- </div>
- <div class="span4">
- <h3>Example abbreviations</h3>
- <p>Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.</p>
- <p>Add the <code>initialism</code> class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.</p>
- <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
- <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
- </div>
+ <h2>Built with Less</h2>
+ <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>Emphasis</h2>
+ <p>Make use of HTML's default emphasis tags, <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code>.</p>
+
+ <h3><code>&lt;strong&gt;</code></h3>
+ <p>For emphasizing a snippet of text with <strong>important</strong></p>
+ <div class="bs-docs-example">
+ <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
+ </div>
+<pre class="prettyprint">
+&lt;strong&gt;rendered as bold text&lt;/strong&gt;
+</pre>
+
+ <h3><code>&lt;em&gt;</code></h3>
+ <p>For emphasizing a snippet of text with <em>stress</em></p>
+ <div class="bs-docs-example">
+ <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
+<pre class="prettyprint">
+&lt;em&gt;rendered as italicized text&lt;/em&gt;
+</pre>
+
+ <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>Abbreviations</h2>
+ <p>Stylized implemenation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
+
+ <h3><code>&lt;abbr&gt;</code></h3>
+ <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
+ <div class="bs-docs-example">
+ <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+ </div>
+<pre class="prettyprint">
+&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;
+</pre>
+
+ <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
+ <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
+ <div class="bs-docs-example">
+ <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
+ </div>
+<pre class="prettyprint">
+&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;
+</pre>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>Addresses</h2>
+ <p>Present contact information for the nearest ancestor or the entire body of work.</p>
+
+ <h3><code>&lt;address&gt;</code></h3>
+ <p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
+ <div class="bs-docs-example">
+ <address>
+ <strong>Twitter, Inc.</strong><br>
+ 795 Folsom Ave, Suite 600<br>
+ San Francisco, CA 94107<br>
+ <abbr title="Phone">P:</abbr> (123) 456-7890
+ </address>
+ <address>
+ <strong>Full Name</strong><br>
+ <a href="mailto:#">first.last@gmail.com</a>
+ </address>
+ </div>
+<pre class="prettyprint linenums">
+&lt;address&gt;
+ &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
+ 795 Folsom Ave, Suite 600&lt;br&gt;
+ San Francisco, CA 94107&lt;br&gt;
+ &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
+&lt;/address&gt;
+
+&lt;address&gt;
+ &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
+ &lt;a href="mailto:#"&gt;first.last@gmail.com&lt;/a&gt;
+&lt;/address&gt;
+</pre>
+
+
+ <hr class="bs-docs-separator">
- <!-- Blockquotes -->
<h2>Blockquotes</h2>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th>Element</th>
- <th>Usage</th>
- <th>Optional</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code>&lt;blockquote&gt;</code>
- </td>
- <td>
- Block-level element for quoting content from another source
- </td>
- <td>
- <p>Add <code>cite</code> attribute for source URL</p>
- Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated options
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;small&gt;</code>
- </td>
- <td>
- Optional element for adding a user-facing citation, typically an author with title of work
- </td>
- <td>
- Place the <code>&lt;cite&gt;</code> around the title or name of source
- </td>
- </tr>
- </tbody>
- </table>
- <div class="row">
- <div class="span4">
- <p>To include a blockquote, wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
- <p>Include an optional <code>&lt;small&gt;</code> element to cite your source and you'll get an em dash <code>&amp;mdash;</code> before it for styling purposes.</p>
- </div>
- <div class="span8">
+ <p>For quoting blocks of content from another source within your document.</p>
+
+ <h3>Default blockqoute</h3>
+ <p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
+ <div class="bs-docs-example">
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ </blockquote>
+ </div>
<pre class="prettyprint linenums">
&lt;blockquote&gt;
- &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.&lt;/p&gt;
- &lt;small&gt;Someone famous&lt;/small&gt;
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
&lt;/blockquote&gt;
</pre>
- </div>
- </div><!--/row-->
- <h3>Example blockquotes</h3>
- <div class="row">
- <div class="span6">
- <p>Default blockquotes are styled as such:</p>
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
- <small>Someone famous in <cite title="">Body of work</cite></small>
- </blockquote>
- </div>
- <div class="span6">
- <p>To float your blockquote to the right, add <code>class="pull-right"</code>:</p>
- <blockquote class="pull-right">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
- <small>Someone famous in <cite title="">Body of work</cite></small>
- </blockquote>
- </div>
+ <h3>Blockquote options</h3>
+ <p>Style and content changes for simple variations on a standard blockquote.</p>
+
+ <h4>Naming a source</h4>
+ <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
+ <div class="bs-docs-example">
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+ </blockquote>
+ </div>
+<pre class="prettyprint linenums">
+&lt;blockquote&gt;
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
+ &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
+&lt;/blockquote&gt;
+</pre>
+
+ <h4>Alternate displays</h4>
+ <p>Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated, right-aligned blockquote content.</p>
+ <div class="bs-docs-example" style="overflow: hidden;">
+ <blockquote class="pull-right">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+ </blockquote>
</div>
+<pre class="prettyprint linenums">
+&lt;blockquote class="pull-right"&gt;
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
+ &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
+&lt;/blockquote&gt;
+</pre>
+
+
+ <hr class="bs-docs-separator">
<!-- Lists -->
<h2>Lists</h2>
- <div class="row">
- <div class="span4">
- <h3>Unordered</h3>
- <p><code>&lt;ul&gt;</code></p>
- <ul>
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul>
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ul>
- </div>
- <div class="span4">
- <h3>Unstyled</h3>
- <p><code>&lt;ul class="unstyled"&gt;</code></p>
- <ul class="unstyled">
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul>
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ul>
- </div>
- <div class="span4">
- <h3>Ordered</h3>
- <p><code>&lt;ol&gt;</code></p>
- <ol>
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit</li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
- </ol>
- </div>
- </div><!-- /row -->
- <br>
- <div class="row">
- <div class="span4">
- <h3>Description</h3>
- <p><code>&lt;dl&gt;</code></p>
- <dl>
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Euismod</dt>
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
- <dt>Malesuada porta</dt>
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
- </dl>
- </div>
- <div class="span8">
- <h3>Horizontal description</h3>
- <p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
- <dl class="dl-horizontal">
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Euismod</dt>
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
- <dt>Malesuada porta</dt>
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
- <dt>Felis euismod semper eget lacinia</dt>
- <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
- </dl>
- <hr>
- <p>
- <span class="label label-info">Heads up!</span>
- Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
- </p>
- </div>
- </div><!-- /row -->
+
+ <h3>Unordered</h3>
+ <p>A list of items in which the order does <em>not</em> explicitly matter.</p>
+ <div class="bs-docs-example">
+ <ul>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+<pre class="prettyprint linenums">
+&lt;ul&gt;
+ &lt;li&gt;...&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+ <h3>Ordered</h3>
+ <p>A list of items in which the order <em>does</em> explicitly matter.</p>
+ <div class="bs-docs-example">
+ <ol>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit</li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ol>
+ </div>
+<pre class="prettyprint linenums">
+&lt;ol&gt;
+ &lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+ <h3>Unstyled</h3>
+ <p>A list of items with no <code>list-style</code> or additional left padding.</p>
+ <div class="bs-docs-example">
+ <ul class="unstyled">
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipiscing elit</li>
+ <li>Integer molestie lorem at massa</li>
+ <li>Facilisis in pretium nisl aliquet</li>
+ <li>Nulla volutpat aliquam velit
+ <ul>
+ <li>Phasellus iaculis neque</li>
+ <li>Purus sodales ultricies</li>
+ <li>Vestibulum laoreet porttitor sem</li>
+ <li>Ac tristique libero volutpat at</li>
+ </ul>
+ </li>
+ <li>Faucibus porta lacus fringilla vel</li>
+ <li>Aenean sit amet erat nunc</li>
+ <li>Eget porttitor lorem</li>
+ </ul>
+ </div>
+<pre class="prettyprint linenums">
+&lt;ul class="unstyled"&gt;
+ &lt;li&gt;...&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+ <h3>Description</h3>
+ <p>A list of terms with their associated descriptions.</p>
+ <div class="bs-docs-example">
+ <dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ </dl>
+ </div>
+<pre class="prettyprint linenums">
+&lt;dl&gt;
+ &lt;dt&gt;...&lt;/dt&gt;
+ &lt;dd&gt;...&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+ <h4>Horizontal description</h4>
+ <p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
+ <div class="bs-docs-example">
+ <dl class="dl-horizontal">
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Euismod</dt>
+ <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+ <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+ <dt>Malesuada porta</dt>
+ <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+ <dt>Felis euismod semper eget lacinia</dt>
+ <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+ </dl>
+ </div>
+<pre class="prettyprint linenums">
+&lt;dl class="dl-horizontal"&gt;
+ &lt;dt&gt;...&lt;/dt&gt;
+ &lt;dd&gt;...&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+ <p>
+ <span class="label label-info">Heads up!</span>
+ Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
+ </p>
</section>
@@ -330,17 +343,15 @@
<div class="page-header">
<h1>Code <small>Inline and block code snippets</small></h1>
</div>
- <div class="row">
- <div class="span4">
- <h2>Inline</h2>
- <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
+
+ <h2>Inline</h2>
+ <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<pre class="prettyprint linenums">
For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre>
- </div><!--/span-->
- <div class="span4">
- <h2>Basic block</h2>
- <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
+
+ <h2>Basic block</h2>
+ <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<pre>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
@@ -349,24 +360,8 @@
&amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt;
</pre>
- <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
- <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
- </div><!--/span-->
- <div class="span4">
- <h2>Google Prettify</h2>
- <p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</p>
-<pre class="prettyprint linenums" style="margin-bottom: 9px;">
-&lt;p&gt;Sample text here...&lt;/p&gt;
-</pre>
-<pre class="prettyprint linenums" style="margin-bottom: 9px;">
-&lt;pre class="prettyprint
- linenums"&gt;
- &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
-&lt;/pre&gt;
-</pre>
- <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
- </div><!--/span-->
- </div><!--/row-->
+ <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
+ <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section>
@@ -378,465 +373,335 @@
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
- <h2>Table markup</h2>
- <div class="row">
- <div class="span8">
- <table class="table table-bordered table-striped">
- <colgroup>
- <col class="span1">
- <col class="span7">
- </colgroup>
- <thead>
- <tr>
- <th>Tag</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <code>&lt;table&gt;</code>
- </td>
- <td>
- Wrapping element for displaying data in a tabular format
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;thead&gt;</code>
- </td>
- <td>
- Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;tbody&gt;</code>
- </td>
- <td>
- Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;tr&gt;</code>
- </td>
- <td>
- Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;td&gt;</code>
- </td>
- <td>
- Default table cell
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;th&gt;</code>
- </td>
- <td>
- Special table cell for column (or row, depending on scope and placement) labels<br>
- Must be used within a <code>&lt;thead&gt;</code>
- </td>
- </tr>
- <tr>
- <td>
- <code>&lt;caption&gt;</code>
- </td>
- <td>
- Description or summary of what the table holds, especially useful for screen readers
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="span4">
+ <h2>Default styles</h2>
+ <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p>
+ <div class="bs-docs-example">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
<pre class="prettyprint linenums">
-&lt;table&gt;
- &lt;thead&gt;
- &lt;tr&gt;
- &lt;th&gt;&lt;/th&gt;
- &lt;th&gt;&lt;/th&gt;
- &lt;/tr&gt;
- &lt;/thead&gt;
- &lt;tbody&gt;
- &lt;tr&gt;
- &lt;td&gt;&lt;/td&gt;
- &lt;td&gt;&lt;/td&gt;
- &lt;/tr&gt;
- &lt;/tbody&gt;
+&lt;table class="table"&gt;
+ …
&lt;/table&gt;
</pre>
- </div>
- </div>
-
- <h2>Table options</h2>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th>Name</th>
- <th>Class</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Default</td>
- <td class="muted">None</td>
- <td>No styles, just columns and rows</td>
- </tr>
- <tr>
- <td>Basic</td>
- <td>
- <code>.table</code>
- </td>
- <td>Only horizontal lines between rows</td>
- </tr>
- <tr>
- <td>Bordered</td>
- <td>
- <code>.table-bordered</code>
- </td>
- <td>Rounds corners and adds outer border</td>
- </tr>
- <tr>
- <td>Zebra-stripe</td>
- <td>
- <code>.table-striped</code>
- </td>
- <td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
- </tr>
- <tr>
- <td>Condensed</td>
- <td>
- <code>.table-condensed</code>
- </td>
- <td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
- </tr>
- </tbody>
- </table>
- <h2>Example tables</h2>
+ <hr class="bs-docs-separator">
- <h3>1. Default table styles</h3>
- <div class="row">
- <div class="span4">
- <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
-<pre class="prettyprint linenums">
-&lt;table class="table"&gt;
- …
-&lt;/table&gt;</pre>
- </div>
- <div class="span8">
- <table class="table">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Larry</td>
- <td>the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
+ <h2>Optional classes</h2>
+ <p>Add any of the follow classes to the <code>.table</code> base class.</p>
- <h3>2. Striped table</h3>
- <div class="row">
- <div class="span4">
- <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
- <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
+ <h3><code>.table-striped</code></h3>
+ <p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
+ <div class="bs-docs-example">
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped"&gt;
-&lt;/table&gt;</pre>
- </div>
- <div class="span8">
- <table class="table table-striped">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Larry</td>
- <td>the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
-
+&lt;/table&gt;
+</pre>
- <h3>3. Bordered table</h3>
- <div class="row">
- <div class="span4">
- <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
+ <h3><code>.table-bordered</code></h3>
+ <p>Add borders and rounded corners to the table.</p>
+ <div class="bs-docs-example">
+ <table class="table table-bordered">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td rowspan="2">1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@TwBootstrap</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
<pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt;
-&lt;/table&gt;</pre>
- </div>
- <div class="span8">
- <table class="table table-bordered">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td rowspan="2">1</td>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <td>Mark</td>
- <td>Otto</td>
- <td>@TwBootstrap</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <td>3</td>
- <td colspan="2">Larry the Bird</td>
- <td>@twitter</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
-
+&lt;/table&gt;
+</pre>
- <h3>4. Condensed table</h3>
- <div class="row">
- <div class="span4">
- <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p>
+ <h3><code>.table-hover</code></h3>
+ <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
+ <div class="bs-docs-example">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td colspan="2">Larry the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-condensed"&gt;
+&lt;table class="table table-hover"&gt;
-&lt;/table&gt;</pre>
- </div>
- <div class="span8">
- <table class="table table-condensed">
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>