From 3e9b461766fffe71c58da2d61cd3773f83caa2cf Mon Sep 17 00:00:00 2001 From: jonschlinkert Date: Sun, 26 Oct 2014 06:38:10 -0400 Subject: Replaces markdown.js with [remarkable](https://github.com/jonschlinkert/remarkable). - remarkable has 100% support for [commonmark](http://jgm.github.io/CommonMark/spec.html) - [faster](https://github.com/jonschlinkert/remarkable/tree/master/benchmark) - easier to monkeypatch. this is a goal of ours, might be useful to you at some point given the custom tokenizing/parsing you're doing for documentation. --- docs/_includes/customizer-variables.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index 21a0b8797..e3e3dab39 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -295,7 +295,7 @@

Buttons

-

For each of Bootstrap's buttons, define text, background and border color.

+

For each of Bootstrap's buttons, define text, background and border color.

-- cgit v1.2.3 From 3908235e0fb0550a6fcffe6499f3b6786900e85d Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 27 Oct 2014 19:35:59 +0200 Subject: Remove `baseurl` as it doesn't serve any real purpose. --- docs/_includes/header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/header.html b/docs/_includes/header.html index d3f78d424..bf536fc4d 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -6,7 +6,7 @@ - {% if page.url == site.baseurl %} + {% if page.layout == "home" %} {{ page.title }} {% else %} {{ page.title }} · Bootstrap -- cgit v1.2.3 From af70ac8ae1e959e90e6859a36ae29d41f10ee880 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Mon, 27 Oct 2014 13:50:45 -0700 Subject: Tweak parser to ignore empty Less section docstrings; fixes #14878 --- docs/_includes/customizer-variables.html | 25 ++++--------------------- 1 file changed, 4 insertions(+), 21 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index 21a0b8797..2c7eb69fc 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -379,7 +379,6 @@ </div> </div> <h2 id="forms">Forms</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@input-bg">@input-bg</label> @@ -653,7 +652,6 @@ </div> </div> <h2 id="navbar">Navbar</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@navbar-height">@navbar-height</label> @@ -809,7 +807,6 @@ </div> </div> <h2 id="navs">Navs</h2> -<p></p> <h3 id="shared-nav-styles">Shared nav styles</h3> <div class="row"> <div class="bs-customizer-input"> @@ -876,7 +873,6 @@ </div> </div> <h2 id="pagination">Pagination</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@pagination-color">@pagination-color</label> @@ -928,7 +924,6 @@ </div> </div> <h2 id="pager">Pager</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@pager-bg">@pager-bg</label> @@ -960,7 +955,6 @@ </div> </div> <h2 id="jumbotron">Jumbotron</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@jumbotron-padding">@jumbotron-padding</label> @@ -1036,7 +1030,6 @@ </div> </div> <h2 id="tooltips">Tooltips</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@tooltip-max-width">@tooltip-max-width</label> @@ -1069,7 +1062,6 @@ </div> </div> <h2 id="popovers">Popovers</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@popover-bg">@popover-bg</label> @@ -1123,7 +1115,6 @@ </div> </div> <h2 id="labels">Labels</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@label-default-bg">@label-default-bg</label> @@ -1167,7 +1158,6 @@ </div> </div> <h2 id="modals">Modals</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@modal-inner-padding">@modal-inner-padding</label> @@ -1297,7 +1287,6 @@ </div> </div> <h2 id="progress-bars">Progress bars</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@progress-bg">@progress-bg</label> @@ -1341,7 +1330,6 @@ </div> </div> <h2 id="list-group">List group</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@list-group-bg">@list-group-bg</label> @@ -1412,7 +1400,6 @@ </div> </div> <h2 id="panels">Panels</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@panel-bg">@panel-bg</label> @@ -1517,7 +1504,6 @@ </div> </div> <h2 id="thumbnails">Thumbnails</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@thumbnail-padding">@thumbnail-padding</label> @@ -1551,7 +1537,6 @@ </div> </div> <h2 id="wells">Wells</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@well-bg">@well-bg</label> @@ -1563,7 +1548,6 @@ </div> </div> <h2 id="badges">Badges</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@badge-color">@badge-color</label> @@ -1592,13 +1576,16 @@ <label for="input-@badge-font-weight">@badge-font-weight</label> <input id="input-@badge-font-weight" type="text" value="bold" data-var="@badge-font-weight" class="form-control"/> </div> + <div class="bs-customizer-input"> + <label for="input-@badge-line-height">@badge-line-height</label> + <input id="input-@badge-line-height" type="text" value="1" data-var="@badge-line-height" class="form-control"/> + </div> <div class="bs-customizer-input"> <label for="input-@badge-border-radius">@badge-border-radius</label> <input id="input-@badge-border-radius" type="text" value="10px" data-var="@badge-border-radius" class="form-control"/> </div> </div> <h2 id="breadcrumbs">Breadcrumbs</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@breadcrumb-padding-vertical">@breadcrumb-padding-vertical</label> @@ -1630,7 +1617,6 @@ </div> </div> <h2 id="carousel">Carousel</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@carousel-text-shadow">@carousel-text-shadow</label> @@ -1666,7 +1652,6 @@ </div> </div> <h2 id="close">Close</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@close-font-weight">@close-font-weight</label> @@ -1682,7 +1667,6 @@ </div> </div> <h2 id="code">Code</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@code-color">@code-color</label> @@ -1718,7 +1702,6 @@ </div> </div> <h2 id="type">Type</h2> -<p></p> <div class="row"> <div class="bs-customizer-input"> <label for="input-@component-offset-horizontal">@component-offset-horizontal</label> -- cgit v1.2.3 From 032a5ab72f8a7f0e786cb1d796ef895395b86e1f Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Mon, 27 Oct 2014 15:00:30 -0700 Subject: add clearfix divs to customizer input rows --- docs/_includes/customizer-variables.html | 100 +++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) (limited to 'docs/_includes') diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index 2c7eb69fc..d48970409 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -15,6 +15,7 @@ <label for="input-@gray-dark">@gray-dark</label> <input id="input-@gray-dark" type="text" value="lighten(@gray-base, 20%)" data-var="@gray-dark" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@gray">@gray</label> <input id="input-@gray" type="text" value="lighten(@gray-base, 33.5%)" data-var="@gray" class="form-control"/> @@ -27,6 +28,7 @@ <label for="input-@gray-lighter">@gray-lighter</label> <input id="input-@gray-lighter" type="text" value="lighten(@gray-base, 93.5%)" data-var="@gray-lighter" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@brand-primary">@brand-primary</label> <input id="input-@brand-primary" type="text" value="#428bca" data-var="@brand-primary" class="form-control"/> @@ -39,6 +41,7 @@ <label for="input-@brand-info">@brand-info</label> <input id="input-@brand-info" type="text" value="#5bc0de" data-var="@brand-info" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@brand-warning">@brand-warning</label> <input id="input-@brand-warning" type="text" value="#f0ad4e" data-var="@brand-warning" class="form-control"/> @@ -66,6 +69,7 @@ <input id="input-@link-color" type="text" value="@brand-primary" data-var="@link-color" class="form-control"/> <p class="help-block">Global textual link color.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@link-hover-color">@link-hover-color</label> <input id="input-@link-hover-color" type="text" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/> @@ -93,6 +97,7 @@ <input id="input-@font-family-monospace" type="text" value="Menlo, Monaco, Consolas, "Courier New", monospace" data-var="@font-family-monospace" class="form-control"/> <p class="help-block">Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code>.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@font-family-base">@font-family-base</label> <input id="input-@font-family-base" type="text" value="@font-family-sans-serif" data-var="@font-family-base" class="form-control"/> @@ -105,6 +110,7 @@ <label for="input-@font-size-large">@font-size-large</label> <input id="input-@font-size-large" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-large" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@font-size-small">@font-size-small</label> <input id="input-@font-size-small" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-small" class="form-control"/> @@ -117,6 +123,7 @@ <label for="input-@font-size-h2">@font-size-h2</label> <input id="input-@font-size-h2" type="text" value="floor((@font-size-base * 2.15))" data-var="@font-size-h2" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@font-size-h3">@font-size-h3</label> <input id="input-@font-size-h3" type="text" value="ceil((@font-size-base * 1.7))" data-var="@font-size-h3" class="form-control"/> @@ -129,6 +136,7 @@ <label for="input-@font-size-h5">@font-size-h5</label> <input id="input-@font-size-h5" type="text" value="@font-size-base" data-var="@font-size-h5" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@font-size-h6">@font-size-h6</label> <input id="input-@font-size-h6" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-h6" class="form-control"/> @@ -143,6 +151,7 @@ <input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/> <p class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@headings-font-family">@headings-font-family</label> <input id="input-@headings-font-family" type="text" value="inherit" data-var="@headings-font-family" class="form-control"/> @@ -156,6 +165,7 @@ <label for="input-@headings-line-height">@headings-line-height</label> <input id="input-@headings-line-height" type="text" value="1.1" data-var="@headings-line-height" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@headings-color">@headings-color</label> <input id="input-@headings-color" type="text" value="inherit" data-var="@headings-color" class="form-control"/> @@ -195,6 +205,7 @@ <label for="input-@padding-large-vertical">@padding-large-vertical</label> <input id="input-@padding-large-vertical" type="text" value="10px" data-var="@padding-large-vertical" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@padding-large-horizontal">@padding-large-horizontal</label> <input id="input-@padding-large-horizontal" type="text" value="16px" data-var="@padding-large-horizontal" class="form-control"/> @@ -207,6 +218,7 @@ <label for="input-@padding-small-horizontal">@padding-small-horizontal</label> <input id="input-@padding-small-horizontal" type="text" value="10px" data-var="@padding-small-horizontal" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@padding-xs-vertical">@padding-xs-vertical</label> <input id="input-@padding-xs-vertical" type="text" value="1px" data-var="@padding-xs-vertical" class="form-control"/> @@ -219,6 +231,7 @@ <label for="input-@line-height-large">@line-height-large</label> <input id="input-@line-height-large" type="text" value="1.33" data-var="@line-height-large" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@line-height-small">@line-height-small</label> <input id="input-@line-height-small" type="text" value="1.5" data-var="@line-height-small" class="form-control"/> @@ -231,6 +244,7 @@ <label for="input-@border-radius-large">@border-radius-large</label> <input id="input-@border-radius-large" type="text" value="6px" data-var="@border-radius-large" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@border-radius-small">@border-radius-small</label> <input id="input-@border-radius-small" type="text" value="3px" data-var="@border-radius-small" class="form-control"/> @@ -245,6 +259,7 @@ <input id="input-@component-active-bg" type="text" value="@brand-primary" data-var="@component-active-bg" class="form-control"/> <p class="help-block">Global background color for active items (e.g., navs or dropdowns).</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@caret-width-base">@caret-width-base</label> <input id="input-@caret-width-base" type="text" value="4px" data-var="@caret-width-base" class="form-control"/> @@ -274,6 +289,7 @@ <input id="input-@table-bg" type="text" value="transparent" data-var="@table-bg" class="form-control"/> <p class="help-block">Default background color used for all tables.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@table-bg-accent">@table-bg-accent</label> <input id="input-@table-bg-accent" type="text" value="#f9f9f9" data-var="@table-bg-accent" class="form-control"/> @@ -288,6 +304,7 @@ <label for="input-@table-bg-active">@table-bg-active</label> <input id="input-@table-bg-active" type="text" value="@table-bg-hover" data-var="@table-bg-active" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@table-border-color">@table-border-color</label> <input id="input-@table-border-color" type="text" value="#ddd" data-var="@table-border-color" class="form-control"/> @@ -309,6 +326,7 @@ <label for="input-@btn-default-bg">@btn-default-bg</label> <input id="input-@btn-default-bg" type="text" value="#fff" data-var="@btn-default-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@btn-default-border">@btn-default-border</label> <input id="input-@btn-default-border" type="text" value="#ccc" data-var="@btn-default-border" class="form-control"/> @@ -321,6 +339,7 @@ <label for="input-@btn-primary-bg">@btn-primary-bg</label> <input id="input-@btn-primary-bg" type="text" value="@brand-primary" data-var="@btn-primary-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@btn-primary-border">@btn-primary-border</label> <input id="input-@btn-primary-border" type="text" value="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border" class="form-control"/> @@ -333,6 +352,7 @@ <label for="input-@btn-success-bg">@btn-success-bg</label> <input id="input-@btn-success-bg" type="text" value="@brand-success" data-var="@btn-success-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@btn-success-border">@btn-success-border</label> <input id="input-@btn-success-border" type="text" value="darken(@btn-success-bg, 5%)" data-var="@btn-success-border" class="form-control"/> @@ -345,6 +365,7 @@ <label for="input-@btn-info-bg">@btn-info-bg</label> <input id="input-@btn-info-bg" type="text" value="@brand-info" data-var="@btn-info-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@btn-info-border">@btn-info-border</label> <input id="input-@btn-info-border" type="text" value="darken(@btn-info-bg, 5%)" data-var="@btn-info-border" class="form-control"/> @@ -357,6 +378,7 @@ <label for="input-@btn-warning-bg">@btn-warning-bg</label> <input id="input-@btn-warning-bg" type="text" value="@brand-warning" data-var="@btn-warning-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@btn-warning-border">@btn-warning-border</label> <input id="input-@btn-warning-border" type="text" value="darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border" class="form-control"/> @@ -369,6 +391,7 @@ <label for="input-@btn-danger-bg">@btn-danger-bg</label> <input id="input-@btn-danger-bg" type="text" value="@brand-danger" data-var="@btn-danger-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@btn-danger-border">@btn-danger-border</label> <input id="input-@btn-danger-border" type="text" value="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border" class="form-control"/> @@ -395,6 +418,7 @@ <input id="input-@input-color" type="text" value="@gray" data-var="@input-color" class="form-control"/> <p class="help-block">Text color for <code><input></code>s</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@input-border">@input-border</label> <input id="input-@input-border" type="text" value="#ccc" data-var="@input-border" class="form-control"/> @@ -410,6 +434,7 @@ <input id="input-@input-border-radius-large" type="text" value="@border-radius-large" data-var="@input-border-radius-large" class="form-control"/> <p class="help-block">Large <code>.form-control</code> border radius</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@input-border-radius-small">@input-border-radius-small</label> <input id="input-@input-border-radius-small" type="text" value="@border-radius-small" data-var="@input-border-radius-small" class="form-control"/> @@ -425,6 +450,7 @@ <input id="input-@input-color-placeholder" type="text" value="#999" data-var="@input-color-placeholder" class="form-control"/> <p class="help-block">Placeholder text color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@input-height-base">@input-height-base</label> <input id="input-@input-height-base" type="text" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control"/> @@ -440,6 +466,7 @@ <input id="input-@input-height-small" type="text" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control"/> <p class="help-block">Small <code>.form-control</code> height</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@legend-color">@legend-color</label> <input id="input-@legend-color" type="text" value="@gray-dark" data-var="@legend-color" class="form-control"/> @@ -453,6 +480,7 @@ <input id="input-@input-group-addon-bg" type="text" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/> <p class="help-block">Background color for textual input addons</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label> <input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/> @@ -477,6 +505,7 @@ <input id="input-@dropdown-fallback-border" type="text" value="#ccc" data-var="@dropdown-fallback-border" class="form-control"/> <p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label> <input id="input-@dropdown-divider-bg" type="text" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control"/> @@ -492,6 +521,7 @@ <input id="input-@dropdown-link-hover-color" type="text" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control"/> <p class="help-block">Hover color for dropdown links.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label> <input id="input-@dropdown-link-hover-bg" type="text" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control"/> @@ -507,6 +537,7 @@ <input id="input-@dropdown-link-active-bg" type="text" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control"/> <p class="help-block">Active dropdown menu item background color.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label> <input id="input-@dropdown-link-disabled-color" type="text" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control"/> @@ -541,6 +572,7 @@ <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/> <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@screen-sm">@screen-sm</label> <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/> @@ -555,6 +587,7 @@ <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/> <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@screen-md">@screen-md</label> <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/> @@ -569,6 +602,7 @@ <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/> <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@screen-lg">@screen-lg</label> <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/> @@ -583,6 +617,7 @@ <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/> <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@screen-xs-max">@screen-xs-max</label> <input id="input-@screen-xs-max" type="text" value="(@screen-sm-min - 1)" data-var="@screen-xs-max" class="form-control"/> @@ -614,6 +649,7 @@ <input id="input-@grid-float-breakpoint" type="text" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control"/> <p class="help-block">Point at which the navbar becomes uncollapsed.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label> <input id="input-@grid-float-breakpoint-max" type="text" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control"/> @@ -636,6 +672,7 @@ <label for="input-@container-desktop">@container-desktop</label> <input id="input-@container-desktop" type="text" value="(940px + @grid-gutter-width)" data-var="@container-desktop" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@container-md">@container-md</label> <input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/> @@ -665,6 +702,7 @@ <label for="input-@navbar-border-radius">@navbar-border-radius</label> <input id="input-@navbar-border-radius" type="text" value="@border-radius-base" data-var="@navbar-border-radius" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-padding-horizontal">@navbar-padding-horizontal</label> <input id="input-@navbar-padding-horizontal" type="text" value="floor((@grid-gutter-width / 2))" data-var="@navbar-padding-horizontal" class="form-control"/> @@ -677,6 +715,7 @@ <label for="input-@navbar-collapse-max-height">@navbar-collapse-max-height</label> <input id="input-@navbar-collapse-max-height" type="text" value="340px" data-var="@navbar-collapse-max-height" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-default-color">@navbar-default-color</label> <input id="input-@navbar-default-color" type="text" value="#777" data-var="@navbar-default-color" class="form-control"/> @@ -689,6 +728,7 @@ <label for="input-@navbar-default-border">@navbar-default-border</label> <input id="input-@navbar-default-border" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-default-link-color">@navbar-default-link-color</label> <input id="input-@navbar-default-link-color" type="text" value="#777" data-var="@navbar-default-link-color" class="form-control"/> @@ -701,6 +741,7 @@ <label for="input-@navbar-default-link-hover-bg">@navbar-default-link-hover-bg</label> <input id="input-@navbar-default-link-hover-bg" type="text" value="transparent" data-var="@navbar-default-link-hover-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-default-link-active-color">@navbar-default-link-active-color</label> <input id="input-@navbar-default-link-active-color" type="text" value="#555" data-var="@navbar-default-link-active-color" class="form-control"/> @@ -713,6 +754,7 @@ <label for="input-@navbar-default-link-disabled-color">@navbar-default-link-disabled-color</label> <input id="input-@navbar-default-link-disabled-color" type="text" value="#ccc" data-var="@navbar-default-link-disabled-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-default-link-disabled-bg">@navbar-default-link-disabled-bg</label> <input id="input-@navbar-default-link-disabled-bg" type="text" value="transparent" data-var="@navbar-default-link-disabled-bg" class="form-control"/> @@ -725,6 +767,7 @@ <label for="input-@navbar-default-brand-hover-color">@navbar-default-brand-hover-color</label> <input id="input-@navbar-default-brand-hover-color" type="text" value="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-default-brand-hover-bg">@navbar-default-brand-hover-bg</label> <input id="input-@navbar-default-brand-hover-bg" type="text" value="transparent" data-var="@navbar-default-brand-hover-bg" class="form-control"/> @@ -737,6 +780,7 @@ <label for="input-@navbar-default-toggle-icon-bar-bg">@navbar-default-toggle-icon-bar-bg</label> <input id="input-@navbar-default-toggle-icon-bar-bg" type="text" value="#888" data-var="@navbar-default-toggle-icon-bar-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-default-toggle-border-color">@navbar-default-toggle-border-color</label> <input id="input-@navbar-default-toggle-border-color" type="text" value="#ddd" data-var="@navbar-default-toggle-border-color" class="form-control"/> @@ -749,6 +793,7 @@ <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label> <input id="input-@navbar-inverse-bg" type="text" value="#222" data-var="@navbar-inverse-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-inverse-border">@navbar-inverse-border</label> <input id="input-@navbar-inverse-border" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border" class="form-control"/> @@ -761,6 +806,7 @@ <label for="input-@navbar-inverse-link-hover-color">@navbar-inverse-link-hover-color</label> <input id="input-@navbar-inverse-link-hover-color" type="text" value="#fff" data-var="@navbar-inverse-link-hover-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-inverse-link-hover-bg">@navbar-inverse-link-hover-bg</label> <input id="input-@navbar-inverse-link-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-link-hover-bg" class="form-control"/> @@ -773,6 +819,7 @@ <label for="input-@navbar-inverse-link-active-bg">@navbar-inverse-link-active-bg</label> <input id="input-@navbar-inverse-link-active-bg" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-inverse-link-disabled-color">@navbar-inverse-link-disabled-color</label> <input id="input-@navbar-inverse-link-disabled-color" type="text" value="#444" data-var="@navbar-inverse-link-disabled-color" class="form-control"/> @@ -785,6 +832,7 @@ <label for="input-@navbar-inverse-brand-color">@navbar-inverse-brand-color</label> <input id="input-@navbar-inverse-brand-color" type="text" value="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-inverse-brand-hover-color">@navbar-inverse-brand-hover-color</label> <input id="input-@navbar-inverse-brand-hover-color" type="text" value="#fff" data-var="@navbar-inverse-brand-hover-color" class="form-control"/> @@ -797,6 +845,7 @@ <label for="input-@navbar-inverse-toggle-hover-bg">@navbar-inverse-toggle-hover-bg</label> <input id="input-@navbar-inverse-toggle-hover-bg" type="text" value="#333" data-var="@navbar-inverse-toggle-hover-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@navbar-inverse-toggle-icon-bar-bg">@navbar-inverse-toggle-icon-bar-bg</label> <input id="input-@navbar-inverse-toggle-icon-bar-bg" type="text" value="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg" class="form-control"/> @@ -821,6 +870,7 @@ <label for="input-@nav-disabled-link-color">@nav-disabled-link-color</label> <input id="input-@nav-disabled-link-color" type="text" value="@gray-light" data-var="@nav-disabled-link-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@nav-disabled-link-hover-color">@nav-disabled-link-hover-color</label> <input id="input-@nav-disabled-link-hover-color" type="text" value="@gray-light" data-var="@nav-disabled-link-hover-color" class="form-control"/> @@ -840,6 +890,7 @@ <label for="input-@nav-tabs-active-link-hover-bg">@nav-tabs-active-link-hover-bg</label> <input id="input-@nav-tabs-active-link-hover-bg" type="text" value="@body-bg" data-var="@nav-tabs-active-link-hover-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@nav-tabs-active-link-hover-color">@nav-tabs-active-link-hover-color</label> <input id="input-@nav-tabs-active-link-hover-color" type="text" value="@gray" data-var="@nav-tabs-active-link-hover-color" class="form-control"/> @@ -852,6 +903,7 @@ <label for="input-@nav-tabs-justified-link-border-color">@nav-tabs-justified-link-border-color</label> <input id="input-@nav-tabs-justified-link-border-color" type="text" value="#ddd" data-var="@nav-tabs-justified-link-border-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@nav-tabs-justified-active-link-border-color">@nav-tabs-justified-active-link-border-color</label> <input id="input-@nav-tabs-justified-active-link-border-color" type="text" value="@body-bg" data-var="@nav-tabs-justified-active-link-border-color" class="form-control"/> @@ -886,6 +938,7 @@ <label for="input-@pagination-border">@pagination-border</label> <input id="input-@pagination-border" type="text" value="#ddd" data-var="@pagination-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@pagination-hover-color">@pagination-hover-color</label> <input id="input-@pagination-hover-color" type="text" value="@link-hover-color" data-var="@pagination-hover-color" class="form-control"/> @@ -898,6 +951,7 @@ <label for="input-@pagination-hover-border">@pagination-hover-border</label> <input id="input-@pagination-hover-border" type="text" value="#ddd" data-var="@pagination-hover-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@pagination-active-color">@pagination-active-color</label> <input id="input-@pagination-active-color" type="text" value="#fff" data-var="@pagination-active-color" class="form-control"/> @@ -910,6 +964,7 @@ <label for="input-@pagination-active-border">@pagination-active-border</label> <input id="input-@pagination-active-border" type="text" value="@brand-primary" data-var="@pagination-active-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@pagination-disabled-color">@pagination-disabled-color</label> <input id="input-@pagination-disabled-color" type="text" value="@gray-light" data-var="@pagination-disabled-color" class="form-control"/> @@ -937,6 +992,7 @@ <label for="input-@pager-border-radius">@pager-border-radius</label> <input id="input-@pager-border-radius" type="text" value="15px" data-var="@pager-border-radius" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@pager-hover-bg">@pager-hover-bg</label> <input id="input-@pager-hover-bg" type="text" value="@pagination-hover-bg" data-var="@pager-hover-bg" class="form-control"/> @@ -949,6 +1005,7 @@ <label for="input-@pager-active-color">@pager-active-color</label> <input id="input-@pager-active-color" type="text" value="@pagination-active-color" data-var="@pager-active-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@pager-disabled-color">@pager-disabled-color</label> <input id="input-@pager-disabled-color" type="text" value="@pagination-disabled-color" data-var="@pager-disabled-color" class="form-control"/> @@ -968,6 +1025,7 @@ <label for="input-@jumbotron-bg">@jumbotron-bg</label> <input id="input-@jumbotron-bg" type="text" value="@gray-lighter" data-var="@jumbotron-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@jumbotron-heading-color">@jumbotron-heading-color</label> <input id="input-@jumbotron-heading-color" type="text" value="inherit" data-var="@jumbotron-heading-color" class="form-control"/> @@ -992,6 +1050,7 @@ <label for="input-@state-success-border">@state-success-border</label> <input id="input-@state-success-border" type="text" value="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@state-info-text">@state-info-text</label> <input id="input-@state-info-text" type="text" value="#31708f" data-var="@state-info-text" class="form-control"/> @@ -1004,6 +1063,7 @@ <label for="input-@state-info-border">@state-info-border</label> <input id="input-@state-info-border" type="text" value="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@state-warning-text">@state-warning-text</label> <input id="input-@state-warning-text" type="text" value="#8a6d3b" data-var="@state-warning-text" class="form-control"/> @@ -1016,6 +1076,7 @@ <label for="input-@state-warning-border">@state-warning-border</label> <input id="input-@state-warning-border" type="text" value="darken(spin(@state-warning-bg, -10), 5%)" data-var="@state-warning-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@state-danger-text">@state-danger-text</label> <input id="input-@state-danger-text" type="text" value="#a94442" data-var="@state-danger-text" class="form-control"/> @@ -1046,6 +1107,7 @@ <input id="input-@tooltip-bg" type="text" value="#000" data-var="@tooltip-bg" class="form-control"/> <p class="help-block">Tooltip background color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@tooltip-opacity">@tooltip-opacity</label> <input id="input-@tooltip-opacity" type="text" value=".9" data-var="@tooltip-opacity" class="form-control"/> @@ -1078,6 +1140,7 @@ <input id="input-@popover-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control"/> <p class="help-block">Popover border color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label> <input id="input-@popover-fallback-border-color" type="text" value="#ccc" data-var="@popover-fallback-border-color" class="form-control"/> @@ -1093,6 +1156,7 @@ <input id="input-@popover-arrow-width" type="text" value="10px" data-var="@popover-arrow-width" class="form-control"/> <p class="help-block">Popover arrow width</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@popover-arrow-color">@popover-arrow-color</label> <input id="input-@popover-arrow-color" type="text" value="@popover-bg" data-var="@popover-arrow-color" class="form-control"/> @@ -1108,6 +1172,7 @@ <input id="input-@popover-arrow-outer-color" type="text" value="fadein(@popover-border-color, 5%)" data-var="@popover-arrow-outer-color" class="form-control"/> <p class="help-block">Popover outer arrow color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label> <input id="input-@popover-arrow-outer-fallback-color" type="text" value="darken(@popover-fallback-border-color, 20%)" data-var="@popover-arrow-outer-fallback-color" class="form-control"/> @@ -1131,6 +1196,7 @@ <input id="input-@label-success-bg" type="text" value="@brand-success" data-var="@label-success-bg" class="form-control"/> <p class="help-block">Success label background color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@label-info-bg">@label-info-bg</label> <input id="input-@label-info-bg" type="text" value="@brand-info" data-var="@label-info-bg" class="form-control"/> @@ -1146,6 +1212,7 @@ <input id="input-@label-danger-bg" type="text" value="@brand-danger" data-var="@label-danger-bg" class="form-control"/> <p class="help-block">Danger label background color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@label-color">@label-color</label> <input id="input-@label-color" type="text" value="#fff" data-var="@label-color" class="form-control"/> @@ -1174,6 +1241,7 @@ <input id="input-@modal-title-line-height" type="text" value="@line-height-base" data-var="@modal-title-line-height" class="form-control"/> <p class="help-block">Modal title line-height</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@modal-content-bg">@modal-content-bg</label> <input id="input-@modal-content-bg" type="text" value="#fff" data-var="@modal-content-bg" class="form-control"/> @@ -1189,6 +1257,7 @@ <input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/> <p class="help-block">Modal content border color <strong>for IE8</strong></p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label> <input id="input-@modal-backdrop-bg" type="text" value="#000" data-var="@modal-backdrop-bg" class="form-control"/> @@ -1204,6 +1273,7 @@ <input id="input-@modal-header-border-color" type="text" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control"/> <p class="help-block">Modal header border color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@modal-footer-border-color">@modal-footer-border-color</label> <input id="input-@modal-footer-border-color" type="text" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/> @@ -1217,6 +1287,7 @@ <label for="input-@modal-md">@modal-md</label> <input id="input-@modal-md" type="text" value="600px" data-var="@modal-md" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@modal-sm">@modal-sm</label> <input id="input-@modal-sm" type="text" value="300px" data-var="@modal-sm" class="form-control"/> @@ -1237,6 +1308,7 @@ <label for="input-@alert-link-font-weight">@alert-link-font-weight</label> <input id="input-@alert-link-font-weight" type="text" value="bold" data-var="@alert-link-font-weight" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@alert-success-bg">@alert-success-bg</label> <input id="input-@alert-success-bg" type="text" value="@state-success-bg" data-var="@alert-success-bg" class="form-control"/> @@ -1249,6 +1321,7 @@ <label for="input-@alert-success-border">@alert-success-border</label> <input id="input-@alert-success-border" type="text" value="@state-success-border" data-var="@alert-success-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@alert-info-bg">@alert-info-bg</label> <input id="input-@alert-info-bg" type="text" value="@state-info-bg" data-var="@alert-info-bg" class="form-control"/> @@ -1261,6 +1334,7 @@ <label for="input-@alert-info-border">@alert-info-border</label> <input id="input-@alert-info-border" type="text" value="@state-info-border" data-var="@alert-info-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@alert-warning-bg">@alert-warning-bg</label> <input id="input-@alert-warning-bg" type="text" value="@state-warning-bg" data-var="@alert-warning-bg" class="form-control"/> @@ -1273,6 +1347,7 @@ <label for="input-@alert-warning-border">@alert-warning-border</label> <input id="input-@alert-warning-border" type="text" value="@state-warning-border" data-var="@alert-warning-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@alert-danger-bg">@alert-danger-bg</label> <input id="input-@alert-danger-bg" type="text" value="@state-danger-bg" data-var="@alert-danger-bg" class="form-control"/> @@ -1303,6 +1378,7 @@ <input id="input-@progress-border-radius" type="text" value="@border-radius-base" data-var="@progress-border-radius" class="form-control"/> <p class="help-block">Variable for setting rounded corners on progress bar.</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@progress-bar-bg">@progress-bar-bg</label> <input id="input-@progress-bar-bg" type="text" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/> @@ -1318,6 +1394,7 @@ <input id="input-@progress-bar-warning-bg" type="text" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control"/> <p class="help-block">Warning progress bar color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label> <input id="input-@progress-bar-danger-bg" type="text" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control"/> @@ -1346,6 +1423,7 @@ <input id="input-@list-group-border-radius" type="text" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control"/> <p class="help-block">List group border radius</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@list-group-hover-bg">@list-group-hover-bg</label> <input id="input-@list-group-hover-bg" type="text" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control"/> @@ -1361,6 +1439,7 @@ <input id="input-@list-group-active-bg" type="text" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control"/> <p class="help-block">Background color of active list items</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@list-group-active-border">@list-group-active-border</label> <input id="input-@list-group-active-border" type="text" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control"/> @@ -1376,6 +1455,7 @@ <input id="input-@list-group-disabled-color" type="text" value="@gray-light" data-var="@list-group-disabled-color" class="form-control"/> <p class="help-block">Text color of disabled list items</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@list-group-disabled-bg">@list-group-disabled-bg</label> <input id="input-@list-group-disabled-bg" type="text" value="@gray-lighter" data-var="@list-group-disabled-bg" class="form-control"/> @@ -1390,6 +1470,7 @@ <label for="input-@list-group-link-color">@list-group-link-color</label> <input id="input-@list-group-link-color" type="text" value="#555" data-var="@list-group-link-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@list-group-link-hover-color">@list-group-link-hover-color</label> <input id="input-@list-group-link-hover-color" type="text" value="@list-group-link-color" data-var="@list-group-link-hover-color" class="form-control"/> @@ -1413,6 +1494,7 @@ <label for="input-@panel-heading-padding">@panel-heading-padding</label> <input id="input-@panel-heading-padding" type="text" value="10px 15px" data-var="@panel-heading-padding" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-footer-padding">@panel-footer-padding</label> <input id="input-@panel-footer-padding" type="text" value="@panel-heading-padding" data-var="@panel-footer-padding" class="form-control"/> @@ -1426,6 +1508,7 @@ <input id="input-@panel-inner-border" type="text" value="#ddd" data-var="@panel-inner-border" class="form-control"/> <p class="help-block">Border color for elements within panels</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-footer-bg">@panel-footer-bg</label> <input id="input-@panel-footer-bg" type="text" value="#f5f5f5" data-var="@panel-footer-bg" class="form-control"/> @@ -1438,6 +1521,7 @@ <label for="input-@panel-default-border">@panel-default-border</label> <input id="input-@panel-default-border" type="text" value="#ddd" data-var="@panel-default-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-default-heading-bg">@panel-default-heading-bg</label> <input id="input-@panel-default-heading-bg" type="text" value="#f5f5f5" data-var="@panel-default-heading-bg" class="form-control"/> @@ -1450,6 +1534,7 @@ <label for="input-@panel-primary-border">@panel-primary-border</label> <input id="input-@panel-primary-border" type="text" value="@brand-primary" data-var="@panel-primary-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-primary-heading-bg">@panel-primary-heading-bg</label> <input id="input-@panel-primary-heading-bg" type="text" value="@brand-primary" data-var="@panel-primary-heading-bg" class="form-control"/> @@ -1462,6 +1547,7 @@ <label for="input-@panel-success-border">@panel-success-border</label> <input id="input-@panel-success-border" type="text" value="@state-success-border" data-var="@panel-success-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-success-heading-bg">@panel-success-heading-bg</label> <input id="input-@panel-success-heading-bg" type="text" value="@state-success-bg" data-var="@panel-success-heading-bg" class="form-control"/> @@ -1474,6 +1560,7 @@ <label for="input-@panel-info-border">@panel-info-border</label> <input id="input-@panel-info-border" type="text" value="@state-info-border" data-var="@panel-info-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-info-heading-bg">@panel-info-heading-bg</label> <input id="input-@panel-info-heading-bg" type="text" value="@state-info-bg" data-var="@panel-info-heading-bg" class="form-control"/> @@ -1486,6 +1573,7 @@ <label for="input-@panel-warning-border">@panel-warning-border</label> <input id="input-@panel-warning-border" type="text" value="@state-warning-border" data-var="@panel-warning-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-warning-heading-bg">@panel-warning-heading-bg</label> <input id="input-@panel-warning-heading-bg" type="text" value="@state-warning-bg" data-var="@panel-warning-heading-bg" class="form-control"/> @@ -1498,6 +1586,7 @@ <label for="input-@panel-danger-border">@panel-danger-border</label> <input id="input-@panel-danger-border" type="text" value="@state-danger-border" data-var="@panel-danger-border" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@panel-danger-heading-bg">@panel-danger-heading-bg</label> <input id="input-@panel-danger-heading-bg" type="text" value="@state-danger-bg" data-var="@panel-danger-heading-bg" class="form-control"/> @@ -1520,6 +1609,7 @@ <input id="input-@thumbnail-border" type="text" value="#ddd" data-var="@thumbnail-border" class="form-control"/> <p class="help-block">Thumbnail border color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label> <input id="input-@thumbnail-border-radius" type="text" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control"/> @@ -1562,6 +1652,7 @@ <label for="input-@badge-bg">@badge-bg</label> <input id="input-@badge-bg" type="text" value="@gray-light" data-var="@badge-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@badge-active-color">@badge-active-color</label> <input id="input-@badge-active-color" type="text" value="@link-color" data-var="@badge-active-color" class="form-control"/> @@ -1576,6 +1667,7 @@ <label for="input-@badge-font-weight">@badge-font-weight</label> <input id="input-@badge-font-weight" type="text" value="bold" data-var="@badge-font-weight" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@badge-line-height">@badge-line-height</label> <input id="input-@badge-line-height" type="text" value="1" data-var="@badge-line-height" class="form-control"/> @@ -1600,6 +1692,7 @@ <input id="input-@breadcrumb-bg" type="text" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control"/> <p class="help-block">Breadcrumb background color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@breadcrumb-color">@breadcrumb-color</label> <input id="input-@breadcrumb-color" type="text" value="#ccc" data-var="@breadcrumb-color" class="form-control"/> @@ -1630,6 +1723,7 @@ <label for="input-@carousel-control-width">@carousel-control-width</label> <input id="input-@carousel-control-width" type="text" value="15%" data-var="@carousel-control-width" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@carousel-control-opacity">@carousel-control-opacity</label> <input id="input-@carousel-control-opacity" type="text" value=".5" data-var="@carousel-control-opacity" class="form-control"/> @@ -1642,6 +1736,7 @@ <label for="input-@carousel-indicator-active-bg">@carousel-indicator-active-bg</label> <input id="input-@carousel-indicator-active-bg" type="text" value="#fff" data-var="@carousel-indicator-active-bg" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@carousel-indicator-border-color">@carousel-indicator-border-color</label> <input id="input-@carousel-indicator-border-color" type="text" value="#fff" data-var="@carousel-indicator-border-color" class="form-control"/> @@ -1680,6 +1775,7 @@ <label for="input-@kbd-color">@kbd-color</label> <input id="input-@kbd-color" type="text" value="#fff" data-var="@kbd-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@kbd-bg">@kbd-bg</label> <input id="input-@kbd-bg" type="text" value="#333" data-var="@kbd-bg" class="form-control"/> @@ -1692,6 +1788,7 @@ <label for="input-@pre-color">@pre-color</label> <input id="input-@pre-color" type="text" value="@gray-dark" data-var="@pre-color" class="form-control"/> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@pre-border-color">@pre-border-color</label> <input id="input-@pre-border-color" type="text" value="#ccc" data-var="@pre-border-color" class="form-control"/> @@ -1718,6 +1815,7 @@ <input id="input-@abbr-border-color" type="text" value="@gray-light" data-var="@abbr-border-color" class="form-control"/> <p class="help-block">Abbreviations and acronyms border color</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@headings-small-color">@headings-small-color</label> <input id="input-@headings-small-color" type="text" value="@gray-light" data-var="@headings-small-color" class="form-control"/> @@ -1733,6 +1831,7 @@ <input id="input-@blockquote-font-size" type="text" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/> <p class="help-block">Blockquote font size</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@blockquote-border-color">@blockquote-border-color</label> <input id="input-@blockquote-border-color" type="text" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/> @@ -1748,6 +1847,7 @@ <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/> <p class="help-block">Width of horizontal description list titles</p> </div> + <div class="clearfix"></div> <div class="bs-customizer-input"> <label for="input-@hr-border">@hr-border</label> <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/> -- cgit v1.2.3 From a43d4767ba7a1d8d313f9c418a378b6749dd6040 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Mon, 27 Oct 2014 15:02:21 -0700 Subject: .bs-customizer-input => .col-xs-4 --- docs/_includes/customizer-variables.html | 746 +++++++++++++++---------------- 1 file changed, 373 insertions(+), 373 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index d48970409..cd9814513 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -3,50 +3,50 @@ <h2 id="colors">Colors</h2> <p>Gray and brand colors for use across Bootstrap.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@gray-base">@gray-base</label> <input id="input-@gray-base" type="text" value="#000" data-var="@gray-base" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@gray-darker">@gray-darker</label> <input id="input-@gray-darker" type="text" value="lighten(@gray-base, 13.5%)" data-var="@gray-darker" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@gray-dark">@gray-dark</label> <input id="input-@gray-dark" type="text" value="lighten(@gray-base, 20%)" data-var="@gray-dark" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@gray">@gray</label> <input id="input-@gray" type="text" value="lighten(@gray-base, 33.5%)" data-var="@gray" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@gray-light">@gray-light</label> <input id="input-@gray-light" type="text" value="lighten(@gray-base, 46.7%)" data-var="@gray-light" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@gray-lighter">@gray-lighter</label> <input id="input-@gray-lighter" type="text" value="lighten(@gray-base, 93.5%)" data-var="@gray-lighter" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@brand-primary">@brand-primary</label> <input id="input-@brand-primary" type="text" value="#428bca" data-var="@brand-primary" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@brand-success">@brand-success</label> <input id="input-@brand-success" type="text" value="#5cb85c" data-var="@brand-success" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@brand-info">@brand-info</label> <input id="input-@brand-info" type="text" value="#5bc0de" data-var="@brand-info" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@brand-warning">@brand-warning</label> <input id="input-@brand-warning" type="text" value="#f0ad4e" data-var="@brand-warning" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@brand-danger">@brand-danger</label> <input id="input-@brand-danger" type="text" value="#d9534f" data-var="@brand-danger" class="form-control"/> </div> @@ -54,28 +54,28 @@ <h2 id="scaffolding">Scaffolding</h2> <p>Settings for some of the most global styles.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@body-bg">@body-bg</label> <input id="input-@body-bg" type="text" value="#fff" data-var="@body-bg" class="form-control"/> <p class="help-block">Background color for <code><body></code>.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@text-color">@text-color</label> <input id="input-@text-color" type="text" value="@gray-dark" data-var="@text-color" class="form-control"/> <p class="help-block">Global text color on <code><body></code>.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@link-color">@link-color</label> <input id="input-@link-color" type="text" value="@brand-primary" data-var="@link-color" class="form-control"/> <p class="help-block">Global textual link color.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@link-hover-color">@link-hover-color</label> <input id="input-@link-hover-color" type="text" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/> <p class="help-block">Link hover color set via <code>darken()</code> function.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@link-hover-decoration">@link-hover-decoration</label> <input id="input-@link-hover-decoration" type="text" value="underline" data-var="@link-hover-decoration" class="form-control"/> <p class="help-block">Link hover decoration.</p> @@ -84,89 +84,89 @@ <h2 id="typography">Typography</h2> <p>Font, line-height, and color for body text, headings, and more.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-family-sans-serif">@font-family-sans-serif</label> <input id="input-@font-family-sans-serif" type="text" value=""Helvetica Neue", Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-family-serif">@font-family-serif</label> <input id="input-@font-family-serif" type="text" value="Georgia, "Times New Roman", Times, serif" data-var="@font-family-serif" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-family-monospace">@font-family-monospace</label> <input id="input-@font-family-monospace" type="text" value="Menlo, Monaco, Consolas, "Courier New", monospace" data-var="@font-family-monospace" class="form-control"/> <p class="help-block">Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code>.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-family-base">@font-family-base</label> <input id="input-@font-family-base" type="text" value="@font-family-sans-serif" data-var="@font-family-base" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-base">@font-size-base</label> <input id="input-@font-size-base" type="text" value="14px" data-var="@font-size-base" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-large">@font-size-large</label> <input id="input-@font-size-large" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-large" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-small">@font-size-small</label> <input id="input-@font-size-small" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-small" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-h1">@font-size-h1</label> <input id="input-@font-size-h1" type="text" value="floor((@font-size-base * 2.6))" data-var="@font-size-h1" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-h2">@font-size-h2</label> <input id="input-@font-size-h2" type="text" value="floor((@font-size-base * 2.15))" data-var="@font-size-h2" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-h3">@font-size-h3</label> <input id="input-@font-size-h3" type="text" value="ceil((@font-size-base * 1.7))" data-var="@font-size-h3" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-h4">@font-size-h4</label> <input id="input-@font-size-h4" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-h4" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-h5">@font-size-h5</label> <input id="input-@font-size-h5" type="text" value="@font-size-base" data-var="@font-size-h5" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@font-size-h6">@font-size-h6</label> <input id="input-@font-size-h6" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-h6" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@line-height-base">@line-height-base</label> <input id="input-@line-height-base" type="text" value="1.428571429" data-var="@line-height-base" class="form-control"/> <p class="help-block">Unit-less <code>line-height</code> for use in components like buttons.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@line-height-computed">@line-height-computed</label> <input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/> <p class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@headings-font-family">@headings-font-family</label> <input id="input-@headings-font-family" type="text" value="inherit" data-var="@headings-font-family" class="form-control"/> <p class="help-block">By default, this inherits from the <code><body></code>.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@headings-font-weight">@headings-font-weight</label> <input id="input-@headings-font-weight" type="text" value="500" data-var="@headings-font-weight" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@headings-line-height">@headings-line-height</label> <input id="input-@headings-line-height" type="text" value="1.1" data-var="@headings-line-height" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@headings-color">@headings-color</label> <input id="input-@headings-color" type="text" value="inherit" data-var="@headings-color" class="form-control"/> </div> @@ -174,17 +174,17 @@ <h2 id="iconography">Iconography</h2> <p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@icon-font-path">@icon-font-path</label> <input id="input-@icon-font-path" type="text" value=""../fonts/"" data-var="@icon-font-path" class="form-control"/> <p class="help-block">Load fonts from this directory.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@icon-font-name">@icon-font-name</label> <input id="input-@icon-font-name" type="text" value=""glyphicons-halflings-regular"" data-var="@icon-font-name" class="form-control"/> <p class="help-block">File name for all font files.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@icon-font-svg-id">@icon-font-svg-id</label> <input id="input-@icon-font-svg-id" type="text" value=""glyphicons_halflingsregular"" data-var="@icon-font-svg-id" class="form-control"/> <p class="help-block">Element ID within SVG icon file.</p> @@ -193,79 +193,79 @@ <h2 id="components">Components</h2> <p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-base-vertical">@padding-base-vertical</label> <input id="input-@padding-base-vertical" type="text" value="6px" data-var="@padding-base-vertical" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-base-horizontal">@padding-base-horizontal</label> <input id="input-@padding-base-horizontal" type="text" value="12px" data-var="@padding-base-horizontal" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-large-vertical">@padding-large-vertical</label> <input id="input-@padding-large-vertical" type="text" value="10px" data-var="@padding-large-vertical" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-large-horizontal">@padding-large-horizontal</label> <input id="input-@padding-large-horizontal" type="text" value="16px" data-var="@padding-large-horizontal" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-small-vertical">@padding-small-vertical</label> <input id="input-@padding-small-vertical" type="text" value="5px" data-var="@padding-small-vertical" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-small-horizontal">@padding-small-horizontal</label> <input id="input-@padding-small-horizontal" type="text" value="10px" data-var="@padding-small-horizontal" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-xs-vertical">@padding-xs-vertical</label> <input id="input-@padding-xs-vertical" type="text" value="1px" data-var="@padding-xs-vertical" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@padding-xs-horizontal">@padding-xs-horizontal</label> <input id="input-@padding-xs-horizontal" type="text" value="5px" data-var="@padding-xs-horizontal" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@line-height-large">@line-height-large</label> <input id="input-@line-height-large" type="text" value="1.33" data-var="@line-height-large" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@line-height-small">@line-height-small</label> <input id="input-@line-height-small" type="text" value="1.5" data-var="@line-height-small" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@border-radius-base">@border-radius-base</label> <input id="input-@border-radius-base" type="text" value="4px" data-var="@border-radius-base" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@border-radius-large">@border-radius-large</label> <input id="input-@border-radius-large" type="text" value="6px" data-var="@border-radius-large" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@border-radius-small">@border-radius-small</label> <input id="input-@border-radius-small" type="text" value="3px" data-var="@border-radius-small" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@component-active-color">@component-active-color</label> <input id="input-@component-active-color" type="text" value="#fff" data-var="@component-active-color" class="form-control"/> <p class="help-block">Global color for active items (e.g., navs or dropdowns).</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@component-active-bg">@component-active-bg</label> <input id="input-@component-active-bg" type="text" value="@brand-primary" data-var="@component-active-bg" class="form-control"/> <p class="help-block">Global background color for active items (e.g., navs or dropdowns).</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@caret-width-base">@caret-width-base</label> <input id="input-@caret-width-base" type="text" value="4px" data-var="@caret-width-base" class="form-control"/> <p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@caret-width-large">@caret-width-large</label> <input id="input-@caret-width-large" type="text" value="5px" data-var="@caret-width-large" class="form-control"/> <p class="help-block">Carets increase slightly in size for larger components.</p> @@ -274,38 +274,38 @@ <h2 id="tables">Tables</h2> <p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@table-cell-padding">@table-cell-padding</label> <input id="input-@table-cell-padding" type="text" value="8px" data-var="@table-cell-padding" class="form-control"/> <p class="help-block">Padding for <code><th></code>s and <code><td></code>s.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@table-condensed-cell-padding">@table-condensed-cell-padding</label> <input id="input-@table-condensed-cell-padding" type="text" value="5px" data-var="@table-condensed-cell-padding" class="form-control"/> <p class="help-block">Padding for cells in <code>.table-condensed</code>.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@table-bg">@table-bg</label> <input id="input-@table-bg" type="text" value="transparent" data-var="@table-bg" class="form-control"/> <p class="help-block">Default background color used for all tables.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@table-bg-accent">@table-bg-accent</label> <input id="input-@table-bg-accent" type="text" value="#f9f9f9" data-var="@table-bg-accent" class="form-control"/> <p class="help-block">Background color used for <code>.table-striped</code>.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@table-bg-hover">@table-bg-hover</label> <input id="input-@table-bg-hover" type="text" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/> <p class="help-block">Background color used for <code>.table-hover</code>.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@table-bg-active">@table-bg-active</label> <input id="input-@table-bg-active" type="text" value="@table-bg-hover" data-var="@table-bg-active" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@table-border-color">@table-border-color</label> <input id="input-@table-border-color" type="text" value="#ddd" data-var="@table-border-color" class="form-control"/> <p class="help-block">Border color for table and cell borders.</p> @@ -314,174 +314,174 @@ <h2 id="buttons">Buttons</h2> <p>For each of Bootstrap's buttons, define text, background and border color.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-font-weight">@btn-font-weight</label> <input id="input-@btn-font-weight" type="text" value="normal" data-var="@btn-font-weight" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-default-color">@btn-default-color</label> <input id="input-@btn-default-color" type="text" value="#333" data-var="@btn-default-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-default-bg">@btn-default-bg</label> <input id="input-@btn-default-bg" type="text" value="#fff" data-var="@btn-default-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-default-border">@btn-default-border</label> <input id="input-@btn-default-border" type="text" value="#ccc" data-var="@btn-default-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-primary-color">@btn-primary-color</label> <input id="input-@btn-primary-color" type="text" value="#fff" data-var="@btn-primary-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-primary-bg">@btn-primary-bg</label> <input id="input-@btn-primary-bg" type="text" value="@brand-primary" data-var="@btn-primary-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-primary-border">@btn-primary-border</label> <input id="input-@btn-primary-border" type="text" value="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-success-color">@btn-success-color</label> <input id="input-@btn-success-color" type="text" value="#fff" data-var="@btn-success-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-success-bg">@btn-success-bg</label> <input id="input-@btn-success-bg" type="text" value="@brand-success" data-var="@btn-success-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-success-border">@btn-success-border</label> <input id="input-@btn-success-border" type="text" value="darken(@btn-success-bg, 5%)" data-var="@btn-success-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-info-color">@btn-info-color</label> <input id="input-@btn-info-color" type="text" value="#fff" data-var="@btn-info-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-info-bg">@btn-info-bg</label> <input id="input-@btn-info-bg" type="text" value="@brand-info" data-var="@btn-info-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-info-border">@btn-info-border</label> <input id="input-@btn-info-border" type="text" value="darken(@btn-info-bg, 5%)" data-var="@btn-info-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-warning-color">@btn-warning-color</label> <input id="input-@btn-warning-color" type="text" value="#fff" data-var="@btn-warning-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-warning-bg">@btn-warning-bg</label> <input id="input-@btn-warning-bg" type="text" value="@brand-warning" data-var="@btn-warning-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-warning-border">@btn-warning-border</label> <input id="input-@btn-warning-border" type="text" value="darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-danger-color">@btn-danger-color</label> <input id="input-@btn-danger-color" type="text" value="#fff" data-var="@btn-danger-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-danger-bg">@btn-danger-bg</label> <input id="input-@btn-danger-bg" type="text" value="@brand-danger" data-var="@btn-danger-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-danger-border">@btn-danger-border</label> <input id="input-@btn-danger-border" type="text" value="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@btn-link-disabled-color">@btn-link-disabled-color</label> <input id="input-@btn-link-disabled-color" type="text" value="@gray-light" data-var="@btn-link-disabled-color" class="form-control"/> </div> </div> <h2 id="forms">Forms</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-bg">@input-bg</label> <input id="input-@input-bg" type="text" value="#fff" data-var="@input-bg" class="form-control"/> <p class="help-block"><code><input></code> background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-bg-disabled">@input-bg-disabled</label> <input id="input-@input-bg-disabled" type="text" value="@gray-lighter" data-var="@input-bg-disabled" class="form-control"/> <p class="help-block"><code><input disabled></code> background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-color">@input-color</label> <input id="input-@input-color" type="text" value="@gray" data-var="@input-color" class="form-control"/> <p class="help-block">Text color for <code><input></code>s</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-border">@input-border</label> <input id="input-@input-border" type="text" value="#ccc" data-var="@input-border" class="form-control"/> <p class="help-block"><code><input></code> border color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-border-radius">@input-border-radius</label> <input id="input-@input-border-radius" type="text" value="@border-radius-base" data-var="@input-border-radius" class="form-control"/> <p class="help-block">Default <code>.form-control</code> border radius</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-border-radius-large">@input-border-radius-large</label> <input id="input-@input-border-radius-large" type="text" value="@border-radius-large" data-var="@input-border-radius-large" class="form-control"/> <p class="help-block">Large <code>.form-control</code> border radius</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-border-radius-small">@input-border-radius-small</label> <input id="input-@input-border-radius-small" type="text" value="@border-radius-small" data-var="@input-border-radius-small" class="form-control"/> <p class="help-block">Small <code>.form-control</code> border radius</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-border-focus">@input-border-focus</label> <input id="input-@input-border-focus" type="text" value="#66afe9" data-var="@input-border-focus" class="form-control"/> <p class="help-block">Border color for inputs on focus</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-color-placeholder">@input-color-placeholder</label> <input id="input-@input-color-placeholder" type="text" value="#999" data-var="@input-color-placeholder" class="form-control"/> <p class="help-block">Placeholder text color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-height-base">@input-height-base</label> <input id="input-@input-height-base" type="text" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control"/> <p class="help-block">Default <code>.form-control</code> height</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-height-large">@input-height-large</label> <input id="input-@input-height-large" type="text" value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large" class="form-control"/> <p class="help-block">Large <code>.form-control</code> height</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-height-small">@input-height-small</label> <input id="input-@input-height-small" type="text" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control"/> <p class="help-block">Small <code>.form-control</code> height</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@legend-color">@legend-color</label> <input id="input-@legend-color" type="text" value="@gray-dark" data-var="@legend-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@legend-border-color">@legend-border-color</label> <input id="input-@legend-border-color" type="text" value="#e5e5e5" data-var="@legend-border-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-group-addon-bg">@input-group-addon-bg</label> <input id="input-@input-group-addon-bg" type="text" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/> <p class="help-block">Background color for textual input addons</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label> <input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/> <p class="help-block">Border color for textual input addons</p> @@ -490,65 +490,65 @@ <h2 id="dropdowns">Dropdowns</h2> <p>Dropdown menu container and contents.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-bg">@dropdown-bg</label> <input id="input-@dropdown-bg" type="text" value="#fff" data-var="@dropdown-bg" class="form-control"/> <p class="help-block">Background for the dropdown menu.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-border">@dropdown-border</label> <input id="input-@dropdown-border" type="text" value="rgba(0,0,0,.15)" data-var="@dropdown-border" class="form-control"/> <p class="help-block">Dropdown menu <code>border-color</code>.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-fallback-border">@dropdown-fallback-border</label> <input id="input-@dropdown-fallback-border" type="text" value="#ccc" data-var="@dropdown-fallback-border" class="form-control"/> <p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label> <input id="input-@dropdown-divider-bg" type="text" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control"/> <p class="help-block">Divider color for between dropdown items.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-link-color">@dropdown-link-color</label> <input id="input-@dropdown-link-color" type="text" value="@gray-dark" data-var="@dropdown-link-color" class="form-control"/> <p class="help-block">Dropdown link text color.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-link-hover-color">@dropdown-link-hover-color</label> <input id="input-@dropdown-link-hover-color" type="text" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control"/> <p class="help-block">Hover color for dropdown links.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label> <input id="input-@dropdown-link-hover-bg" type="text" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control"/> <p class="help-block">Hover background for dropdown links.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-link-active-color">@dropdown-link-active-color</label> <input id="input-@dropdown-link-active-color" type="text" value="@component-active-color" data-var="@dropdown-link-active-color" class="form-control"/> <p class="help-block">Active dropdown menu item text color.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-link-active-bg">@dropdown-link-active-bg</label> <input id="input-@dropdown-link-active-bg" type="text" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control"/> <p class="help-block">Active dropdown menu item background color.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label> <input id="input-@dropdown-link-disabled-color" type="text" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control"/> <p class="help-block">Disabled dropdown menu item background color.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-header-color">@dropdown-header-color</label> <input id="input-@dropdown-header-color" type="text" value="@gray-light" data-var="@dropdown-header-color" class="form-control"/> <p class="help-block">Text color for headers within dropdown menus.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dropdown-caret-color">@dropdown-caret-color</label> <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/> <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p> @@ -557,76 +557,76 @@ <h2 id="media-queries-breakpoints">Media queries breakpoints</h2> <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-xs">@screen-xs</label> <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/> <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-xs-min">@screen-xs-min</label> <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/> <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-phone">@screen-phone</label> <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/> <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-sm">@screen-sm</label> <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/> <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-sm-min">@screen-sm-min</label> <input id="input-@screen-sm-min" type="text" value="@screen-sm" data-var="@screen-sm-min" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-tablet">@screen-tablet</label> <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/> <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-md">@screen-md</label> <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/> <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-md-min">@screen-md-min</label> <input id="input-@screen-md-min" type="text" value="@screen-md" data-var="@screen-md-min" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-desktop">@screen-desktop</label> <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/> <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-lg">@screen-lg</label> <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/> <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-lg-min">@screen-lg-min</label> <input id="input-@screen-lg-min" type="text" value="@screen-lg" data-var="@screen-lg-min" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-lg-desktop">@screen-lg-desktop</label> <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/> <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-xs-max">@screen-xs-max</label> <input id="input-@screen-xs-max" type="text" value="(@screen-sm-min - 1)" data-var="@screen-xs-max" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-sm-max">@screen-sm-max</label> <input id="input-@screen-sm-max" type="text" value="(@screen-md-min - 1)" data-var="@screen-sm-max" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@screen-md-max">@screen-md-max</label> <input id="input-@screen-md-max" type="text" value="(@screen-lg-min - 1)" data-var="@screen-md-max" class="form-control"/> </div> @@ -634,23 +634,23 @@ <h2 id="grid-system">Grid system</h2> <p>Define your custom responsive grid.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@grid-columns">@grid-columns</label> <input id="input-@grid-columns" type="text" value="12" data-var="@grid-columns" class="form-control"/> <p class="help-block">Number of columns in the grid.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@grid-gutter-width">@grid-gutter-width</label> <input id="input-@grid-gutter-width" type="text" value="30px" data-var="@grid-gutter-width" class="form-control"/> <p class="help-block">Padding between columns. Gets divided in half for the left and right.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label> <input id="input-@grid-float-breakpoint" type="text" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control"/> <p class="help-block">Point at which the navbar becomes uncollapsed.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label> <input id="input-@grid-float-breakpoint-max" type="text" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control"/> <p class="help-block">Point at which the navbar begins collapsing.</p> @@ -659,30 +659,30 @@ <h2 id="container-sizes">Container sizes</h2> <p>Define the maximum width of <code>.container</code> for different screen sizes.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@container-tablet">@container-tablet</label> <input id="input-@container-tablet" type="text" value="(720px + @grid-gutter-width)" data-var="@container-tablet" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@container-sm">@container-sm</label> <input id="input-@container-sm" type="text" value="@container-tablet" data-var="@container-sm" class="form-control"/> <p class="help-block">For <code>@screen-sm-min</code> and up.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@container-desktop">@container-desktop</label> <input id="input-@container-desktop" type="text" value="(940px + @grid-gutter-width)" data-var="@container-desktop" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@container-md">@container-md</label> <input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/> <p class="help-block">For <code>@screen-md-min</code> and up.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@container-large-desktop">@container-large-desktop</label> <input id="input-@container-large-desktop" type="text" value="(1140px + @grid-gutter-width)" data-var="@container-large-desktop" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@container-lg">@container-lg</label> <input id="input-@container-lg" type="text" value="@container-large-desktop" data-var="@container-lg" class="form-control"/> <p class="help-block">For <code>@screen-lg-min</code> and up.</p> @@ -690,167 +690,167 @@ </div> <h2 id="navbar">Navbar</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-height">@navbar-height</label> <input id="input-@navbar-height" type="text" value="50px" data-var="@navbar-height" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-margin-bottom">@navbar-margin-bottom</label> <input id="input-@navbar-margin-bottom" type="text" value="@line-height-computed" data-var="@navbar-margin-bottom" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-border-radius">@navbar-border-radius</label> <input id="input-@navbar-border-radius" type="text" value="@border-radius-base" data-var="@navbar-border-radius" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-padding-horizontal">@navbar-padding-horizontal</label> <input id="input-@navbar-padding-horizontal" type="text" value="floor((@grid-gutter-width / 2))" data-var="@navbar-padding-horizontal" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-padding-vertical">@navbar-padding-vertical</label> <input id="input-@navbar-padding-vertical" type="text" value="((@navbar-height - @line-height-computed) / 2)" data-var="@navbar-padding-vertical" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-collapse-max-height">@navbar-collapse-max-height</label> <input id="input-@navbar-collapse-max-height" type="text" value="340px" data-var="@navbar-collapse-max-height" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-color">@navbar-default-color</label> <input id="input-@navbar-default-color" type="text" value="#777" data-var="@navbar-default-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-bg">@navbar-default-bg</label> <input id="input-@navbar-default-bg" type="text" value="#f8f8f8" data-var="@navbar-default-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-border">@navbar-default-border</label> <input id="input-@navbar-default-border" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-link-color">@navbar-default-link-color</label> <input id="input-@navbar-default-link-color" type="text" value="#777" data-var="@navbar-default-link-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-link-hover-color">@navbar-default-link-hover-color</label> <input id="input-@navbar-default-link-hover-color" type="text" value="#333" data-var="@navbar-default-link-hover-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-link-hover-bg">@navbar-default-link-hover-bg</label> <input id="input-@navbar-default-link-hover-bg" type="text" value="transparent" data-var="@navbar-default-link-hover-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-link-active-color">@navbar-default-link-active-color</label> <input id="input-@navbar-default-link-active-color" type="text" value="#555" data-var="@navbar-default-link-active-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-link-active-bg">@navbar-default-link-active-bg</label> <input id="input-@navbar-default-link-active-bg" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-link-disabled-color">@navbar-default-link-disabled-color</label> <input id="input-@navbar-default-link-disabled-color" type="text" value="#ccc" data-var="@navbar-default-link-disabled-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-link-disabled-bg">@navbar-default-link-disabled-bg</label> <input id="input-@navbar-default-link-disabled-bg" type="text" value="transparent" data-var="@navbar-default-link-disabled-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-brand-color">@navbar-default-brand-color</label> <input id="input-@navbar-default-brand-color" type="text" value="@navbar-default-link-color" data-var="@navbar-default-brand-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-brand-hover-color">@navbar-default-brand-hover-color</label> <input id="input-@navbar-default-brand-hover-color" type="text" value="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-brand-hover-bg">@navbar-default-brand-hover-bg</label> <input id="input-@navbar-default-brand-hover-bg" type="text" value="transparent" data-var="@navbar-default-brand-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-toggle-hover-bg">@navbar-default-toggle-hover-bg</label> <input id="input-@navbar-default-toggle-hover-bg" type="text" value="#ddd" data-var="@navbar-default-toggle-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-toggle-icon-bar-bg">@navbar-default-toggle-icon-bar-bg</label> <input id="input-@navbar-default-toggle-icon-bar-bg" type="text" value="#888" data-var="@navbar-default-toggle-icon-bar-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-default-toggle-border-color">@navbar-default-toggle-border-color</label> <input id="input-@navbar-default-toggle-border-color" type="text" value="#ddd" data-var="@navbar-default-toggle-border-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-color">@navbar-inverse-color</label> <input id="input-@navbar-inverse-color" type="text" value="lighten(@gray-light, 15%)" data-var="@navbar-inverse-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label> <input id="input-@navbar-inverse-bg" type="text" value="#222" data-var="@navbar-inverse-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-border">@navbar-inverse-border</label> <input id="input-@navbar-inverse-border" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-link-color">@navbar-inverse-link-color</label> <input id="input-@navbar-inverse-link-color" type="text" value="lighten(@gray-light, 15%)" data-var="@navbar-inverse-link-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-link-hover-color">@navbar-inverse-link-hover-color</label> <input id="input-@navbar-inverse-link-hover-color" type="text" value="#fff" data-var="@navbar-inverse-link-hover-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-link-hover-bg">@navbar-inverse-link-hover-bg</label> <input id="input-@navbar-inverse-link-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-link-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-link-active-color">@navbar-inverse-link-active-color</label> <input id="input-@navbar-inverse-link-active-color" type="text" value="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-link-active-bg">@navbar-inverse-link-active-bg</label> <input id="input-@navbar-inverse-link-active-bg" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-link-disabled-color">@navbar-inverse-link-disabled-color</label> <input id="input-@navbar-inverse-link-disabled-color" type="text" value="#444" data-var="@navbar-inverse-link-disabled-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-link-disabled-bg">@navbar-inverse-link-disabled-bg</label> <input id="input-@navbar-inverse-link-disabled-bg" type="text" value="transparent" data-var="@navbar-inverse-link-disabled-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-brand-color">@navbar-inverse-brand-color</label> <input id="input-@navbar-inverse-brand-color" type="text" value="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-brand-hover-color">@navbar-inverse-brand-hover-color</label> <input id="input-@navbar-inverse-brand-hover-color" type="text" value="#fff" data-var="@navbar-inverse-brand-hover-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-brand-hover-bg">@navbar-inverse-brand-hover-bg</label> <input id="input-@navbar-inverse-brand-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-brand-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-toggle-hover-bg">@navbar-inverse-toggle-hover-bg</label> <input id="input-@navbar-inverse-toggle-hover-bg" type="text" value="#333" data-var="@navbar-inverse-toggle-hover-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-toggle-icon-bar-bg">@navbar-inverse-toggle-icon-bar-bg</label> <input id="input-@navbar-inverse-toggle-icon-bar-bg" type="text" value="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@navbar-inverse-toggle-border-color">@navbar-inverse-toggle-border-color</label> <input id="input-@navbar-inverse-toggle-border-color" type="text" value="#333" data-var="@navbar-inverse-toggle-border-color" class="form-control"/> </div> @@ -858,179 +858,179 @@ <h2 id="navs">Navs</h2> <h3 id="shared-nav-styles">Shared nav styles</h3> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-link-padding">@nav-link-padding</label> <input id="input-@nav-link-padding" type="text" value="10px 15px" data-var="@nav-link-padding" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-link-hover-bg">@nav-link-hover-bg</label> <input id="input-@nav-link-hover-bg" type="text" value="@gray-lighter" data-var="@nav-link-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-disabled-link-color">@nav-disabled-link-color</label> <input id="input-@nav-disabled-link-color" type="text" value="@gray-light" data-var="@nav-disabled-link-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-disabled-link-hover-color">@nav-disabled-link-hover-color</label> <input id="input-@nav-disabled-link-hover-color" type="text" value="@gray-light" data-var="@nav-disabled-link-hover-color" class="form-control"/> </div> </div> <h2 id="tabs">Tabs</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-tabs-border-color">@nav-tabs-border-color</label> <input id="input-@nav-tabs-border-color" type="text" value="#ddd" data-var="@nav-tabs-border-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-tabs-link-hover-border-color">@nav-tabs-link-hover-border-color</label> <input id="input-@nav-tabs-link-hover-border-color" type="text" value="@gray-lighter" data-var="@nav-tabs-link-hover-border-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-tabs-active-link-hover-bg">@nav-tabs-active-link-hover-bg</label> <input id="input-@nav-tabs-active-link-hover-bg" type="text" value="@body-bg" data-var="@nav-tabs-active-link-hover-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-tabs-active-link-hover-color">@nav-tabs-active-link-hover-color</label> <input id="input-@nav-tabs-active-link-hover-color" type="text" value="@gray" data-var="@nav-tabs-active-link-hover-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-tabs-active-link-hover-border-color">@nav-tabs-active-link-hover-border-color</label> <input id="input-@nav-tabs-active-link-hover-border-color" type="text" value="#ddd" data-var="@nav-tabs-active-link-hover-border-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-tabs-justified-link-border-color">@nav-tabs-justified-link-border-color</label> <input id="input-@nav-tabs-justified-link-border-color" type="text" value="#ddd" data-var="@nav-tabs-justified-link-border-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-tabs-justified-active-link-border-color">@nav-tabs-justified-active-link-border-color</label> <input id="input-@nav-tabs-justified-active-link-border-color" type="text" value="@body-bg" data-var="@nav-tabs-justified-active-link-border-color" class="form-control"/> </div> </div> <h2 id="pills">Pills</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-pills-border-radius">@nav-pills-border-radius</label> <input id="input-@nav-pills-border-radius" type="text" value="@border-radius-base" data-var="@nav-pills-border-radius" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-pills-active-link-hover-bg">@nav-pills-active-link-hover-bg</label> <input id="input-@nav-pills-active-link-hover-bg" type="text" value="@component-active-bg" data-var="@nav-pills-active-link-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@nav-pills-active-link-hover-color">@nav-pills-active-link-hover-color</label> <input id="input-@nav-pills-active-link-hover-color" type="text" value="@component-active-color" data-var="@nav-pills-active-link-hover-color" class="form-control"/> </div> </div> <h2 id="pagination">Pagination</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-color">@pagination-color</label> <input id="input-@pagination-color" type="text" value="@link-color" data-var="@pagination-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-bg">@pagination-bg</label> <input id="input-@pagination-bg" type="text" value="#fff" data-var="@pagination-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-border">@pagination-border</label> <input id="input-@pagination-border" type="text" value="#ddd" data-var="@pagination-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-hover-color">@pagination-hover-color</label> <input id="input-@pagination-hover-color" type="text" value="@link-hover-color" data-var="@pagination-hover-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-hover-bg">@pagination-hover-bg</label> <input id="input-@pagination-hover-bg" type="text" value="@gray-lighter" data-var="@pagination-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-hover-border">@pagination-hover-border</label> <input id="input-@pagination-hover-border" type="text" value="#ddd" data-var="@pagination-hover-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-active-color">@pagination-active-color</label> <input id="input-@pagination-active-color" type="text" value="#fff" data-var="@pagination-active-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-active-bg">@pagination-active-bg</label> <input id="input-@pagination-active-bg" type="text" value="@brand-primary" data-var="@pagination-active-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-active-border">@pagination-active-border</label> <input id="input-@pagination-active-border" type="text" value="@brand-primary" data-var="@pagination-active-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-disabled-color">@pagination-disabled-color</label> <input id="input-@pagination-disabled-color" type="text" value="@gray-light" data-var="@pagination-disabled-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-disabled-bg">@pagination-disabled-bg</label> <input id="input-@pagination-disabled-bg" type="text" value="#fff" data-var="@pagination-disabled-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pagination-disabled-border">@pagination-disabled-border</label> <input id="input-@pagination-disabled-border" type="text" value="#ddd" data-var="@pagination-disabled-border" class="form-control"/> </div> </div> <h2 id="pager">Pager</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pager-bg">@pager-bg</label> <input id="input-@pager-bg" type="text" value="@pagination-bg" data-var="@pager-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pager-border">@pager-border</label> <input id="input-@pager-border" type="text" value="@pagination-border" data-var="@pager-border" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pager-border-radius">@pager-border-radius</label> <input id="input-@pager-border-radius" type="text" value="15px" data-var="@pager-border-radius" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pager-hover-bg">@pager-hover-bg</label> <input id="input-@pager-hover-bg" type="text" value="@pagination-hover-bg" data-var="@pager-hover-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pager-active-bg">@pager-active-bg</label> <input id="input-@pager-active-bg" type="text" value="@pagination-active-bg" data-var="@pager-active-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pager-active-color">@pager-active-color</label> <input id="input-@pager-active-color" type="text" value="@pagination-active-color" data-var="@pager-active-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pager-disabled-color">@pager-disabled-color</label> <input id="input-@pager-disabled-color" type="text" value="@pagination-disabled-color" data-var="@pager-disabled-color" class="form-control"/> </div> </div> <h2 id="jumbotron">Jumbotron</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@jumbotron-padding">@jumbotron-padding</label> <input id="input-@jumbotron-padding" type="text" value="30px" data-var="@jumbotron-padding" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@jumbotron-color">@jumbotron-color</label> <input id="input-@jumbotron-color" type="text" value="inherit" data-var="@jumbotron-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@jumbotron-bg">@jumbotron-bg</label> <input id="input-@jumbotron-bg" type="text" value="@gray-lighter" data-var="@jumbotron-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@jumbotron-heading-color">@jumbotron-heading-color</label> <input id="input-@jumbotron-heading-color" type="text" value="inherit" data-var="@jumbotron-heading-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@jumbotron-font-size">@jumbotron-font-size</label> <input id="input-@jumbotron-font-size" type="text" value="ceil((@font-size-base * 1.5))" data-var="@jumbotron-font-size" class="form-control"/> </div> @@ -1038,86 +1038,86 @@ <h2 id="form-states-and-alerts">Form states and alerts</h2> <p>Define colors for form feedback states and, by default, alerts.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-success-text">@state-success-text</label> <input id="input-@state-success-text" type="text" value="#3c763d" data-var="@state-success-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-success-bg">@state-success-bg</label> <input id="input-@state-success-bg" type="text" value="#dff0d8" data-var="@state-success-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-success-border">@state-success-border</label> <input id="input-@state-success-border" type="text" value="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-info-text">@state-info-text</label> <input id="input-@state-info-text" type="text" value="#31708f" data-var="@state-info-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-info-bg">@state-info-bg</label> <input id="input-@state-info-bg" type="text" value="#d9edf7" data-var="@state-info-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-info-border">@state-info-border</label> <input id="input-@state-info-border" type="text" value="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-warning-text">@state-warning-text</label> <input id="input-@state-warning-text" type="text" value="#8a6d3b" data-var="@state-warning-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-warning-bg">@state-warning-bg</label> <input id="input-@state-warning-bg" type="text" value="#fcf8e3" data-var="@state-warning-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-warning-border">@state-warning-border</label> <input id="input-@state-warning-border" type="text" value="darken(spin(@state-warning-bg, -10), 5%)" data-var="@state-warning-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-danger-text">@state-danger-text</label> <input id="input-@state-danger-text" type="text" value="#a94442" data-var="@state-danger-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-danger-bg">@state-danger-bg</label> <input id="input-@state-danger-bg" type="text" value="#f2dede" data-var="@state-danger-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@state-danger-border">@state-danger-border</label> <input id="input-@state-danger-border" type="text" value="darken(spin(@state-danger-bg, -10), 5%)" data-var="@state-danger-border" class="form-control"/> </div> </div> <h2 id="tooltips">Tooltips</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@tooltip-max-width">@tooltip-max-width</label> <input id="input-@tooltip-max-width" type="text" value="200px" data-var="@tooltip-max-width" class="form-control"/> <p class="help-block">Tooltip max width</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@tooltip-color">@tooltip-color</label> <input id="input-@tooltip-color" type="text" value="#fff" data-var="@tooltip-color" class="form-control"/> <p class="help-block">Tooltip text color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@tooltip-bg">@tooltip-bg</label> <input id="input-@tooltip-bg" type="text" value="#000" data-var="@tooltip-bg" class="form-control"/> <p class="help-block">Tooltip background color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@tooltip-opacity">@tooltip-opacity</label> <input id="input-@tooltip-opacity" type="text" value=".9" data-var="@tooltip-opacity" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@tooltip-arrow-width">@tooltip-arrow-width</label> <input id="input-@tooltip-arrow-width" type="text" value="5px" data-var="@tooltip-arrow-width" class="form-control"/> <p class="help-block">Tooltip arrow width</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@tooltip-arrow-color">@tooltip-arrow-color</label> <input id="input-@tooltip-arrow-color" type="text" value="@tooltip-bg" data-var="@tooltip-arrow-color" class="form-control"/> <p class="help-block">Tooltip arrow color</p> @@ -1125,55 +1125,55 @@ </div> <h2 id="popovers">Popovers</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-bg">@popover-bg</label> <input id="input-@popover-bg" type="text" value="#fff" data-var="@popover-bg" class="form-control"/> <p class="help-block">Popover body background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-max-width">@popover-max-width</label> <input id="input-@popover-max-width" type="text" value="276px" data-var="@popover-max-width" class="form-control"/> <p class="help-block">Popover maximum width</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-border-color">@popover-border-color</label> <input id="input-@popover-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control"/> <p class="help-block">Popover border color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label> <input id="input-@popover-fallback-border-color" type="text" value="#ccc" data-var="@popover-fallback-border-color" class="form-control"/> <p class="help-block">Popover fallback border color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-title-bg">@popover-title-bg</label> <input id="input-@popover-title-bg" type="text" value="darken(@popover-bg, 3%)" data-var="@popover-title-bg" class="form-control"/> <p class="help-block">Popover title background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-arrow-width">@popover-arrow-width</label> <input id="input-@popover-arrow-width" type="text" value="10px" data-var="@popover-arrow-width" class="form-control"/> <p class="help-block">Popover arrow width</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-arrow-color">@popover-arrow-color</label> <input id="input-@popover-arrow-color" type="text" value="@popover-bg" data-var="@popover-arrow-color" class="form-control"/> <p class="help-block">Popover arrow color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-arrow-outer-width">@popover-arrow-outer-width</label> <input id="input-@popover-arrow-outer-width" type="text" value="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width" class="form-control"/> <p class="help-block">Popover outer arrow width</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-arrow-outer-color">@popover-arrow-outer-color</label> <input id="input-@popover-arrow-outer-color" type="text" value="fadein(@popover-border-color, 5%)" data-var="@popover-arrow-outer-color" class="form-control"/> <p class="help-block">Popover outer arrow color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label> <input id="input-@popover-arrow-outer-fallback-color" type="text" value="darken(@popover-fallback-border-color, 20%)" data-var="@popover-arrow-outer-fallback-color" class="form-control"/> <p class="help-block">Popover outer arrow fallback color</p> @@ -1181,44 +1181,44 @@ </div> <h2 id="labels">Labels</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-default-bg">@label-default-bg</label> <input id="input-@label-default-bg" type="text" value="@gray-light" data-var="@label-default-bg" class="form-control"/> <p class="help-block">Default label background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-primary-bg">@label-primary-bg</label> <input id="input-@label-primary-bg" type="text" value="@brand-primary" data-var="@label-primary-bg" class="form-control"/> <p class="help-block">Primary label background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-success-bg">@label-success-bg</label> <input id="input-@label-success-bg" type="text" value="@brand-success" data-var="@label-success-bg" class="form-control"/> <p class="help-block">Success label background color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-info-bg">@label-info-bg</label> <input id="input-@label-info-bg" type="text" value="@brand-info" data-var="@label-info-bg" class="form-control"/> <p class="help-block">Info label background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-warning-bg">@label-warning-bg</label> <input id="input-@label-warning-bg" type="text" value="@brand-warning" data-var="@label-warning-bg" class="form-control"/> <p class="help-block">Warning label background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-danger-bg">@label-danger-bg</label> <input id="input-@label-danger-bg" type="text" value="@brand-danger" data-var="@label-danger-bg" class="form-control"/> <p class="help-block">Danger label background color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-color">@label-color</label> <input id="input-@label-color" type="text" value="#fff" data-var="@label-color" class="form-control"/> <p class="help-block">Default label text color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@label-link-hover-color">@label-link-hover-color</label> <input id="input-@label-link-hover-color" type="text" value="#fff" data-var="@label-link-hover-color" class="form-control"/> <p class="help-block">Default text color of a linked label</p> @@ -1226,69 +1226,69 @@ </div> <h2 id="modals">Modals</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-inner-padding">@modal-inner-padding</label> <input id="input-@modal-inner-padding" type="text" value="15px" data-var="@modal-inner-padding" class="form-control"/> <p class="help-block">Padding applied to the modal body</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-title-padding">@modal-title-padding</label> <input id="input-@modal-title-padding" type="text" value="15px" data-var="@modal-title-padding" class="form-control"/> <p class="help-block">Padding applied to the modal title</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-title-line-height">@modal-title-line-height</label> <input id="input-@modal-title-line-height" type="text" value="@line-height-base" data-var="@modal-title-line-height" class="form-control"/> <p class="help-block">Modal title line-height</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-content-bg">@modal-content-bg</label> <input id="input-@modal-content-bg" type="text" value="#fff" data-var="@modal-content-bg" class="form-control"/> <p class="help-block">Background color of modal content area</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-content-border-color">@modal-content-border-color</label> <input id="input-@modal-content-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@modal-content-border-color" class="form-control"/> <p class="help-block">Modal content border color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label> <input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/> <p class="help-block">Modal content border color <strong>for IE8</strong></p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label> <input id="input-@modal-backdrop-bg" type="text" value="#000" data-var="@modal-backdrop-bg" class="form-control"/> <p class="help-block">Modal backdrop background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-backdrop-opacity">@modal-backdrop-opacity</label> <input id="input-@modal-backdrop-opacity" type="text" value=".5" data-var="@modal-backdrop-opacity" class="form-control"/> <p class="help-block">Modal backdrop opacity</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-header-border-color">@modal-header-border-color</label> <input id="input-@modal-header-border-color" type="text" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control"/> <p class="help-block">Modal header border color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-footer-border-color">@modal-footer-border-color</label> <input id="input-@modal-footer-border-color" type="text" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/> <p class="help-block">Modal footer border color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-lg">@modal-lg</label> <input id="input-@modal-lg" type="text" value="900px" data-var="@modal-lg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-md">@modal-md</label> <input id="input-@modal-md" type="text" value="600px" data-var="@modal-md" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@modal-sm">@modal-sm</label> <input id="input-@modal-sm" type="text" value="300px" data-var="@modal-sm" class="form-control"/> </div> @@ -1296,111 +1296,111 @@ <h2 id="alerts">Alerts</h2> <p>Define alert colors, border radius, and padding.</p> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-padding">@alert-padding</label> <input id="input-@alert-padding" type="text" value="15px" data-var="@alert-padding" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-border-radius">@alert-border-radius</label> <input id="input-@alert-border-radius" type="text" value="@border-radius-base" data-var="@alert-border-radius" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-link-font-weight">@alert-link-font-weight</label> <input id="input-@alert-link-font-weight" type="text" value="bold" data-var="@alert-link-font-weight" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-success-bg">@alert-success-bg</label> <input id="input-@alert-success-bg" type="text" value="@state-success-bg" data-var="@alert-success-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-success-text">@alert-success-text</label> <input id="input-@alert-success-text" type="text" value="@state-success-text" data-var="@alert-success-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-success-border">@alert-success-border</label> <input id="input-@alert-success-border" type="text" value="@state-success-border" data-var="@alert-success-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-info-bg">@alert-info-bg</label> <input id="input-@alert-info-bg" type="text" value="@state-info-bg" data-var="@alert-info-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-info-text">@alert-info-text</label> <input id="input-@alert-info-text" type="text" value="@state-info-text" data-var="@alert-info-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-info-border">@alert-info-border</label> <input id="input-@alert-info-border" type="text" value="@state-info-border" data-var="@alert-info-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-warning-bg">@alert-warning-bg</label> <input id="input-@alert-warning-bg" type="text" value="@state-warning-bg" data-var="@alert-warning-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-warning-text">@alert-warning-text</label> <input id="input-@alert-warning-text" type="text" value="@state-warning-text" data-var="@alert-warning-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-warning-border">@alert-warning-border</label> <input id="input-@alert-warning-border" type="text" value="@state-warning-border" data-var="@alert-warning-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-danger-bg">@alert-danger-bg</label> <input id="input-@alert-danger-bg" type="text" value="@state-danger-bg" data-var="@alert-danger-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-danger-text">@alert-danger-text</label> <input id="input-@alert-danger-text" type="text" value="@state-danger-text" data-var="@alert-danger-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@alert-danger-border">@alert-danger-border</label> <input id="input-@alert-danger-border" type="text" value="@state-danger-border" data-var="@alert-danger-border" class="form-control"/> </div> </div> <h2 id="progress-bars">Progress bars</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-bg">@progress-bg</label> <input id="input-@progress-bg" type="text" value="#f5f5f5" data-var="@progress-bg" class="form-control"/> <p class="help-block">Background color of the whole progress component</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-bar-color">@progress-bar-color</label> <input id="input-@progress-bar-color" type="text" value="#fff" data-var="@progress-bar-color" class="form-control"/> <p class="help-block">Progress bar text color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-border-radius">@progress-border-radius</label> <input id="input-@progress-border-radius" type="text" value="@border-radius-base" data-var="@progress-border-radius" class="form-control"/> <p class="help-block">Variable for setting rounded corners on progress bar.</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-bar-bg">@progress-bar-bg</label> <input id="input-@progress-bar-bg" type="text" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/> <p class="help-block">Default progress bar color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-bar-success-bg">@progress-bar-success-bg</label> <input id="input-@progress-bar-success-bg" type="text" value="@brand-success" data-var="@progress-bar-success-bg" class="form-control"/> <p class="help-block">Success progress bar color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-bar-warning-bg">@progress-bar-warning-bg</label> <input id="input-@progress-bar-warning-bg" type="text" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control"/> <p class="help-block">Warning progress bar color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label> <input id="input-@progress-bar-danger-bg" type="text" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control"/> <p class="help-block">Danger progress bar color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@progress-bar-info-bg">@progress-bar-info-bg</label> <input id="input-@progress-bar-info-bg" type="text" value="@brand-info" data-var="@progress-bar-info-bg" class="form-control"/> <p class="help-block">Info progress bar color</p> @@ -1408,219 +1408,219 @@ </div> <h2 id="list-group">List group</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-bg">@list-group-bg</label> <input id="input-@list-group-bg" type="text" value="#fff" data-var="@list-group-bg" class="form-control"/> <p class="help-block">Background color on <code>.list-group-item</code></p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-border">@list-group-border</label> <input id="input-@list-group-border" type="text" value="#ddd" data-var="@list-group-border" class="form-control"/> <p class="help-block"><code>.list-group-item</code> border color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-border-radius">@list-group-border-radius</label> <input id="input-@list-group-border-radius" type="text" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control"/> <p class="help-block">List group border radius</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-hover-bg">@list-group-hover-bg</label> <input id="input-@list-group-hover-bg" type="text" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control"/> <p class="help-block">Background color of single list items on hover</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-active-color">@list-group-active-color</label> <input id="input-@list-group-active-color" type="text" value="@component-active-color" data-var="@list-group-active-color" class="form-control"/> <p class="help-block">Text color of active list items</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-active-bg">@list-group-active-bg</label> <input id="input-@list-group-active-bg" type="text" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control"/> <p class="help-block">Background color of active list items</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-active-border">@list-group-active-border</label> <input id="input-@list-group-active-border" type="text" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control"/> <p class="help-block">Border color of active list elements</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-active-text-color">@list-group-active-text-color</label> <input id="input-@list-group-active-text-color" type="text" value="lighten(@list-group-active-bg, 40%)" data-var="@list-group-active-text-color" class="form-control"/> <p class="help-block">Text color for content within active list items</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-disabled-color">@list-group-disabled-color</label> <input id="input-@list-group-disabled-color" type="text" value="@gray-light" data-var="@list-group-disabled-color" class="form-control"/> <p class="help-block">Text color of disabled list items</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-disabled-bg">@list-group-disabled-bg</label> <input id="input-@list-group-disabled-bg" type="text" value="@gray-lighter" data-var="@list-group-disabled-bg" class="form-control"/> <p class="help-block">Background color of disabled list items</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-disabled-text-color">@list-group-disabled-text-color</label> <input id="input-@list-group-disabled-text-color" type="text" value="@list-group-disabled-color" data-var="@list-group-disabled-text-color" class="form-control"/> <p class="help-block">Text color for content within disabled list items</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-link-color">@list-group-link-color</label> <input id="input-@list-group-link-color" type="text" value="#555" data-var="@list-group-link-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-link-hover-color">@list-group-link-hover-color</label> <input id="input-@list-group-link-hover-color" type="text" value="@list-group-link-color" data-var="@list-group-link-hover-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@list-group-link-heading-color">@list-group-link-heading-color</label> <input id="input-@list-group-link-heading-color" type="text" value="#333" data-var="@list-group-link-heading-color" class="form-control"/> </div> </div> <h2 id="panels">Panels</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-bg">@panel-bg</label> <input id="input-@panel-bg" type="text" value="#fff" data-var="@panel-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-body-padding">@panel-body-padding</label> <input id="input-@panel-body-padding" type="text" value="15px" data-var="@panel-body-padding" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-heading-padding">@panel-heading-padding</label> <input id="input-@panel-heading-padding" type="text" value="10px 15px" data-var="@panel-heading-padding" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-footer-padding">@panel-footer-padding</label> <input id="input-@panel-footer-padding" type="text" value="@panel-heading-padding" data-var="@panel-footer-padding" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-border-radius">@panel-border-radius</label> <input id="input-@panel-border-radius" type="text" value="@border-radius-base" data-var="@panel-border-radius" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-inner-border">@panel-inner-border</label> <input id="input-@panel-inner-border" type="text" value="#ddd" data-var="@panel-inner-border" class="form-control"/> <p class="help-block">Border color for elements within panels</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-footer-bg">@panel-footer-bg</label> <input id="input-@panel-footer-bg" type="text" value="#f5f5f5" data-var="@panel-footer-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-default-text">@panel-default-text</label> <input id="input-@panel-default-text" type="text" value="@gray-dark" data-var="@panel-default-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-default-border">@panel-default-border</label> <input id="input-@panel-default-border" type="text" value="#ddd" data-var="@panel-default-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-default-heading-bg">@panel-default-heading-bg</label> <input id="input-@panel-default-heading-bg" type="text" value="#f5f5f5" data-var="@panel-default-heading-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-primary-text">@panel-primary-text</label> <input id="input-@panel-primary-text" type="text" value="#fff" data-var="@panel-primary-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-primary-border">@panel-primary-border</label> <input id="input-@panel-primary-border" type="text" value="@brand-primary" data-var="@panel-primary-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-primary-heading-bg">@panel-primary-heading-bg</label> <input id="input-@panel-primary-heading-bg" type="text" value="@brand-primary" data-var="@panel-primary-heading-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-success-text">@panel-success-text</label> <input id="input-@panel-success-text" type="text" value="@state-success-text" data-var="@panel-success-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-success-border">@panel-success-border</label> <input id="input-@panel-success-border" type="text" value="@state-success-border" data-var="@panel-success-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-success-heading-bg">@panel-success-heading-bg</label> <input id="input-@panel-success-heading-bg" type="text" value="@state-success-bg" data-var="@panel-success-heading-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-info-text">@panel-info-text</label> <input id="input-@panel-info-text" type="text" value="@state-info-text" data-var="@panel-info-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-info-border">@panel-info-border</label> <input id="input-@panel-info-border" type="text" value="@state-info-border" data-var="@panel-info-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-info-heading-bg">@panel-info-heading-bg</label> <input id="input-@panel-info-heading-bg" type="text" value="@state-info-bg" data-var="@panel-info-heading-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-warning-text">@panel-warning-text</label> <input id="input-@panel-warning-text" type="text" value="@state-warning-text" data-var="@panel-warning-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-warning-border">@panel-warning-border</label> <input id="input-@panel-warning-border" type="text" value="@state-warning-border" data-var="@panel-warning-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-warning-heading-bg">@panel-warning-heading-bg</label> <input id="input-@panel-warning-heading-bg" type="text" value="@state-warning-bg" data-var="@panel-warning-heading-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-danger-text">@panel-danger-text</label> <input id="input-@panel-danger-text" type="text" value="@state-danger-text" data-var="@panel-danger-text" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-danger-border">@panel-danger-border</label> <input id="input-@panel-danger-border" type="text" value="@state-danger-border" data-var="@panel-danger-border" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@panel-danger-heading-bg">@panel-danger-heading-bg</label> <input id="input-@panel-danger-heading-bg" type="text" value="@state-danger-bg" data-var="@panel-danger-heading-bg" class="form-control"/> </div> </div> <h2 id="thumbnails">Thumbnails</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@thumbnail-padding">@thumbnail-padding</label> <input id="input-@thumbnail-padding" type="text" value="4px" data-var="@thumbnail-padding" class="form-control"/> <p class="help-block">Padding around the thumbnail image</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@thumbnail-bg">@thumbnail-bg</label> <input id="input-@thumbnail-bg" type="text" value="@body-bg" data-var="@thumbnail-bg" class="form-control"/> <p class="help-block">Thumbnail background color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@thumbnail-border">@thumbnail-border</label> <input id="input-@thumbnail-border" type="text" value="#ddd" data-var="@thumbnail-border" class="form-control"/> <p class="help-block">Thumbnail border color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label> <input id="input-@thumbnail-border-radius" type="text" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control"/> <p class="help-block">Thumbnail border radius</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@thumbnail-caption-color">@thumbnail-caption-color</label> <input id="input-@thumbnail-caption-color" type="text" value="@text-color" data-var="@thumbnail-caption-color" class="form-control"/> <p class="help-block">Custom text color for thumbnail captions</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@thumbnail-caption-padding">@thumbnail-caption-padding</label> <input id="input-@thumbnail-caption-padding" type="text" value="9px" data-var="@thumbnail-caption-padding" class="form-control"/> <p class="help-block">Padding around the thumbnail caption</p> @@ -1628,82 +1628,82 @@ </div> <h2 id="wells">Wells</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@well-bg">@well-bg</label> <input id="input-@well-bg" type="text" value="#f5f5f5" data-var="@well-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@well-border">@well-border</label> <input id="input-@well-border" type="text" value="darken(@well-bg, 7%)" data-var="@well-border" class="form-control"/> </div> </div> <h2 id="badges">Badges</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-color">@badge-color</label> <input id="input-@badge-color" type="text" value="#fff" data-var="@badge-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-link-hover-color">@badge-link-hover-color</label> <input id="input-@badge-link-hover-color" type="text" value="#fff" data-var="@badge-link-hover-color" class="form-control"/> <p class="help-block">Linked badge text color on hover</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-bg">@badge-bg</label> <input id="input-@badge-bg" type="text" value="@gray-light" data-var="@badge-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-active-color">@badge-active-color</label> <input id="input-@badge-active-color" type="text" value="@link-color" data-var="@badge-active-color" class="form-control"/> <p class="help-block">Badge text color in active nav link</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-active-bg">@badge-active-bg</label> <input id="input-@badge-active-bg" type="text" value="#fff" data-var="@badge-active-bg" class="form-control"/> <p class="help-block">Badge background color in active nav link</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-font-weight">@badge-font-weight</label> <input id="input-@badge-font-weight" type="text" value="bold" data-var="@badge-font-weight" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-line-height">@badge-line-height</label> <input id="input-@badge-line-height" type="text" value="1" data-var="@badge-line-height" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@badge-border-radius">@badge-border-radius</label> <input id="input-@badge-border-radius" type="text" value="10px" data-var="@badge-border-radius" class="form-control"/> </div> </div> <h2 id="breadcrumbs">Breadcrumbs</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@breadcrumb-padding-vertical">@breadcrumb-padding-vertical</label> <input id="input-@breadcrumb-padding-vertical" type="text" value="8px" data-var="@breadcrumb-padding-vertical" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@breadcrumb-padding-horizontal">@breadcrumb-padding-horizontal</label> <input id="input-@breadcrumb-padding-horizontal" type="text" value="15px" data-var="@breadcrumb-padding-horizontal" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@breadcrumb-bg">@breadcrumb-bg</label> <input id="input-@breadcrumb-bg" type="text" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control"/> <p class="help-block">Breadcrumb background color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@breadcrumb-color">@breadcrumb-color</label> <input id="input-@breadcrumb-color" type="text" value="#ccc" data-var="@breadcrumb-color" class="form-control"/> <p class="help-block">Breadcrumb text color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@breadcrumb-active-color">@breadcrumb-active-color</label> <input id="input-@breadcrumb-active-color" type="text" value="@gray-light" data-var="@breadcrumb-active-color" class="form-control"/> <p class="help-block">Text color of current page in the breadcrumb</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@breadcrumb-separator">@breadcrumb-separator</label> <input id="input-@breadcrumb-separator" type="text" value=""/"" data-var="@breadcrumb-separator" class="form-control"/> <p class="help-block">Textual separator for between breadcrumb elements</p> @@ -1711,144 +1711,144 @@ </div> <h2 id="carousel">Carousel</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-text-shadow">@carousel-text-shadow</label> <input id="input-@carousel-text-shadow" type="text" value="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-control-color">@carousel-control-color</label> <input id="input-@carousel-control-color" type="text" value="#fff" data-var="@carousel-control-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-control-width">@carousel-control-width</label> <input id="input-@carousel-control-width" type="text" value="15%" data-var="@carousel-control-width" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-control-opacity">@carousel-control-opacity</label> <input id="input-@carousel-control-opacity" type="text" value=".5" data-var="@carousel-control-opacity" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-control-font-size">@carousel-control-font-size</label> <input id="input-@carousel-control-font-size" type="text" value="20px" data-var="@carousel-control-font-size" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-indicator-active-bg">@carousel-indicator-active-bg</label> <input id="input-@carousel-indicator-active-bg" type="text" value="#fff" data-var="@carousel-indicator-active-bg" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-indicator-border-color">@carousel-indicator-border-color</label> <input id="input-@carousel-indicator-border-color" type="text" value="#fff" data-var="@carousel-indicator-border-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@carousel-caption-color">@carousel-caption-color</label> <input id="input-@carousel-caption-color" type="text" value="#fff" data-var="@carousel-caption-color" class="form-control"/> </div> </div> <h2 id="close">Close</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@close-font-weight">@close-font-weight</label> <input id="input-@close-font-weight" type="text" value="bold" data-var="@close-font-weight" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@close-color">@close-color</label> <input id="input-@close-color" type="text" value="#000" data-var="@close-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@close-text-shadow">@close-text-shadow</label> <input id="input-@close-text-shadow" type="text" value="0 1px 0 #fff" data-var="@close-text-shadow" class="form-control"/> </div> </div> <h2 id="code">Code</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@code-color">@code-color</label> <input id="input-@code-color" type="text" value="#c7254e" data-var="@code-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@code-bg">@code-bg</label> <input id="input-@code-bg" type="text" value="#f9f2f4" data-var="@code-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@kbd-color">@kbd-color</label> <input id="input-@kbd-color" type="text" value="#fff" data-var="@kbd-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@kbd-bg">@kbd-bg</label> <input id="input-@kbd-bg" type="text" value="#333" data-var="@kbd-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pre-bg">@pre-bg</label> <input id="input-@pre-bg" type="text" value="#f5f5f5" data-var="@pre-bg" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pre-color">@pre-color</label> <input id="input-@pre-color" type="text" value="@gray-dark" data-var="@pre-color" class="form-control"/> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pre-border-color">@pre-border-color</label> <input id="input-@pre-border-color" type="text" value="#ccc" data-var="@pre-border-color" class="form-control"/> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@pre-scrollable-max-height">@pre-scrollable-max-height</label> <input id="input-@pre-scrollable-max-height" type="text" value="340px" data-var="@pre-scrollable-max-height" class="form-control"/> </div> </div> <h2 id="type">Type</h2> <div class="row"> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@component-offset-horizontal">@component-offset-horizontal</label> <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/> <p class="help-block">Horizontal offset for forms and lists.</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@text-muted">@text-muted</label> <input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/> <p class="help-block">Text muted color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@abbr-border-color">@abbr-border-color</label> <input id="input-@abbr-border-color" type="text" value="@gray-light" data-var="@abbr-border-color" class="form-control"/> <p class="help-block">Abbreviations and acronyms border color</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@headings-small-color">@headings-small-color</label> <input id="input-@headings-small-color" type="text" value="@gray-light" data-var="@headings-small-color" class="form-control"/> <p class="help-block">Headings small color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@blockquote-small-color">@blockquote-small-color</label> <input id="input-@blockquote-small-color" type="text" value="@gray-light" data-var="@blockquote-small-color" class="form-control"/> <p class="help-block">Blockquote small color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@blockquote-font-size">@blockquote-font-size</label> <input id="input-@blockquote-font-size" type="text" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/> <p class="help-block">Blockquote font size</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@blockquote-border-color">@blockquote-border-color</label> <input id="input-@blockquote-border-color" type="text" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/> <p class="help-block">Blockquote border color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@page-header-border-color">@page-header-border-color</label> <input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/> <p class="help-block">Page header border color</p> </div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label> <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/> <p class="help-block">Width of horizontal description list titles</p> </div> <div class="clearfix"></div> - <div class="bs-customizer-input"> + <div class="col-xs-4"> <label for="input-@hr-border">@hr-border</label> <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/> <p class="help-block">Horizontal line color.</p> -- cgit v1.2.3 From 780c9b05fe48b45628fe469dd780f8de03e23514 Mon Sep 17 00:00:00 2001 From: Chris Rebert <github@rebertia.com> Date: Tue, 28 Oct 2014 13:11:35 -0700 Subject: reads more smoothly For @XhmikosR --- docs/_includes/getting-started/tools.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/getting-started/tools.html b/docs/_includes/getting-started/tools.html index 853ac9bdf..2a38643fa 100644 --- a/docs/_includes/getting-started/tools.html +++ b/docs/_includes/getting-started/tools.html @@ -2,5 +2,5 @@ <h1 id="tools" class="page-header">Tools</h1> <h2 id="tools-bootlint">Bootlint</h2> - <p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is an official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p> + <p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p> </div> -- cgit v1.2.3 From 3eec86e2e5a2ea835f929eb3fa31e32f51ca6216 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Tue, 28 Oct 2014 16:05:32 -0700 Subject: add missing hrefs to <a>s in docs+examples --- docs/_includes/components/jumbotron.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/components/jumbotron.html b/docs/_includes/components/jumbotron.html index 4c6bdb739..f5de9753e 100644 --- a/docs/_includes/components/jumbotron.html +++ b/docs/_includes/components/jumbotron.html @@ -6,14 +6,14 @@ <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> + <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> {% highlight html %} <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> - <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> + <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> {% endhighlight %} <p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p> -- cgit v1.2.3 From d87a636ff9f4febd9a09ed98dce35cecc4c9a43f Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Tue, 28 Oct 2014 16:10:41 -0700 Subject: add missing href="#" to .btn-group-justified example [skip sauce] --- docs/_includes/components/button-groups.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/components/button-groups.html b/docs/_includes/components/button-groups.html index 018d66ed5..216e4426b 100644 --- a/docs/_includes/components/button-groups.html +++ b/docs/_includes/components/button-groups.html @@ -202,16 +202,16 @@ <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p> <div class="bs-example"> <div class="btn-group btn-group-justified"> - <a class="btn btn-default" role="button">Left</a> - <a class="btn btn-default" role="button">Middle</a> - <a class="btn btn-default" role="button">Right</a> + <a href="#" class="btn btn-default" role="button">Left</a> + <a href="#" class="btn btn-default" role="button">Middle</a> + <a href="#" class="btn btn-default" role="button">Right</a> </div> <br> <div class="btn-group btn-group-justified"> - <a class="btn btn-default" role="button">Left</a> - <a class="btn btn-default" role="button">Middle</a> + <a href="#" class="btn btn-default" role="button">Left</a> + <a href="#" class="btn btn-default" role="button">Middle</a> <div class="btn-group"> - <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> -- cgit v1.2.3 From a7f58a83567af5be9ad8530379978a1d78b19a12 Mon Sep 17 00:00:00 2001 From: Heinrich Fenkart <hnrch02@gmail.com> Date: Wed, 29 Oct 2014 04:30:31 +0100 Subject: grunt --- docs/_includes/customizer-variables.html | 306 +++++++++++++++---------------- 1 file changed, 153 insertions(+), 153 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index 89edc603d..fc5f63d02 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -1,7 +1,7 @@ <!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.--> <h2 id="colors">Colors</h2> -<p>Gray and brand colors for use across Bootstrap.</p> +<p>Gray and brand colors for use across Bootstrap</p> <div class="row"> <div class="col-xs-4"> <label for="input-@gray-base">@gray-base</label> @@ -52,37 +52,37 @@ </div> </div> <h2 id="scaffolding">Scaffolding</h2> -<p>Settings for some of the most global styles.</p> +<p>Settings for some of the most global styles</p> <div class="row"> <div class="col-xs-4"> <label for="input-@body-bg">@body-bg</label> <input id="input-@body-bg" type="text" value="#fff" data-var="@body-bg" class="form-control"/> - <p class="help-block">Background color for <code><body></code>.</p> + <p class="help-block">Background color for <code><body></code></p> </div> <div class="col-xs-4"> <label for="input-@text-color">@text-color</label> <input id="input-@text-color" type="text" value="@gray-dark" data-var="@text-color" class="form-control"/> - <p class="help-block">Global text color on <code><body></code>.</p> + <p class="help-block">Global text color on <code><body></code></p> </div> <div class="col-xs-4"> <label for="input-@link-color">@link-color</label> <input id="input-@link-color" type="text" value="@brand-primary" data-var="@link-color" class="form-control"/> - <p class="help-block">Global textual link color.</p> + <p class="help-block">Global textual link color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@link-hover-color">@link-hover-color</label> <input id="input-@link-hover-color" type="text" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/> - <p class="help-block">Link hover color set via <code>darken()</code> function.</p> + <p class="help-block">Link hover color set via <code>darken()</code> function</p> </div> <div class="col-xs-4"> <label for="input-@link-hover-decoration">@link-hover-decoration</label> <input id="input-@link-hover-decoration" type="text" value="underline" data-var="@link-hover-decoration" class="form-control"/> - <p class="help-block">Link hover decoration.</p> + <p class="help-block">Link hover decoration</p> </div> </div> <h2 id="typography">Typography</h2> -<p>Font, line-height, and color for body text, headings, and more.</p> +<p>Font, line-height, and color for body text, headings, and more</p> <div class="row"> <div class="col-xs-4"> <label for="input-@font-family-sans-serif">@font-family-sans-serif</label> @@ -95,7 +95,7 @@ <div class="col-xs-4"> <label for="input-@font-family-monospace">@font-family-monospace</label> <input id="input-@font-family-monospace" type="text" value="Menlo, Monaco, Consolas, "Courier New", monospace" data-var="@font-family-monospace" class="form-control"/> - <p class="help-block">Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code>.</p> + <p class="help-block">Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code></p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -144,18 +144,18 @@ <div class="col-xs-4"> <label for="input-@line-height-base">@line-height-base</label> <input id="input-@line-height-base" type="text" value="1.428571429" data-var="@line-height-base" class="form-control"/> - <p class="help-block">Unit-less <code>line-height</code> for use in components like buttons.</p> + <p class="help-block">Unit-less <code>line-height</code> for use in components like buttons</p> </div> <div class="col-xs-4"> <label for="input-@line-height-computed">@line-height-computed</label> <input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/> - <p class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p> + <p class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@headings-font-family">@headings-font-family</label> <input id="input-@headings-font-family" type="text" value="inherit" data-var="@headings-font-family" class="form-control"/> - <p class="help-block">By default, this inherits from the <code><body></code>.</p> + <p class="help-block">By default, this inherits from the <code><body></code></p> </div> <div class="col-xs-4"> <label for="input-@headings-font-weight">@headings-font-weight</label> @@ -172,26 +172,26 @@ </div> </div> <h2 id="iconography">Iconography</h2> -<p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p> +<p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower</p> <div class="row"> <div class="col-xs-4"> <label for="input-@icon-font-path">@icon-font-path</label> <input id="input-@icon-font-path" type="text" value=""../fonts/"" data-var="@icon-font-path" class="form-control"/> - <p class="help-block">Load fonts from this directory.</p> + <p class="help-block">Load fonts from this directory</p> </div> <div class="col-xs-4"> <label for="input-@icon-font-name">@icon-font-name</label> <input id="input-@icon-font-name" type="text" value=""glyphicons-halflings-regular"" data-var="@icon-font-name" class="form-control"/> - <p class="help-block">File name for all font files.</p> + <p class="help-block">File name for all font files</p> </div> <div class="col-xs-4"> <label for="input-@icon-font-svg-id">@icon-font-svg-id</label> <input id="input-@icon-font-svg-id" type="text" value=""glyphicons_halflingsregular"" data-var="@icon-font-svg-id" class="form-control"/> - <p class="help-block">Element ID within SVG icon file.</p> + <p class="help-block">Element ID within SVG icon file</p> </div> </div> <h2 id="components">Components</h2> -<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p> +<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start)</p> <div class="row"> <div class="col-xs-4"> <label for="input-@padding-base-vertical">@padding-base-vertical</label> @@ -252,53 +252,53 @@ <div class="col-xs-4"> <label for="input-@component-active-color">@component-active-color</label> <input id="input-@component-active-color" type="text" value="#fff" data-var="@component-active-color" class="form-control"/> - <p class="help-block">Global color for active items (e.g., navs or dropdowns).</p> + <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p> </div> <div class="col-xs-4"> <label for="input-@component-active-bg">@component-active-bg</label> <input id="input-@component-active-bg" type="text" value="@brand-primary" data-var="@component-active-bg" class="form-control"/> - <p class="help-block">Global background color for active items (e.g., navs or dropdowns).</p> + <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@caret-width-base">@caret-width-base</label> <input id="input-@caret-width-base" type="text" value="4px" data-var="@caret-width-base" class="form-control"/> - <p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns.</p> + <p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns</p> </div> <div class="col-xs-4"> <label for="input-@caret-width-large">@caret-width-large</label> <input id="input-@caret-width-large" type="text" value="5px" data-var="@caret-width-large" class="form-control"/> - <p class="help-block">Carets increase slightly in size for larger components.</p> + <p class="help-block">Carets increase slightly in size for larger components</p> </div> </div> <h2 id="tables">Tables</h2> -<p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p> +<p>Customizes the <code>.table</code> component with basic values, each used across all table variations</p> <div class="row"> <div class="col-xs-4"> <label for="input-@table-cell-padding">@table-cell-padding</label> <input id="input-@table-cell-padding" type="text" value="8px" data-var="@table-cell-padding" class="form-control"/> - <p class="help-block">Padding for <code><th></code>s and <code><td></code>s.</p> + <p class="help-block">Padding for <code><th></code>s and <code><td></code>s</p> </div> <div class="col-xs-4"> <label for="input-@table-condensed-cell-padding">@table-condensed-cell-padding</label> <input id="input-@table-condensed-cell-padding" type="text" value="5px" data-var="@table-condensed-cell-padding" class="form-control"/> - <p class="help-block">Padding for cells in <code>.table-condensed</code>.</p> + <p class="help-block">Padding for cells in <code>.table-condensed</code></p> </div> <div class="col-xs-4"> <label for="input-@table-bg">@table-bg</label> <input id="input-@table-bg" type="text" value="transparent" data-var="@table-bg" class="form-control"/> - <p class="help-block">Default background color used for all tables.</p> + <p class="help-block">Default background color used for all tables</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@table-bg-accent">@table-bg-accent</label> <input id="input-@table-bg-accent" type="text" value="#f9f9f9" data-var="@table-bg-accent" class="form-control"/> - <p class="help-block">Background color used for <code>.table-striped</code>.</p> + <p class="help-block">Background color used for <code>.table-striped</code></p> </div> <div class="col-xs-4"> <label for="input-@table-bg-hover">@table-bg-hover</label> <input id="input-@table-bg-hover" type="text" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/> - <p class="help-block">Background color used for <code>.table-hover</code>.</p> + <p class="help-block">Background color used for <code>.table-hover</code></p> </div> <div class="col-xs-4"> <label for="input-@table-bg-active">@table-bg-active</label> @@ -308,11 +308,11 @@ <div class="col-xs-4"> <label for="input-@table-border-color">@table-border-color</label> <input id="input-@table-border-color" type="text" value="#ddd" data-var="@table-border-color" class="form-control"/> - <p class="help-block">Border color for table and cell borders.</p> + <p class="help-block">Border color for table and cell borders</p> </div> </div> <h2 id="buttons">Buttons</h2> -<p>For each of Bootstrap's buttons, define text, background and border color.</p> +<p>For each of Bootstrap's buttons, define text, background and border color</p> <div class="row"> <div class="col-xs-4"> <label for="input-@btn-font-weight">@btn-font-weight</label> @@ -406,65 +406,65 @@ <div class="col-xs-4"> <label for="input-@input-bg">@input-bg</label> <input id="input-@input-bg" type="text" value="#fff" data-var="@input-bg" class="form-control"/> - <p class="help-block"><code><input></code> background color</p> + <p class="help-block"><code><input></code> background colo</p> </div> <div class="col-xs-4"> <label for="input-@input-bg-disabled">@input-bg-disabled</label> <input id="input-@input-bg-disabled" type="text" value="@gray-lighter" data-var="@input-bg-disabled" class="form-control"/> - <p class="help-block"><code><input disabled></code> background color</p> + <p class="help-block"><code><input disabled></code> background colo</p> </div> <div class="col-xs-4"> <label for="input-@input-color">@input-color</label> <input id="input-@input-color" type="text" value="@gray" data-var="@input-color" class="form-control"/> - <p class="help-block">Text color for <code><input></code>s</p> + <p class="help-block">Text color for <code><input></code></p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-border">@input-border</label> <input id="input-@input-border" type="text" value="#ccc" data-var="@input-border" class="form-control"/> - <p class="help-block"><code><input></code> border color</p> + <p class="help-block"><code><input></code> border colo</p> </div> <div class="col-xs-4"> <label for="input-@input-border-radius">@input-border-radius</label> <input id="input-@input-border-radius" type="text" value="@border-radius-base" data-var="@input-border-radius" class="form-control"/> - <p class="help-block">Default <code>.form-control</code> border radius</p> + <p class="help-block">Default <code>.form-control</code> border radiu</p> </div> <div class="col-xs-4"> <label for="input-@input-border-radius-large">@input-border-radius-large</label> <input id="input-@input-border-radius-large" type="text" value="@border-radius-large" data-var="@input-border-radius-large" class="form-control"/> - <p class="help-block">Large <code>.form-control</code> border radius</p> + <p class="help-block">Large <code>.form-control</code> border radiu</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-border-radius-small">@input-border-radius-small</label> <input id="input-@input-border-radius-small" type="text" value="@border-radius-small" data-var="@input-border-radius-small" class="form-control"/> - <p class="help-block">Small <code>.form-control</code> border radius</p> + <p class="help-block">Small <code>.form-control</code> border radiu</p> </div> <div class="col-xs-4"> <label for="input-@input-border-focus">@input-border-focus</label> <input id="input-@input-border-focus" type="text" value="#66afe9" data-var="@input-border-focus" class="form-control"/> - <p class="help-block">Border color for inputs on focus</p> + <p class="help-block">Border color for inputs on focu</p> </div> <div class="col-xs-4"> <label for="input-@input-color-placeholder">@input-color-placeholder</label> <input id="input-@input-color-placeholder" type="text" value="#999" data-var="@input-color-placeholder" class="form-control"/> - <p class="help-block">Placeholder text color</p> + <p class="help-block">Placeholder text colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-height-base">@input-height-base</label> <input id="input-@input-height-base" type="text" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control"/> - <p class="help-block">Default <code>.form-control</code> height</p> + <p class="help-block">Default <code>.form-control</code> heigh</p> </div> <div class="col-xs-4"> <label for="input-@input-height-large">@input-height-large</label> <input id="input-@input-height-large" type="text" value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large" class="form-control"/> - <p class="help-block">Large <code>.form-control</code> height</p> + <p class="help-block">Large <code>.form-control</code> heigh</p> </div> <div class="col-xs-4"> <label for="input-@input-height-small">@input-height-small</label> <input id="input-@input-height-small" type="text" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control"/> - <p class="help-block">Small <code>.form-control</code> height</p> + <p class="help-block">Small <code>.form-control</code> heigh</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -478,105 +478,105 @@ <div class="col-xs-4"> <label for="input-@input-group-addon-bg">@input-group-addon-bg</label> <input id="input-@input-group-addon-bg" type="text" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/> - <p class="help-block">Background color for textual input addons</p> + <p class="help-block">Background color for textual input addon</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label> <input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/> - <p class="help-block">Border color for textual input addons</p> + <p class="help-block">Border color for textual input addon</p> </div> </div> <h2 id="dropdowns">Dropdowns</h2> -<p>Dropdown menu container and contents.</p> +<p>Dropdown menu container and contents</p> <div class="row"> <div class="col-xs-4"> <label for="input-@dropdown-bg">@dropdown-bg</label> <input id="input-@dropdown-bg" type="text" value="#fff" data-var="@dropdown-bg" class="form-control"/> - <p class="help-block">Background for the dropdown menu.</p> + <p class="help-block">Background for the dropdown menu</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-border">@dropdown-border</label> <input id="input-@dropdown-border" type="text" value="rgba(0,0,0,.15)" data-var="@dropdown-border" class="form-control"/> - <p class="help-block">Dropdown menu <code>border-color</code>.</p> + <p class="help-block">Dropdown menu <code>border-color</code></p> </div> <div class="col-xs-4"> <label for="input-@dropdown-fallback-border">@dropdown-fallback-border</label> <input id="input-@dropdown-fallback-border" type="text" value="#ccc" data-var="@dropdown-fallback-border" class="form-control"/> - <p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p> + <p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong></p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label> <input id="input-@dropdown-divider-bg" type="text" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control"/> - <p class="help-block">Divider color for between dropdown items.</p> + <p class="help-block">Divider color for between dropdown items</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-color">@dropdown-link-color</label> <input id="input-@dropdown-link-color" type="text" value="@gray-dark" data-var="@dropdown-link-color" class="form-control"/> - <p class="help-block">Dropdown link text color.</p> + <p class="help-block">Dropdown link text color</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-hover-color">@dropdown-link-hover-color</label> <input id="input-@dropdown-link-hover-color" type="text" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control"/> - <p class="help-block">Hover color for dropdown links.</p> + <p class="help-block">Hover color for dropdown links</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label> <input id="input-@dropdown-link-hover-bg" type="text" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control"/> - <p class="help-block">Hover background for dropdown links.</p> + <p class="help-block">Hover background for dropdown links</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-active-color">@dropdown-link-active-color</label> <input id="input-@dropdown-link-active-color" type="text" value="@component-active-color" data-var="@dropdown-link-active-color" class="form-control"/> - <p class="help-block">Active dropdown menu item text color.</p> + <p class="help-block">Active dropdown menu item text color</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-active-bg">@dropdown-link-active-bg</label> <input id="input-@dropdown-link-active-bg" type="text" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control"/> - <p class="help-block">Active dropdown menu item background color.</p> + <p class="help-block">Active dropdown menu item background color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label> <input id="input-@dropdown-link-disabled-color" type="text" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control"/> - <p class="help-block">Disabled dropdown menu item background color.</p> + <p class="help-block">Disabled dropdown menu item background color</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-header-color">@dropdown-header-color</label> <input id="input-@dropdown-header-color" type="text" value="@gray-light" data-var="@dropdown-header-color" class="form-control"/> - <p class="help-block">Text color for headers within dropdown menus.</p> + <p class="help-block">Text color for headers within dropdown menus</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-caret-color">@dropdown-caret-color</label> <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/> - <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p> + <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.</p> </div> </div> <h2 id="media-queries-breakpoints">Media queries breakpoints</h2> -<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> +<p>Define the breakpoints at which your layout will change, adapting to different screen sizes</p> <div class="row"> <div class="col-xs-4"> <label for="input-@screen-xs">@screen-xs</label> <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.</p> </div> <div class="col-xs-4"> <label for="input-@screen-xs-min">@screen-xs-min</label> <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p> + <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.</p> </div> <div class="col-xs-4"> <label for="input-@screen-phone">@screen-phone</label> <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@screen-sm">@screen-sm</label> <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.</p> </div> <div class="col-xs-4"> <label for="input-@screen-sm-min">@screen-sm-min</label> @@ -585,13 +585,13 @@ <div class="col-xs-4"> <label for="input-@screen-tablet">@screen-tablet</label> <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@screen-md">@screen-md</label> <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.</p> </div> <div class="col-xs-4"> <label for="input-@screen-md-min">@screen-md-min</label> @@ -600,13 +600,13 @@ <div class="col-xs-4"> <label for="input-@screen-desktop">@screen-desktop</label> <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@screen-lg">@screen-lg</label> <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.</p> </div> <div class="col-xs-4"> <label for="input-@screen-lg-min">@screen-lg-min</label> @@ -615,7 +615,7 @@ <div class="col-xs-4"> <label for="input-@screen-lg-desktop">@screen-lg-desktop</label> <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p> + <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -632,32 +632,32 @@ </div> </div> <h2 id="grid-system">Grid system</h2> -<p>Define your custom responsive grid.</p> +<p>Define your custom responsive grid</p> <div class="row"> <div class="col-xs-4"> <label for="input-@grid-columns">@grid-columns</label> <input id="input-@grid-columns" type="text" value="12" data-var="@grid-columns" class="form-control"/> - <p class="help-block">Number of columns in the grid.</p> + <p class="help-block">Number of columns in the grid</p> </div> <div class="col-xs-4"> <label for="input-@grid-gutter-width">@grid-gutter-width</label> <input id="input-@grid-gutter-width" type="text" value="30px" data-var="@grid-gutter-width" class="form-control"/> - <p class="help-block">Padding between columns. Gets divided in half for the left and right.</p> + <p class="help-block">Padding between columns. Gets divided in half for the left and right</p> </div> <div class="col-xs-4"> <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label> <input id="input-@grid-float-breakpoint" type="text" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control"/> - <p class="help-block">Point at which the navbar becomes uncollapsed.</p> + <p class="help-block">Point at which the navbar becomes uncollapsed</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label> <input id="input-@grid-float-breakpoint-max" type="text" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control"/> - <p class="help-block">Point at which the navbar begins collapsing.</p> + <p class="help-block">Point at which the navbar begins collapsing</p> </div> </div> <h2 id="container-sizes">Container sizes</h2> -<p>Define the maximum width of <code>.container</code> for different screen sizes.</p> +<p>Define the maximum width of <code>.container</code> for different screen sizes</p> <div class="row"> <div class="col-xs-4"> <label for="input-@container-tablet">@container-tablet</label> @@ -666,7 +666,7 @@ <div class="col-xs-4"> <label for="input-@container-sm">@container-sm</label> <input id="input-@container-sm" type="text" value="@container-tablet" data-var="@container-sm" class="form-control"/> - <p class="help-block">For <code>@screen-sm-min</code> and up.</p> + <p class="help-block">For <code>@screen-sm-min</code> and up</p> </div> <div class="col-xs-4"> <label for="input-@container-desktop">@container-desktop</label> @@ -676,7 +676,7 @@ <div class="col-xs-4"> <label for="input-@container-md">@container-md</label> <input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/> - <p class="help-block">For <code>@screen-md-min</code> and up.</p> + <p class="help-block">For <code>@screen-md-min</code> and up</p> </div> <div class="col-xs-4"> <label for="input-@container-large-desktop">@container-large-desktop</label> @@ -685,7 +685,7 @@ <div class="col-xs-4"> <label for="input-@container-lg">@container-lg</label> <input id="input-@container-lg" type="text" value="@container-large-desktop" data-var="@container-lg" class="form-control"/> - <p class="help-block">For <code>@screen-lg-min</code> and up.</p> + <p class="help-block">For <code>@screen-lg-min</code> and up</p> </div> </div> <h2 id="navbar">Navbar</h2> @@ -1036,7 +1036,7 @@ </div> </div> <h2 id="form-states-and-alerts">Form states and alerts</h2> -<p>Define colors for form feedback states and, by default, alerts.</p> +<p>Define colors for form feedback states and, by default, alerts</p> <div class="row"> <div class="col-xs-4"> <label for="input-@state-success-text">@state-success-text</label> @@ -1095,17 +1095,17 @@ <div class="col-xs-4"> <label for="input-@tooltip-max-width">@tooltip-max-width</label> <input id="input-@tooltip-max-width" type="text" value="200px" data-var="@tooltip-max-width" class="form-control"/> - <p class="help-block">Tooltip max width</p> + <p class="help-block">Tooltip max widt</p> </div> <div class="col-xs-4"> <label for="input-@tooltip-color">@tooltip-color</label> <input id="input-@tooltip-color" type="text" value="#fff" data-var="@tooltip-color" class="form-control"/> - <p class="help-block">Tooltip text color</p> + <p class="help-block">Tooltip text colo</p> </div> <div class="col-xs-4"> <label for="input-@tooltip-bg">@tooltip-bg</label> <input id="input-@tooltip-bg" type="text" value="#000" data-var="@tooltip-bg" class="form-control"/> - <p class="help-block">Tooltip background color</p> + <p class="help-block">Tooltip background colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -1115,12 +1115,12 @@ <div class="col-xs-4"> <label for="input-@tooltip-arrow-width">@tooltip-arrow-width</label> <input id="input-@tooltip-arrow-width" type="text" value="5px" data-var="@tooltip-arrow-width" class="form-control"/> - <p class="help-block">Tooltip arrow width</p> + <p class="help-block">Tooltip arrow widt</p> </div> <div class="col-xs-4"> <label for="input-@tooltip-arrow-color">@tooltip-arrow-color</label> <input id="input-@tooltip-arrow-color" type="text" value="@tooltip-bg" data-var="@tooltip-arrow-color" class="form-control"/> - <p class="help-block">Tooltip arrow color</p> + <p class="help-block">Tooltip arrow colo</p> </div> </div> <h2 id="popovers">Popovers</h2> @@ -1128,55 +1128,55 @@ <div class="col-xs-4"> <label for="input-@popover-bg">@popover-bg</label> <input id="input-@popover-bg" type="text" value="#fff" data-var="@popover-bg" class="form-control"/> - <p class="help-block">Popover body background color</p> + <p class="help-block">Popover body background colo</p> </div> <div class="col-xs-4"> <label for="input-@popover-max-width">@popover-max-width</label> <input id="input-@popover-max-width" type="text" value="276px" data-var="@popover-max-width" class="form-control"/> - <p class="help-block">Popover maximum width</p> + <p class="help-block">Popover maximum widt</p> </div> <div class="col-xs-4"> <label for="input-@popover-border-color">@popover-border-color</label> <input id="input-@popover-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control"/> - <p class="help-block">Popover border color</p> + <p class="help-block">Popover border colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label> <input id="input-@popover-fallback-border-color" type="text" value="#ccc" data-var="@popover-fallback-border-color" class="form-control"/> - <p class="help-block">Popover fallback border color</p> + <p class="help-block">Popover fallback border colo</p> </div> <div class="col-xs-4"> <label for="input-@popover-title-bg">@popover-title-bg</label> <input id="input-@popover-title-bg" type="text" value="darken(@popover-bg, 3%)" data-var="@popover-title-bg" class="form-control"/> - <p class="help-block">Popover title background color</p> + <p class="help-block">Popover title background colo</p> </div> <div class="col-xs-4"> <label for="input-@popover-arrow-width">@popover-arrow-width</label> <input id="input-@popover-arrow-width" type="text" value="10px" data-var="@popover-arrow-width" class="form-control"/> - <p class="help-block">Popover arrow width</p> + <p class="help-block">Popover arrow widt</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@popover-arrow-color">@popover-arrow-color</label> <input id="input-@popover-arrow-color" type="text" value="@popover-bg" data-var="@popover-arrow-color" class="form-control"/> - <p class="help-block">Popover arrow color</p> + <p class="help-block">Popover arrow colo</p> </div> <div class="col-xs-4"> <label for="input-@popover-arrow-outer-width">@popover-arrow-outer-width</label> <input id="input-@popover-arrow-outer-width" type="text" value="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width" class="form-control"/> - <p class="help-block">Popover outer arrow width</p> + <p class="help-block">Popover outer arrow widt</p> </div> <div class="col-xs-4"> <label for="input-@popover-arrow-outer-color">@popover-arrow-outer-color</label> <input id="input-@popover-arrow-outer-color" type="text" value="fadein(@popover-border-color, 5%)" data-var="@popover-arrow-outer-color" class="form-control"/> - <p class="help-block">Popover outer arrow color</p> + <p class="help-block">Popover outer arrow colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label> <input id="input-@popover-arrow-outer-fallback-color" type="text" value="darken(@popover-fallback-border-color, 20%)" data-var="@popover-arrow-outer-fallback-color" class="form-control"/> - <p class="help-block">Popover outer arrow fallback color</p> + <p class="help-block">Popover outer arrow fallback colo</p> </div> </div> <h2 id="labels">Labels</h2> @@ -1184,44 +1184,44 @@ <div class="col-xs-4"> <label for="input-@label-default-bg">@label-default-bg</label> <input id="input-@label-default-bg" type="text" value="@gray-light" data-var="@label-default-bg" class="form-control"/> - <p class="help-block">Default label background color</p> + <p class="help-block">Default label background colo</p> </div> <div class="col-xs-4"> <label for="input-@label-primary-bg">@label-primary-bg</label> <input id="input-@label-primary-bg" type="text" value="@brand-primary" data-var="@label-primary-bg" class="form-control"/> - <p class="help-block">Primary label background color</p> + <p class="help-block">Primary label background colo</p> </div> <div class="col-xs-4"> <label for="input-@label-success-bg">@label-success-bg</label> <input id="input-@label-success-bg" type="text" value="@brand-success" data-var="@label-success-bg" class="form-control"/> - <p class="help-block">Success label background color</p> + <p class="help-block">Success label background colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@label-info-bg">@label-info-bg</label> <input id="input-@label-info-bg" type="text" value="@brand-info" data-var="@label-info-bg" class="form-control"/> - <p class="help-block">Info label background color</p> + <p class="help-block">Info label background colo</p> </div> <div class="col-xs-4"> <label for="input-@label-warning-bg">@label-warning-bg</label> <input id="input-@label-warning-bg" type="text" value="@brand-warning" data-var="@label-warning-bg" class="form-control"/> - <p class="help-block">Warning label background color</p> + <p class="help-block">Warning label background colo</p> </div> <div class="col-xs-4"> <label for="input-@label-danger-bg">@label-danger-bg</label> <input id="input-@label-danger-bg" type="text" value="@brand-danger" data-var="@label-danger-bg" class="form-control"/> - <p class="help-block">Danger label background color</p> + <p class="help-block">Danger label background colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@label-color">@label-color</label> <input id="input-@label-color" type="text" value="#fff" data-var="@label-color" class="form-control"/> - <p class="help-block">Default label text color</p> + <p class="help-block">Default label text colo</p> </div> <div class="col-xs-4"> <label for="input-@label-link-hover-color">@label-link-hover-color</label> <input id="input-@label-link-hover-color" type="text" value="#fff" data-var="@label-link-hover-color" class="form-control"/> - <p class="help-block">Default text color of a linked label</p> + <p class="help-block">Default text color of a linked labe</p> </div> </div> <h2 id="modals">Modals</h2> @@ -1229,55 +1229,55 @@ <div class="col-xs-4"> <label for="input-@modal-inner-padding">@modal-inner-padding</label> <input id="input-@modal-inner-padding" type="text" value="15px" data-var="@modal-inner-padding" class="form-control"/> - <p class="help-block">Padding applied to the modal body</p> + <p class="help-block">Padding applied to the modal bod</p> </div> <div class="col-xs-4"> <label for="input-@modal-title-padding">@modal-title-padding</label> <input id="input-@modal-title-padding" type="text" value="15px" data-var="@modal-title-padding" class="form-control"/> - <p class="help-block">Padding applied to the modal title</p> + <p class="help-block">Padding applied to the modal titl</p> </div> <div class="col-xs-4"> <label for="input-@modal-title-line-height">@modal-title-line-height</label> <input id="input-@modal-title-line-height" type="text" value="@line-height-base" data-var="@modal-title-line-height" class="form-control"/> - <p class="help-block">Modal title line-height</p> + <p class="help-block">Modal title line-heigh</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@modal-content-bg">@modal-content-bg</label> <input id="input-@modal-content-bg" type="text" value="#fff" data-var="@modal-content-bg" class="form-control"/> - <p class="help-block">Background color of modal content area</p> + <p class="help-block">Background color of modal content are</p> </div> <div class="col-xs-4"> <label for="input-@modal-content-border-color">@modal-content-border-color</label> <input id="input-@modal-content-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@modal-content-border-color" class="form-control"/> - <p class="help-block">Modal content border color</p> + <p class="help-block">Modal content border colo</p> </div> <div class="col-xs-4"> <label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label> <input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/> - <p class="help-block">Modal content border color <strong>for IE8</strong></p> + <p class="help-block">Modal content border color *<em>for IE8</em></p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label> <input id="input-@modal-backdrop-bg" type="text" value="#000" data-var="@modal-backdrop-bg" class="form-control"/> - <p class="help-block">Modal backdrop background color</p> + <p class="help-block">Modal backdrop background colo</p> </div> <div class="col-xs-4"> <label for="input-@modal-backdrop-opacity">@modal-backdrop-opacity</label> <input id="input-@modal-backdrop-opacity" type="text" value=".5" data-var="@modal-backdrop-opacity" class="form-control"/> - <p class="help-block">Modal backdrop opacity</p> + <p class="help-block">Modal backdrop opacit</p> </div> <div class="col-xs-4"> <label for="input-@modal-header-border-color">@modal-header-border-color</label> <input id="input-@modal-header-border-color" type="text" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control"/> - <p class="help-block">Modal header border color</p> + <p class="help-block">Modal header border colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@modal-footer-border-color">@modal-footer-border-color</label> <input id="input-@modal-footer-border-color" type="text" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/> - <p class="help-block">Modal footer border color</p> + <p class="help-block">Modal footer border colo</p> </div> <div class="col-xs-4"> <label for="input-@modal-lg">@modal-lg</label> @@ -1294,7 +1294,7 @@ </div> </div> <h2 id="alerts">Alerts</h2> -<p>Define alert colors, border radius, and padding.</p> +<p>Define alert colors, border radius, and padding</p> <div class="row"> <div class="col-xs-4"> <label for="input-@alert-padding">@alert-padding</label> @@ -1366,44 +1366,44 @@ <div class="col-xs-4"> <label for="input-@progress-bg">@progress-bg</label> <input id="input-@progress-bg" type="text" value="#f5f5f5" data-var="@progress-bg" class="form-control"/> - <p class="help-block">Background color of the whole progress component</p> + <p class="help-block">Background color of the whole progress componen</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-color">@progress-bar-color</label> <input id="input-@progress-bar-color" type="text" value="#fff" data-var="@progress-bar-color" class="form-control"/> - <p class="help-block">Progress bar text color</p> + <p class="help-block">Progress bar text colo</p> </div> <div class="col-xs-4"> <label for="input-@progress-border-radius">@progress-border-radius</label> <input id="input-@progress-border-radius" type="text" value="@border-radius-base" data-var="@progress-border-radius" class="form-control"/> - <p class="help-block">Variable for setting rounded corners on progress bar.</p> + <p class="help-block">Variable for setting rounded corners on progress bar</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@progress-bar-bg">@progress-bar-bg</label> <input id="input-@progress-bar-bg" type="text" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/> - <p class="help-block">Default progress bar color</p> + <p class="help-block">Default progress bar colo</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-success-bg">@progress-bar-success-bg</label> <input id="input-@progress-bar-success-bg" type="text" value="@brand-success" data-var="@progress-bar-success-bg" class="form-control"/> - <p class="help-block">Success progress bar color</p> + <p class="help-block">Success progress bar colo</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-warning-bg">@progress-bar-warning-bg</label> <input id="input-@progress-bar-warning-bg" type="text" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control"/> - <p class="help-block">Warning progress bar color</p> + <p class="help-block">Warning progress bar colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label> <input id="input-@progress-bar-danger-bg" type="text" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control"/> - <p class="help-block">Danger progress bar color</p> + <p class="help-block">Danger progress bar colo</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-info-bg">@progress-bar-info-bg</label> <input id="input-@progress-bar-info-bg" type="text" value="@brand-info" data-var="@progress-bar-info-bg" class="form-control"/> - <p class="help-block">Info progress bar color</p> + <p class="help-block">Info progress bar colo</p> </div> </div> <h2 id="list-group">List group</h2> @@ -1411,60 +1411,60 @@ <div class="col-xs-4"> <label for="input-@list-group-bg">@list-group-bg</label> <input id="input-@list-group-bg" type="text" value="#fff" data-var="@list-group-bg" class="form-control"/> - <p class="help-block">Background color on <code>.list-group-item</code></p> + <p class="help-block">Background color on `.list-group-item</p> </div> <div class="col-xs-4"> <label for="input-@list-group-border">@list-group-border</label> <input id="input-@list-group-border" type="text" value="#ddd" data-var="@list-group-border" class="form-control"/> - <p class="help-block"><code>.list-group-item</code> border color</p> + <p class="help-block"><code>.list-group-item</code> border colo</p> </div> <div class="col-xs-4"> <label for="input-@list-group-border-radius">@list-group-border-radius</label> <input id="input-@list-group-border-radius" type="text" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control"/> - <p class="help-block">List group border radius</p> + <p class="help-block">List group border radiu</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@list-group-hover-bg">@list-group-hover-bg</label> <input id="input-@list-group-hover-bg" type="text" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control"/> - <p class="help-block">Background color of single list items on hover</p> + <p class="help-block">Background color of single list items on hove</p> </div> <div class="col-xs-4"> <label for="input-@list-group-active-color">@list-group-active-color</label> <input id="input-@list-group-active-color" type="text" value="@component-active-color" data-var="@list-group-active-color" class="form-control"/> - <p class="help-block">Text color of active list items</p> + <p class="help-block">Text color of active list item</p> </div> <div class="col-xs-4"> <label for="input-@list-group-active-bg">@list-group-active-bg</label> <input id="input-@list-group-active-bg" type="text" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control"/> - <p class="help-block">Background color of active list items</p> + <p class="help-block">Background color of active list item</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@list-group-active-border">@list-group-active-border</label> <input id="input-@list-group-active-border" type="text" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control"/> - <p class="help-block">Border color of active list elements</p> + <p class="help-block">Border color of active list element</p> </div> <div class="col-xs-4"> <label for="input-@list-group-active-text-color">@list-group-active-text-color</label> <input id="input-@list-group-active-text-color" type="text" value="lighten(@list-group-active-bg, 40%)" data-var="@list-group-active-text-color" class="form-control"/> - <p class="help-block">Text color for content within active list items</p> + <p class="help-block">Text color for content within active list item</p> </div> <div class="col-xs-4"> <label for="input-@list-group-disabled-color">@list-group-disabled-color</label> <input id="input-@list-group-disabled-color" type="text" value="@gray-light" data-var="@list-group-disabled-color" class="form-control"/> - <p class="help-block">Text color of disabled list items</p> + <p class="help-block">Text color of disabled list item</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@list-group-disabled-bg">@list-group-disabled-bg</label> <input id="input-@list-group-disabled-bg" type="text" value="@gray-lighter" data-var="@list-group-disabled-bg" class="form-control"/> - <p class="help-block">Background color of disabled list items</p> + <p class="help-block">Background color of disabled list item</p> </div> <div class="col-xs-4"> <label for="input-@list-group-disabled-text-color">@list-group-disabled-text-color</label> <input id="input-@list-group-disabled-text-color" type="text" value="@list-group-disabled-color" data-var="@list-group-disabled-text-color" class="form-control"/> - <p class="help-block">Text color for content within disabled list items</p> + <p class="help-block">Text color for content within disabled list item</p> </div> <div class="col-xs-4"> <label for="input-@list-group-link-color">@list-group-link-color</label> @@ -1506,7 +1506,7 @@ <div class="col-xs-4"> <label for="input-@panel-inner-border">@panel-inner-border</label> <input id="input-@panel-inner-border" type="text" value="#ddd" data-var="@panel-inner-border" class="form-control"/> - <p class="help-block">Border color for elements within panels</p> + <p class="help-block">Border color for elements within panel</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -1597,33 +1597,33 @@ <div class="col-xs-4"> <label for="input-@thumbnail-padding">@thumbnail-padding</label> <input id="input-@thumbnail-padding" type="text" value="4px" data-var="@thumbnail-padding" class="form-control"/> - <p class="help-block">Padding around the thumbnail image</p> + <p class="help-block">Padding around the thumbnail imag</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-bg">@thumbnail-bg</label> <input id="input-@thumbnail-bg" type="text" value="@body-bg" data-var="@thumbnail-bg" class="form-control"/> - <p class="help-block">Thumbnail background color</p> + <p class="help-block">Thumbnail background colo</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-border">@thumbnail-border</label> <input id="input-@thumbnail-border" type="text" value="#ddd" data-var="@thumbnail-border" class="form-control"/> - <p class="help-block">Thumbnail border color</p> + <p class="help-block">Thumbnail border colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label> <input id="input-@thumbnail-border-radius" type="text" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control"/> - <p class="help-block">Thumbnail border radius</p> + <p class="help-block">Thumbnail border radiu</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-caption-color">@thumbnail-caption-color</label> <input id="input-@thumbnail-caption-color" type="text" value="@text-color" data-var="@thumbnail-caption-color" class="form-control"/> - <p class="help-block">Custom text color for thumbnail captions</p> + <p class="help-block">Custom text color for thumbnail caption</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-caption-padding">@thumbnail-caption-padding</label> <input id="input-@thumbnail-caption-padding" type="text" value="9px" data-var="@thumbnail-caption-padding" class="form-control"/> - <p class="help-block">Padding around the thumbnail caption</p> + <p class="help-block">Padding around the thumbnail captio</p> </div> </div> <h2 id="wells">Wells</h2> @@ -1646,7 +1646,7 @@ <div class="col-xs-4"> <label for="input-@badge-link-hover-color">@badge-link-hover-color</label> <input id="input-@badge-link-hover-color" type="text" value="#fff" data-var="@badge-link-hover-color" class="form-control"/> - <p class="help-block">Linked badge text color on hover</p> + <p class="help-block">Linked badge text color on hove</p> </div> <div class="col-xs-4"> <label for="input-@badge-bg">@badge-bg</label> @@ -1656,12 +1656,12 @@ <div class="col-xs-4"> <label for="input-@badge-active-color">@badge-active-color</label> <input id="input-@badge-active-color" type="text" value="@link-color" data-var="@badge-active-color" class="form-control"/> - <p class="help-block">Badge text color in active nav link</p> + <p class="help-block">Badge text color in active nav lin</p> </div> <div class="col-xs-4"> <label for="input-@badge-active-bg">@badge-active-bg</label> <input id="input-@badge-active-bg" type="text" value="#fff" data-var="@badge-active-bg" class="form-control"/> - <p class="help-block">Badge background color in active nav link</p> + <p class="help-block">Badge background color in active nav lin</p> </div> <div class="col-xs-4"> <label for="input-@badge-font-weight">@badge-font-weight</label> @@ -1690,23 +1690,23 @@ <div class="col-xs-4"> <label for="input-@breadcrumb-bg">@breadcrumb-bg</label> <input id="input-@breadcrumb-bg" type="text" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control"/> - <p class="help-block">Breadcrumb background color</p> + <p class="help-block">Breadcrumb background colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@breadcrumb-color">@breadcrumb-color</label> <input id="input-@breadcrumb-color" type="text" value="#ccc" data-var="@breadcrumb-color" class="form-control"/> - <p class="help-block">Breadcrumb text color</p> + <p class="help-block">Breadcrumb text colo</p> </div> <div class="col-xs-4"> <label for="input-@breadcrumb-active-color">@breadcrumb-active-color</label> <input id="input-@breadcrumb-active-color" type="text" value="@gray-light" data-var="@breadcrumb-active-color" class="form-control"/> - <p class="help-block">Text color of current page in the breadcrumb</p> + <p class="help-block">Text color of current page in the breadcrum</p> </div> <div class="col-xs-4"> <label for="input-@breadcrumb-separator">@breadcrumb-separator</label> <input id="input-@breadcrumb-separator" type="text" value=""/"" data-var="@breadcrumb-separator" class="form-control"/> - <p class="help-block">Textual separator for between breadcrumb elements</p> + <p class="help-block">Textual separator for between breadcrumb element</p> </div> </div> <h2 id="carousel">Carousel</h2> @@ -1803,55 +1803,55 @@ <div class="col-xs-4"> <label for="input-@component-offset-horizontal">@component-offset-horizontal</label> <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/> - <p class="help-block">Horizontal offset for forms and lists.</p> + <p class="help-block">Horizontal offset for forms and lists</p> </div> <div class="col-xs-4"> <label for="input-@text-muted">@text-muted</label> <input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/> - <p class="help-block">Text muted color</p> + <p class="help-block">Text muted colo</p> </div> <div class="col-xs-4"> <label for="input-@abbr-border-color">@abbr-border-color</label> <input id="input-@abbr-border-color" type="text" value="@gray-light" data-var="@abbr-border-color" class="form-control"/> - <p class="help-block">Abbreviations and acronyms border color</p> + <p class="help-block">Abbreviations and acronyms border colo</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@headings-small-color">@headings-small-color</label> <input id="input-@headings-small-color" type="text" value="@gray-light" data-var="@headings-small-color" class="form-control"/> - <p class="help-block">Headings small color</p> + <p class="help-block">Headings small colo</p> </div> <div class="col-xs-4"> <label for="input-@blockquote-small-color">@blockquote-small-color</label> <input id="input-@blockquote-small-color" type="text" value="@gray-light" data-var="@blockquote-small-color" class="form-control"/> - <p class="help-block">Blockquote small color</p> + <p class="help-block">Blockquote small colo</p> </div> <div class="col-xs-4"> <label for="input-@blockquote-font-size">@blockquote-font-size</label> <input id="input-@blockquote-font-size" type="text" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/> - <p class="help-block">Blockquote font size</p> + <p class="help-block">Blockquote font siz</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@blockquote-border-color">@blockquote-border-color</label> <input id="input-@blockquote-border-color" type="text" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/> - <p class="help-block">Blockquote border color</p> + <p class="help-block">Blockquote border colo</p> </div> <div class="col-xs-4"> <label for="input-@page-header-border-color">@page-header-border-color</label> <input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/> - <p class="help-block">Page header border color</p> + <p class="help-block">Page header border colo</p> </div> <div class="col-xs-4"> <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label> <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/> - <p class="help-block">Width of horizontal description list titles</p> + <p class="help-block">Width of horizontal description list title</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@hr-border">@hr-border</label> <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/> - <p class="help-block">Horizontal line color.</p> + <p class="help-block">Horizontal line color</p> </div> </div> <!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.--> \ No newline at end of file -- cgit v1.2.3 From c897f9d5f0b331dfafb571429d7bd845b6b73b6a Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Tue, 28 Oct 2014 21:24:45 -0700 Subject: Safari v8.0 still suffers from Justified Nav rendering bug --- docs/_includes/components/navs.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index 0e9af578a..c9fc189c5 100644 --- a/docs/_includes/components/navs.html +++ b/docs/_includes/components/navs.html @@ -60,7 +60,7 @@ <p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p> <div class="bs-callout bs-callout-warning"> <h4>Safari and responsive justified navs</h4> - <p>As of v7.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> + <p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> </div> <div class="bs-example"> <ul class="nav nav-tabs nav-justified" role="tablist"> -- cgit v1.2.3 From a515191afddb3952fa93c6aacf83c73c8024e069 Mon Sep 17 00:00:00 2001 From: XhmikosR <xhmikosr@gmail.com> Date: Wed, 29 Oct 2014 06:46:02 +0200 Subject: Customizer: include the minified files only on GitHub pages. --- docs/_includes/footer.html | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'docs/_includes') diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index ef68da3eb..c6ad43cd5 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -46,7 +46,17 @@ <script src="../assets/js/src/application.js"></script> {% endif %} {% if page.slug == "customize" %} +{% if site.github %} <script src="../assets/js/customize.min.js"></script> +{% else %} +<script src="../assets/js/vendor/less.min.js"></script> +<script src="../assets/js/vendor/jszip.min.js"></script> +<script src="../assets/js/vendor/uglify.min.js"></script> +<script src="../assets/js/vendor/Blob.js"></script> +<script src="../assets/js/vendor/FileSaver.js"></script> +<script src="../assets/js/raw-files.min.js"></script> +<script src="../assets/js/src/customizer.js"></script> +{% endif %} {% endif %} <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../assets/js/ie10-viewport-bug-workaround.js"></script> -- cgit v1.2.3 From aad0f00887239a1971ae746a2828f037b5d30541 Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 28 Oct 2014 23:04:25 -0700 Subject: indentation and comment --- docs/_includes/footer.html | 41 ++++++++++++++++++++++++----------------- 1 file changed, 24 insertions(+), 17 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index c6ad43cd5..c44cabec8 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -33,31 +33,38 @@ ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + {% if site.github %} -<script src="../dist/js/bootstrap.min.js"></script> + <script src="../dist/js/bootstrap.min.js"></script> {% else %} -<script src="../dist/js/bootstrap.js"></script> + <script src="../dist/js/bootstrap.js"></script> {% endif %} + {% if site.github %} -<script src="../assets/js/docs.min.js"></script> + <script src="../assets/js/docs.min.js"></script> {% else %} -<script src="../assets/js/vendor/holder.js"></script> -<script src="../assets/js/vendor/ZeroClipboard.min.js"></script> -<script src="../assets/js/src/application.js"></script> + <script src="../assets/js/vendor/holder.js"></script> + <script src="../assets/js/vendor/ZeroClipboard.min.js"></script> + <script src="../assets/js/src/application.js"></script> {% endif %} + {% if page.slug == "customize" %} -{% if site.github %} -<script src="../assets/js/customize.min.js"></script> -{% else %} -<script src="../assets/js/vendor/less.min.js"></script> -<script src="../assets/js/vendor/jszip.min.js"></script> -<script src="../assets/js/vendor/uglify.min.js"></script> -<script src="../assets/js/vendor/Blob.js"></script> -<script src="../assets/js/vendor/FileSaver.js"></script> -<script src="../assets/js/raw-files.min.js"></script> -<script src="../assets/js/src/customizer.js"></script> -{% endif %} + {% if site.github %} + <script src="../assets/js/customize.min.js"></script> + {% else %} + {% comment %} + This list is repeated in our Gruntfile—update both when making changes. + {% endcomment %} + <script src="../assets/js/vendor/less.min.js"></script> + <script src="../assets/js/vendor/jszip.min.js"></script> + <script src="../assets/js/vendor/uglify.min.js"></script> + <script src="../assets/js/vendor/Blob.js"></script> + <script src="../assets/js/vendor/FileSaver.js"></script> + <script src="../assets/js/raw-files.min.js"></script> + <script src="../assets/js/src/customizer.js"></script> + {% endif %} {% endif %} + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../assets/js/ie10-viewport-bug-workaround.js"></script> -- cgit v1.2.3 From a75c6d84e102598ed39f7926a8e1cb4d3f6e487d Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Tue, 28 Oct 2014 23:08:42 -0700 Subject: grunt --- docs/_includes/customizer-variables.html | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/_includes') diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index fc5f63d02..04b7ff1e1 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -486,6 +486,11 @@ <input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/> <p class="help-block">Border color for textual input addon</p> </div> + <div class="col-xs-4"> + <label for="input-@cursor-disabled">@cursor-disabled</label> + <input id="input-@cursor-disabled" type="text" value="not-allowed" data-var="@cursor-disabled" class="form-control"/> + <p class="help-block">Disabled cursor for form controls and buttons</p> + </div> </div> <h2 id="dropdowns">Dropdowns</h2> <p>Dropdown menu container and contents</p> -- cgit v1.2.3 From 22baa8153b58e80df248b38ddf2aeae4f3f9cc2b Mon Sep 17 00:00:00 2001 From: Mark Otto <markdotto@gmail.com> Date: Wed, 29 Oct 2014 09:42:00 -0700 Subject: fixes #14911: bump dependencies to fix customizer text from being cut shor --- docs/_includes/customizer-variables.html | 308 +++++++++++++++---------------- 1 file changed, 154 insertions(+), 154 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html index 04b7ff1e1..e45884d5a 100644 --- a/docs/_includes/customizer-variables.html +++ b/docs/_includes/customizer-variables.html @@ -1,7 +1,7 @@ <!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.--> <h2 id="colors">Colors</h2> -<p>Gray and brand colors for use across Bootstrap</p> +<p>Gray and brand colors for use across Bootstrap.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@gray-base">@gray-base</label> @@ -52,37 +52,37 @@ </div> </div> <h2 id="scaffolding">Scaffolding</h2> -<p>Settings for some of the most global styles</p> +<p>Settings for some of the most global styles.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@body-bg">@body-bg</label> <input id="input-@body-bg" type="text" value="#fff" data-var="@body-bg" class="form-control"/> - <p class="help-block">Background color for <code><body></code></p> + <p class="help-block">Background color for <code><body></code>.</p> </div> <div class="col-xs-4"> <label for="input-@text-color">@text-color</label> <input id="input-@text-color" type="text" value="@gray-dark" data-var="@text-color" class="form-control"/> - <p class="help-block">Global text color on <code><body></code></p> + <p class="help-block">Global text color on <code><body></code>.</p> </div> <div class="col-xs-4"> <label for="input-@link-color">@link-color</label> <input id="input-@link-color" type="text" value="@brand-primary" data-var="@link-color" class="form-control"/> - <p class="help-block">Global textual link color</p> + <p class="help-block">Global textual link color.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@link-hover-color">@link-hover-color</label> <input id="input-@link-hover-color" type="text" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/> - <p class="help-block">Link hover color set via <code>darken()</code> function</p> + <p class="help-block">Link hover color set via <code>darken()</code> function.</p> </div> <div class="col-xs-4"> <label for="input-@link-hover-decoration">@link-hover-decoration</label> <input id="input-@link-hover-decoration" type="text" value="underline" data-var="@link-hover-decoration" class="form-control"/> - <p class="help-block">Link hover decoration</p> + <p class="help-block">Link hover decoration.</p> </div> </div> <h2 id="typography">Typography</h2> -<p>Font, line-height, and color for body text, headings, and more</p> +<p>Font, line-height, and color for body text, headings, and more.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@font-family-sans-serif">@font-family-sans-serif</label> @@ -95,7 +95,7 @@ <div class="col-xs-4"> <label for="input-@font-family-monospace">@font-family-monospace</label> <input id="input-@font-family-monospace" type="text" value="Menlo, Monaco, Consolas, "Courier New", monospace" data-var="@font-family-monospace" class="form-control"/> - <p class="help-block">Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code></p> + <p class="help-block">Default monospace fonts for <code><code></code>, <code><kbd></code>, and <code><pre></code>.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -144,18 +144,18 @@ <div class="col-xs-4"> <label for="input-@line-height-base">@line-height-base</label> <input id="input-@line-height-base" type="text" value="1.428571429" data-var="@line-height-base" class="form-control"/> - <p class="help-block">Unit-less <code>line-height</code> for use in components like buttons</p> + <p class="help-block">Unit-less <code>line-height</code> for use in components like buttons.</p> </div> <div class="col-xs-4"> <label for="input-@line-height-computed">@line-height-computed</label> <input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/> - <p class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc</p> + <p class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@headings-font-family">@headings-font-family</label> <input id="input-@headings-font-family" type="text" value="inherit" data-var="@headings-font-family" class="form-control"/> - <p class="help-block">By default, this inherits from the <code><body></code></p> + <p class="help-block">By default, this inherits from the <code><body></code>.</p> </div> <div class="col-xs-4"> <label for="input-@headings-font-weight">@headings-font-weight</label> @@ -172,26 +172,26 @@ </div> </div> <h2 id="iconography">Iconography</h2> -<p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower</p> +<p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@icon-font-path">@icon-font-path</label> <input id="input-@icon-font-path" type="text" value=""../fonts/"" data-var="@icon-font-path" class="form-control"/> - <p class="help-block">Load fonts from this directory</p> + <p class="help-block">Load fonts from this directory.</p> </div> <div class="col-xs-4"> <label for="input-@icon-font-name">@icon-font-name</label> <input id="input-@icon-font-name" type="text" value=""glyphicons-halflings-regular"" data-var="@icon-font-name" class="form-control"/> - <p class="help-block">File name for all font files</p> + <p class="help-block">File name for all font files.</p> </div> <div class="col-xs-4"> <label for="input-@icon-font-svg-id">@icon-font-svg-id</label> <input id="input-@icon-font-svg-id" type="text" value=""glyphicons_halflingsregular"" data-var="@icon-font-svg-id" class="form-control"/> - <p class="help-block">Element ID within SVG icon file</p> + <p class="help-block">Element ID within SVG icon file.</p> </div> </div> <h2 id="components">Components</h2> -<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start)</p> +<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p> <div class="row"> <div class="col-xs-4"> <label for="input-@padding-base-vertical">@padding-base-vertical</label> @@ -252,53 +252,53 @@ <div class="col-xs-4"> <label for="input-@component-active-color">@component-active-color</label> <input id="input-@component-active-color" type="text" value="#fff" data-var="@component-active-color" class="form-control"/> - <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p> + <p class="help-block">Global color for active items (e.g., navs or dropdowns).</p> </div> <div class="col-xs-4"> <label for="input-@component-active-bg">@component-active-bg</label> <input id="input-@component-active-bg" type="text" value="@brand-primary" data-var="@component-active-bg" class="form-control"/> - <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p> + <p class="help-block">Global background color for active items (e.g., navs or dropdowns).</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@caret-width-base">@caret-width-base</label> <input id="input-@caret-width-base" type="text" value="4px" data-var="@caret-width-base" class="form-control"/> - <p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns</p> + <p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns.</p> </div> <div class="col-xs-4"> <label for="input-@caret-width-large">@caret-width-large</label> <input id="input-@caret-width-large" type="text" value="5px" data-var="@caret-width-large" class="form-control"/> - <p class="help-block">Carets increase slightly in size for larger components</p> + <p class="help-block">Carets increase slightly in size for larger components.</p> </div> </div> <h2 id="tables">Tables</h2> -<p>Customizes the <code>.table</code> component with basic values, each used across all table variations</p> +<p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@table-cell-padding">@table-cell-padding</label> <input id="input-@table-cell-padding" type="text" value="8px" data-var="@table-cell-padding" class="form-control"/> - <p class="help-block">Padding for <code><th></code>s and <code><td></code>s</p> + <p class="help-block">Padding for <code><th></code>s and <code><td></code>s.</p> </div> <div class="col-xs-4"> <label for="input-@table-condensed-cell-padding">@table-condensed-cell-padding</label> <input id="input-@table-condensed-cell-padding" type="text" value="5px" data-var="@table-condensed-cell-padding" class="form-control"/> - <p class="help-block">Padding for cells in <code>.table-condensed</code></p> + <p class="help-block">Padding for cells in <code>.table-condensed</code>.</p> </div> <div class="col-xs-4"> <label for="input-@table-bg">@table-bg</label> <input id="input-@table-bg" type="text" value="transparent" data-var="@table-bg" class="form-control"/> - <p class="help-block">Default background color used for all tables</p> + <p class="help-block">Default background color used for all tables.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@table-bg-accent">@table-bg-accent</label> <input id="input-@table-bg-accent" type="text" value="#f9f9f9" data-var="@table-bg-accent" class="form-control"/> - <p class="help-block">Background color used for <code>.table-striped</code></p> + <p class="help-block">Background color used for <code>.table-striped</code>.</p> </div> <div class="col-xs-4"> <label for="input-@table-bg-hover">@table-bg-hover</label> <input id="input-@table-bg-hover" type="text" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/> - <p class="help-block">Background color used for <code>.table-hover</code></p> + <p class="help-block">Background color used for <code>.table-hover</code>.</p> </div> <div class="col-xs-4"> <label for="input-@table-bg-active">@table-bg-active</label> @@ -308,11 +308,11 @@ <div class="col-xs-4"> <label for="input-@table-border-color">@table-border-color</label> <input id="input-@table-border-color" type="text" value="#ddd" data-var="@table-border-color" class="form-control"/> - <p class="help-block">Border color for table and cell borders</p> + <p class="help-block">Border color for table and cell borders.</p> </div> </div> <h2 id="buttons">Buttons</h2> -<p>For each of Bootstrap's buttons, define text, background and border color</p> +<p>For each of Bootstrap's buttons, define text, background and border color.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@btn-font-weight">@btn-font-weight</label> @@ -406,65 +406,65 @@ <div class="col-xs-4"> <label for="input-@input-bg">@input-bg</label> <input id="input-@input-bg" type="text" value="#fff" data-var="@input-bg" class="form-control"/> - <p class="help-block"><code><input></code> background colo</p> + <p class="help-block"><code><input></code> background color</p> </div> <div class="col-xs-4"> <label for="input-@input-bg-disabled">@input-bg-disabled</label> <input id="input-@input-bg-disabled" type="text" value="@gray-lighter" data-var="@input-bg-disabled" class="form-control"/> - <p class="help-block"><code><input disabled></code> background colo</p> + <p class="help-block"><code><input disabled></code> background color</p> </div> <div class="col-xs-4"> <label for="input-@input-color">@input-color</label> <input id="input-@input-color" type="text" value="@gray" data-var="@input-color" class="form-control"/> - <p class="help-block">Text color for <code><input></code></p> + <p class="help-block">Text color for <code><input></code>s</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-border">@input-border</label> <input id="input-@input-border" type="text" value="#ccc" data-var="@input-border" class="form-control"/> - <p class="help-block"><code><input></code> border colo</p> + <p class="help-block"><code><input></code> border color</p> </div> <div class="col-xs-4"> <label for="input-@input-border-radius">@input-border-radius</label> <input id="input-@input-border-radius" type="text" value="@border-radius-base" data-var="@input-border-radius" class="form-control"/> - <p class="help-block">Default <code>.form-control</code> border radiu</p> + <p class="help-block">Default <code>.form-control</code> border radius</p> </div> <div class="col-xs-4"> <label for="input-@input-border-radius-large">@input-border-radius-large</label> <input id="input-@input-border-radius-large" type="text" value="@border-radius-large" data-var="@input-border-radius-large" class="form-control"/> - <p class="help-block">Large <code>.form-control</code> border radiu</p> + <p class="help-block">Large <code>.form-control</code> border radius</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-border-radius-small">@input-border-radius-small</label> <input id="input-@input-border-radius-small" type="text" value="@border-radius-small" data-var="@input-border-radius-small" class="form-control"/> - <p class="help-block">Small <code>.form-control</code> border radiu</p> + <p class="help-block">Small <code>.form-control</code> border radius</p> </div> <div class="col-xs-4"> <label for="input-@input-border-focus">@input-border-focus</label> <input id="input-@input-border-focus" type="text" value="#66afe9" data-var="@input-border-focus" class="form-control"/> - <p class="help-block">Border color for inputs on focu</p> + <p class="help-block">Border color for inputs on focus</p> </div> <div class="col-xs-4"> <label for="input-@input-color-placeholder">@input-color-placeholder</label> <input id="input-@input-color-placeholder" type="text" value="#999" data-var="@input-color-placeholder" class="form-control"/> - <p class="help-block">Placeholder text colo</p> + <p class="help-block">Placeholder text color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-height-base">@input-height-base</label> <input id="input-@input-height-base" type="text" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control"/> - <p class="help-block">Default <code>.form-control</code> heigh</p> + <p class="help-block">Default <code>.form-control</code> height</p> </div> <div class="col-xs-4"> <label for="input-@input-height-large">@input-height-large</label> <input id="input-@input-height-large" type="text" value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large" class="form-control"/> - <p class="help-block">Large <code>.form-control</code> heigh</p> + <p class="help-block">Large <code>.form-control</code> height</p> </div> <div class="col-xs-4"> <label for="input-@input-height-small">@input-height-small</label> <input id="input-@input-height-small" type="text" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control"/> - <p class="help-block">Small <code>.form-control</code> heigh</p> + <p class="help-block">Small <code>.form-control</code> height</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -478,110 +478,110 @@ <div class="col-xs-4"> <label for="input-@input-group-addon-bg">@input-group-addon-bg</label> <input id="input-@input-group-addon-bg" type="text" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/> - <p class="help-block">Background color for textual input addon</p> + <p class="help-block">Background color for textual input addons</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label> <input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/> - <p class="help-block">Border color for textual input addon</p> + <p class="help-block">Border color for textual input addons</p> </div> <div class="col-xs-4"> <label for="input-@cursor-disabled">@cursor-disabled</label> <input id="input-@cursor-disabled" type="text" value="not-allowed" data-var="@cursor-disabled" class="form-control"/> - <p class="help-block">Disabled cursor for form controls and buttons</p> + <p class="help-block">Disabled cursor for form controls and buttons.</p> </div> </div> <h2 id="dropdowns">Dropdowns</h2> -<p>Dropdown menu container and contents</p> +<p>Dropdown menu container and contents.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@dropdown-bg">@dropdown-bg</label> <input id="input-@dropdown-bg" type="text" value="#fff" data-var="@dropdown-bg" class="form-control"/> - <p class="help-block">Background for the dropdown menu</p> + <p class="help-block">Background for the dropdown menu.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-border">@dropdown-border</label> <input id="input-@dropdown-border" type="text" value="rgba(0,0,0,.15)" data-var="@dropdown-border" class="form-control"/> - <p class="help-block">Dropdown menu <code>border-color</code></p> + <p class="help-block">Dropdown menu <code>border-color</code>.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-fallback-border">@dropdown-fallback-border</label> <input id="input-@dropdown-fallback-border" type="text" value="#ccc" data-var="@dropdown-fallback-border" class="form-control"/> - <p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong></p> + <p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label> <input id="input-@dropdown-divider-bg" type="text" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control"/> - <p class="help-block">Divider color for between dropdown items</p> + <p class="help-block">Divider color for between dropdown items.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-color">@dropdown-link-color</label> <input id="input-@dropdown-link-color" type="text" value="@gray-dark" data-var="@dropdown-link-color" class="form-control"/> - <p class="help-block">Dropdown link text color</p> + <p class="help-block">Dropdown link text color.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-hover-color">@dropdown-link-hover-color</label> <input id="input-@dropdown-link-hover-color" type="text" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control"/> - <p class="help-block">Hover color for dropdown links</p> + <p class="help-block">Hover color for dropdown links.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label> <input id="input-@dropdown-link-hover-bg" type="text" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control"/> - <p class="help-block">Hover background for dropdown links</p> + <p class="help-block">Hover background for dropdown links.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-active-color">@dropdown-link-active-color</label> <input id="input-@dropdown-link-active-color" type="text" value="@component-active-color" data-var="@dropdown-link-active-color" class="form-control"/> - <p class="help-block">Active dropdown menu item text color</p> + <p class="help-block">Active dropdown menu item text color.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-link-active-bg">@dropdown-link-active-bg</label> <input id="input-@dropdown-link-active-bg" type="text" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control"/> - <p class="help-block">Active dropdown menu item background color</p> + <p class="help-block">Active dropdown menu item background color.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label> <input id="input-@dropdown-link-disabled-color" type="text" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control"/> - <p class="help-block">Disabled dropdown menu item background color</p> + <p class="help-block">Disabled dropdown menu item background color.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-header-color">@dropdown-header-color</label> <input id="input-@dropdown-header-color" type="text" value="@gray-light" data-var="@dropdown-header-color" class="form-control"/> - <p class="help-block">Text color for headers within dropdown menus</p> + <p class="help-block">Text color for headers within dropdown menus.</p> </div> <div class="col-xs-4"> <label for="input-@dropdown-caret-color">@dropdown-caret-color</label> <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/> - <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.</p> + <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p> </div> </div> <h2 id="media-queries-breakpoints">Media queries breakpoints</h2> -<p>Define the breakpoints at which your layout will change, adapting to different screen sizes</p> +<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@screen-xs">@screen-xs</label> <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p> </div> <div class="col-xs-4"> <label for="input-@screen-xs-min">@screen-xs-min</label> <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.</p> + <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p> </div> <div class="col-xs-4"> <label for="input-@screen-phone">@screen-phone</label> <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@screen-sm">@screen-sm</label> <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p> </div> <div class="col-xs-4"> <label for="input-@screen-sm-min">@screen-sm-min</label> @@ -590,13 +590,13 @@ <div class="col-xs-4"> <label for="input-@screen-tablet">@screen-tablet</label> <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@screen-md">@screen-md</label> <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p> </div> <div class="col-xs-4"> <label for="input-@screen-md-min">@screen-md-min</label> @@ -605,13 +605,13 @@ <div class="col-xs-4"> <label for="input-@screen-desktop">@screen-desktop</label> <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@screen-lg">@screen-lg</label> <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p> </div> <div class="col-xs-4"> <label for="input-@screen-lg-min">@screen-lg-min</label> @@ -620,7 +620,7 @@ <div class="col-xs-4"> <label for="input-@screen-lg-desktop">@screen-lg-desktop</label> <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/> - <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.</p> + <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -637,32 +637,32 @@ </div> </div> <h2 id="grid-system">Grid system</h2> -<p>Define your custom responsive grid</p> +<p>Define your custom responsive grid.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@grid-columns">@grid-columns</label> <input id="input-@grid-columns" type="text" value="12" data-var="@grid-columns" class="form-control"/> - <p class="help-block">Number of columns in the grid</p> + <p class="help-block">Number of columns in the grid.</p> </div> <div class="col-xs-4"> <label for="input-@grid-gutter-width">@grid-gutter-width</label> <input id="input-@grid-gutter-width" type="text" value="30px" data-var="@grid-gutter-width" class="form-control"/> - <p class="help-block">Padding between columns. Gets divided in half for the left and right</p> + <p class="help-block">Padding between columns. Gets divided in half for the left and right.</p> </div> <div class="col-xs-4"> <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label> <input id="input-@grid-float-breakpoint" type="text" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control"/> - <p class="help-block">Point at which the navbar becomes uncollapsed</p> + <p class="help-block">Point at which the navbar becomes uncollapsed.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label> <input id="input-@grid-float-breakpoint-max" type="text" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control"/> - <p class="help-block">Point at which the navbar begins collapsing</p> + <p class="help-block">Point at which the navbar begins collapsing.</p> </div> </div> <h2 id="container-sizes">Container sizes</h2> -<p>Define the maximum width of <code>.container</code> for different screen sizes</p> +<p>Define the maximum width of <code>.container</code> for different screen sizes.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@container-tablet">@container-tablet</label> @@ -671,7 +671,7 @@ <div class="col-xs-4"> <label for="input-@container-sm">@container-sm</label> <input id="input-@container-sm" type="text" value="@container-tablet" data-var="@container-sm" class="form-control"/> - <p class="help-block">For <code>@screen-sm-min</code> and up</p> + <p class="help-block">For <code>@screen-sm-min</code> and up.</p> </div> <div class="col-xs-4"> <label for="input-@container-desktop">@container-desktop</label> @@ -681,7 +681,7 @@ <div class="col-xs-4"> <label for="input-@container-md">@container-md</label> <input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/> - <p class="help-block">For <code>@screen-md-min</code> and up</p> + <p class="help-block">For <code>@screen-md-min</code> and up.</p> </div> <div class="col-xs-4"> <label for="input-@container-large-desktop">@container-large-desktop</label> @@ -690,7 +690,7 @@ <div class="col-xs-4"> <label for="input-@container-lg">@container-lg</label> <input id="input-@container-lg" type="text" value="@container-large-desktop" data-var="@container-lg" class="form-control"/> - <p class="help-block">For <code>@screen-lg-min</code> and up</p> + <p class="help-block">For <code>@screen-lg-min</code> and up.</p> </div> </div> <h2 id="navbar">Navbar</h2> @@ -1041,7 +1041,7 @@ </div> </div> <h2 id="form-states-and-alerts">Form states and alerts</h2> -<p>Define colors for form feedback states and, by default, alerts</p> +<p>Define colors for form feedback states and, by default, alerts.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@state-success-text">@state-success-text</label> @@ -1100,17 +1100,17 @@ <div class="col-xs-4"> <label for="input-@tooltip-max-width">@tooltip-max-width</label> <input id="input-@tooltip-max-width" type="text" value="200px" data-var="@tooltip-max-width" class="form-control"/> - <p class="help-block">Tooltip max widt</p> + <p class="help-block">Tooltip max width</p> </div> <div class="col-xs-4"> <label for="input-@tooltip-color">@tooltip-color</label> <input id="input-@tooltip-color" type="text" value="#fff" data-var="@tooltip-color" class="form-control"/> - <p class="help-block">Tooltip text colo</p> + <p class="help-block">Tooltip text color</p> </div> <div class="col-xs-4"> <label for="input-@tooltip-bg">@tooltip-bg</label> <input id="input-@tooltip-bg" type="text" value="#000" data-var="@tooltip-bg" class="form-control"/> - <p class="help-block">Tooltip background colo</p> + <p class="help-block">Tooltip background color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -1120,12 +1120,12 @@ <div class="col-xs-4"> <label for="input-@tooltip-arrow-width">@tooltip-arrow-width</label> <input id="input-@tooltip-arrow-width" type="text" value="5px" data-var="@tooltip-arrow-width" class="form-control"/> - <p class="help-block">Tooltip arrow widt</p> + <p class="help-block">Tooltip arrow width</p> </div> <div class="col-xs-4"> <label for="input-@tooltip-arrow-color">@tooltip-arrow-color</label> <input id="input-@tooltip-arrow-color" type="text" value="@tooltip-bg" data-var="@tooltip-arrow-color" class="form-control"/> - <p class="help-block">Tooltip arrow colo</p> + <p class="help-block">Tooltip arrow color</p> </div> </div> <h2 id="popovers">Popovers</h2> @@ -1133,55 +1133,55 @@ <div class="col-xs-4"> <label for="input-@popover-bg">@popover-bg</label> <input id="input-@popover-bg" type="text" value="#fff" data-var="@popover-bg" class="form-control"/> - <p class="help-block">Popover body background colo</p> + <p class="help-block">Popover body background color</p> </div> <div class="col-xs-4"> <label for="input-@popover-max-width">@popover-max-width</label> <input id="input-@popover-max-width" type="text" value="276px" data-var="@popover-max-width" class="form-control"/> - <p class="help-block">Popover maximum widt</p> + <p class="help-block">Popover maximum width</p> </div> <div class="col-xs-4"> <label for="input-@popover-border-color">@popover-border-color</label> <input id="input-@popover-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control"/> - <p class="help-block">Popover border colo</p> + <p class="help-block">Popover border color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label> <input id="input-@popover-fallback-border-color" type="text" value="#ccc" data-var="@popover-fallback-border-color" class="form-control"/> - <p class="help-block">Popover fallback border colo</p> + <p class="help-block">Popover fallback border color</p> </div> <div class="col-xs-4"> <label for="input-@popover-title-bg">@popover-title-bg</label> <input id="input-@popover-title-bg" type="text" value="darken(@popover-bg, 3%)" data-var="@popover-title-bg" class="form-control"/> - <p class="help-block">Popover title background colo</p> + <p class="help-block">Popover title background color</p> </div> <div class="col-xs-4"> <label for="input-@popover-arrow-width">@popover-arrow-width</label> <input id="input-@popover-arrow-width" type="text" value="10px" data-var="@popover-arrow-width" class="form-control"/> - <p class="help-block">Popover arrow widt</p> + <p class="help-block">Popover arrow width</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@popover-arrow-color">@popover-arrow-color</label> <input id="input-@popover-arrow-color" type="text" value="@popover-bg" data-var="@popover-arrow-color" class="form-control"/> - <p class="help-block">Popover arrow colo</p> + <p class="help-block">Popover arrow color</p> </div> <div class="col-xs-4"> <label for="input-@popover-arrow-outer-width">@popover-arrow-outer-width</label> <input id="input-@popover-arrow-outer-width" type="text" value="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width" class="form-control"/> - <p class="help-block">Popover outer arrow widt</p> + <p class="help-block">Popover outer arrow width</p> </div> <div class="col-xs-4"> <label for="input-@popover-arrow-outer-color">@popover-arrow-outer-color</label> <input id="input-@popover-arrow-outer-color" type="text" value="fadein(@popover-border-color, 5%)" data-var="@popover-arrow-outer-color" class="form-control"/> - <p class="help-block">Popover outer arrow colo</p> + <p class="help-block">Popover outer arrow color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label> <input id="input-@popover-arrow-outer-fallback-color" type="text" value="darken(@popover-fallback-border-color, 20%)" data-var="@popover-arrow-outer-fallback-color" class="form-control"/> - <p class="help-block">Popover outer arrow fallback colo</p> + <p class="help-block">Popover outer arrow fallback color</p> </div> </div> <h2 id="labels">Labels</h2> @@ -1189,44 +1189,44 @@ <div class="col-xs-4"> <label for="input-@label-default-bg">@label-default-bg</label> <input id="input-@label-default-bg" type="text" value="@gray-light" data-var="@label-default-bg" class="form-control"/> - <p class="help-block">Default label background colo</p> + <p class="help-block">Default label background color</p> </div> <div class="col-xs-4"> <label for="input-@label-primary-bg">@label-primary-bg</label> <input id="input-@label-primary-bg" type="text" value="@brand-primary" data-var="@label-primary-bg" class="form-control"/> - <p class="help-block">Primary label background colo</p> + <p class="help-block">Primary label background color</p> </div> <div class="col-xs-4"> <label for="input-@label-success-bg">@label-success-bg</label> <input id="input-@label-success-bg" type="text" value="@brand-success" data-var="@label-success-bg" class="form-control"/> - <p class="help-block">Success label background colo</p> + <p class="help-block">Success label background color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@label-info-bg">@label-info-bg</label> <input id="input-@label-info-bg" type="text" value="@brand-info" data-var="@label-info-bg" class="form-control"/> - <p class="help-block">Info label background colo</p> + <p class="help-block">Info label background color</p> </div> <div class="col-xs-4"> <label for="input-@label-warning-bg">@label-warning-bg</label> <input id="input-@label-warning-bg" type="text" value="@brand-warning" data-var="@label-warning-bg" class="form-control"/> - <p class="help-block">Warning label background colo</p> + <p class="help-block">Warning label background color</p> </div> <div class="col-xs-4"> <label for="input-@label-danger-bg">@label-danger-bg</label> <input id="input-@label-danger-bg" type="text" value="@brand-danger" data-var="@label-danger-bg" class="form-control"/> - <p class="help-block">Danger label background colo</p> + <p class="help-block">Danger label background color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@label-color">@label-color</label> <input id="input-@label-color" type="text" value="#fff" data-var="@label-color" class="form-control"/> - <p class="help-block">Default label text colo</p> + <p class="help-block">Default label text color</p> </div> <div class="col-xs-4"> <label for="input-@label-link-hover-color">@label-link-hover-color</label> <input id="input-@label-link-hover-color" type="text" value="#fff" data-var="@label-link-hover-color" class="form-control"/> - <p class="help-block">Default text color of a linked labe</p> + <p class="help-block">Default text color of a linked label</p> </div> </div> <h2 id="modals">Modals</h2> @@ -1234,55 +1234,55 @@ <div class="col-xs-4"> <label for="input-@modal-inner-padding">@modal-inner-padding</label> <input id="input-@modal-inner-padding" type="text" value="15px" data-var="@modal-inner-padding" class="form-control"/> - <p class="help-block">Padding applied to the modal bod</p> + <p class="help-block">Padding applied to the modal body</p> </div> <div class="col-xs-4"> <label for="input-@modal-title-padding">@modal-title-padding</label> <input id="input-@modal-title-padding" type="text" value="15px" data-var="@modal-title-padding" class="form-control"/> - <p class="help-block">Padding applied to the modal titl</p> + <p class="help-block">Padding applied to the modal title</p> </div> <div class="col-xs-4"> <label for="input-@modal-title-line-height">@modal-title-line-height</label> <input id="input-@modal-title-line-height" type="text" value="@line-height-base" data-var="@modal-title-line-height" class="form-control"/> - <p class="help-block">Modal title line-heigh</p> + <p class="help-block">Modal title line-height</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@modal-content-bg">@modal-content-bg</label> <input id="input-@modal-content-bg" type="text" value="#fff" data-var="@modal-content-bg" class="form-control"/> - <p class="help-block">Background color of modal content are</p> + <p class="help-block">Background color of modal content area</p> </div> <div class="col-xs-4"> <label for="input-@modal-content-border-color">@modal-content-border-color</label> <input id="input-@modal-content-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@modal-content-border-color" class="form-control"/> - <p class="help-block">Modal content border colo</p> + <p class="help-block">Modal content border color</p> </div> <div class="col-xs-4"> <label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label> <input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/> - <p class="help-block">Modal content border color *<em>for IE8</em></p> + <p class="help-block">Modal content border color <strong>for IE8</strong></p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label> <input id="input-@modal-backdrop-bg" type="text" value="#000" data-var="@modal-backdrop-bg" class="form-control"/> - <p class="help-block">Modal backdrop background colo</p> + <p class="help-block">Modal backdrop background color</p> </div> <div class="col-xs-4"> <label for="input-@modal-backdrop-opacity">@modal-backdrop-opacity</label> <input id="input-@modal-backdrop-opacity" type="text" value=".5" data-var="@modal-backdrop-opacity" class="form-control"/> - <p class="help-block">Modal backdrop opacit</p> + <p class="help-block">Modal backdrop opacity</p> </div> <div class="col-xs-4"> <label for="input-@modal-header-border-color">@modal-header-border-color</label> <input id="input-@modal-header-border-color" type="text" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control"/> - <p class="help-block">Modal header border colo</p> + <p class="help-block">Modal header border color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@modal-footer-border-color">@modal-footer-border-color</label> <input id="input-@modal-footer-border-color" type="text" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/> - <p class="help-block">Modal footer border colo</p> + <p class="help-block">Modal footer border color</p> </div> <div class="col-xs-4"> <label for="input-@modal-lg">@modal-lg</label> @@ -1299,7 +1299,7 @@ </div> </div> <h2 id="alerts">Alerts</h2> -<p>Define alert colors, border radius, and padding</p> +<p>Define alert colors, border radius, and padding.</p> <div class="row"> <div class="col-xs-4"> <label for="input-@alert-padding">@alert-padding</label> @@ -1371,44 +1371,44 @@ <div class="col-xs-4"> <label for="input-@progress-bg">@progress-bg</label> <input id="input-@progress-bg" type="text" value="#f5f5f5" data-var="@progress-bg" class="form-control"/> - <p class="help-block">Background color of the whole progress componen</p> + <p class="help-block">Background color of the whole progress component</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-color">@progress-bar-color</label> <input id="input-@progress-bar-color" type="text" value="#fff" data-var="@progress-bar-color" class="form-control"/> - <p class="help-block">Progress bar text colo</p> + <p class="help-block">Progress bar text color</p> </div> <div class="col-xs-4"> <label for="input-@progress-border-radius">@progress-border-radius</label> <input id="input-@progress-border-radius" type="text" value="@border-radius-base" data-var="@progress-border-radius" class="form-control"/> - <p class="help-block">Variable for setting rounded corners on progress bar</p> + <p class="help-block">Variable for setting rounded corners on progress bar.</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@progress-bar-bg">@progress-bar-bg</label> <input id="input-@progress-bar-bg" type="text" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/> - <p class="help-block">Default progress bar colo</p> + <p class="help-block">Default progress bar color</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-success-bg">@progress-bar-success-bg</label> <input id="input-@progress-bar-success-bg" type="text" value="@brand-success" data-var="@progress-bar-success-bg" class="form-control"/> - <p class="help-block">Success progress bar colo</p> + <p class="help-block">Success progress bar color</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-warning-bg">@progress-bar-warning-bg</label> <input id="input-@progress-bar-warning-bg" type="text" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control"/> - <p class="help-block">Warning progress bar colo</p> + <p class="help-block">Warning progress bar color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label> <input id="input-@progress-bar-danger-bg" type="text" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control"/> - <p class="help-block">Danger progress bar colo</p> + <p class="help-block">Danger progress bar color</p> </div> <div class="col-xs-4"> <label for="input-@progress-bar-info-bg">@progress-bar-info-bg</label> <input id="input-@progress-bar-info-bg" type="text" value="@brand-info" data-var="@progress-bar-info-bg" class="form-control"/> - <p class="help-block">Info progress bar colo</p> + <p class="help-block">Info progress bar color</p> </div> </div> <h2 id="list-group">List group</h2> @@ -1416,60 +1416,60 @@ <div class="col-xs-4"> <label for="input-@list-group-bg">@list-group-bg</label> <input id="input-@list-group-bg" type="text" value="#fff" data-var="@list-group-bg" class="form-control"/> - <p class="help-block">Background color on `.list-group-item</p> + <p class="help-block">Background color on <code>.list-group-item</code></p> </div> <div class="col-xs-4"> <label for="input-@list-group-border">@list-group-border</label> <input id="input-@list-group-border" type="text" value="#ddd" data-var="@list-group-border" class="form-control"/> - <p class="help-block"><code>.list-group-item</code> border colo</p> + <p class="help-block"><code>.list-group-item</code> border color</p> </div> <div class="col-xs-4"> <label for="input-@list-group-border-radius">@list-group-border-radius</label> <input id="input-@list-group-border-radius" type="text" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control"/> - <p class="help-block">List group border radiu</p> + <p class="help-block">List group border radius</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@list-group-hover-bg">@list-group-hover-bg</label> <input id="input-@list-group-hover-bg" type="text" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control"/> - <p class="help-block">Background color of single list items on hove</p> + <p class="help-block">Background color of single list items on hover</p> </div> <div class="col-xs-4"> <label for="input-@list-group-active-color">@list-group-active-color</label> <input id="input-@list-group-active-color" type="text" value="@component-active-color" data-var="@list-group-active-color" class="form-control"/> - <p class="help-block">Text color of active list item</p> + <p class="help-block">Text color of active list items</p> </div> <div class="col-xs-4"> <label for="input-@list-group-active-bg">@list-group-active-bg</label> <input id="input-@list-group-active-bg" type="text" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control"/> - <p class="help-block">Background color of active list item</p> + <p class="help-block">Background color of active list items</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@list-group-active-border">@list-group-active-border</label> <input id="input-@list-group-active-border" type="text" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control"/> - <p class="help-block">Border color of active list element</p> + <p class="help-block">Border color of active list elements</p> </div> <div class="col-xs-4"> <label for="input-@list-group-active-text-color">@list-group-active-text-color</label> <input id="input-@list-group-active-text-color" type="text" value="lighten(@list-group-active-bg, 40%)" data-var="@list-group-active-text-color" class="form-control"/> - <p class="help-block">Text color for content within active list item</p> + <p class="help-block">Text color for content within active list items</p> </div> <div class="col-xs-4"> <label for="input-@list-group-disabled-color">@list-group-disabled-color</label> <input id="input-@list-group-disabled-color" type="text" value="@gray-light" data-var="@list-group-disabled-color" class="form-control"/> - <p class="help-block">Text color of disabled list item</p> + <p class="help-block">Text color of disabled list items</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@list-group-disabled-bg">@list-group-disabled-bg</label> <input id="input-@list-group-disabled-bg" type="text" value="@gray-lighter" data-var="@list-group-disabled-bg" class="form-control"/> - <p class="help-block">Background color of disabled list item</p> + <p class="help-block">Background color of disabled list items</p> </div> <div class="col-xs-4"> <label for="input-@list-group-disabled-text-color">@list-group-disabled-text-color</label> <input id="input-@list-group-disabled-text-color" type="text" value="@list-group-disabled-color" data-var="@list-group-disabled-text-color" class="form-control"/> - <p class="help-block">Text color for content within disabled list item</p> + <p class="help-block">Text color for content within disabled list items</p> </div> <div class="col-xs-4"> <label for="input-@list-group-link-color">@list-group-link-color</label> @@ -1511,7 +1511,7 @@ <div class="col-xs-4"> <label for="input-@panel-inner-border">@panel-inner-border</label> <input id="input-@panel-inner-border" type="text" value="#ddd" data-var="@panel-inner-border" class="form-control"/> - <p class="help-block">Border color for elements within panel</p> + <p class="help-block">Border color for elements within panels</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> @@ -1602,33 +1602,33 @@ <div class="col-xs-4"> <label for="input-@thumbnail-padding">@thumbnail-padding</label> <input id="input-@thumbnail-padding" type="text" value="4px" data-var="@thumbnail-padding" class="form-control"/> - <p class="help-block">Padding around the thumbnail imag</p> + <p class="help-block">Padding around the thumbnail image</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-bg">@thumbnail-bg</label> <input id="input-@thumbnail-bg" type="text" value="@body-bg" data-var="@thumbnail-bg" class="form-control"/> - <p class="help-block">Thumbnail background colo</p> + <p class="help-block">Thumbnail background color</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-border">@thumbnail-border</label> <input id="input-@thumbnail-border" type="text" value="#ddd" data-var="@thumbnail-border" class="form-control"/> - <p class="help-block">Thumbnail border colo</p> + <p class="help-block">Thumbnail border color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label> <input id="input-@thumbnail-border-radius" type="text" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control"/> - <p class="help-block">Thumbnail border radiu</p> + <p class="help-block">Thumbnail border radius</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-caption-color">@thumbnail-caption-color</label> <input id="input-@thumbnail-caption-color" type="text" value="@text-color" data-var="@thumbnail-caption-color" class="form-control"/> - <p class="help-block">Custom text color for thumbnail caption</p> + <p class="help-block">Custom text color for thumbnail captions</p> </div> <div class="col-xs-4"> <label for="input-@thumbnail-caption-padding">@thumbnail-caption-padding</label> <input id="input-@thumbnail-caption-padding" type="text" value="9px" data-var="@thumbnail-caption-padding" class="form-control"/> - <p class="help-block">Padding around the thumbnail captio</p> + <p class="help-block">Padding around the thumbnail caption</p> </div> </div> <h2 id="wells">Wells</h2> @@ -1651,7 +1651,7 @@ <div class="col-xs-4"> <label for="input-@badge-link-hover-color">@badge-link-hover-color</label> <input id="input-@badge-link-hover-color" type="text" value="#fff" data-var="@badge-link-hover-color" class="form-control"/> - <p class="help-block">Linked badge text color on hove</p> + <p class="help-block">Linked badge text color on hover</p> </div> <div class="col-xs-4"> <label for="input-@badge-bg">@badge-bg</label> @@ -1661,12 +1661,12 @@ <div class="col-xs-4"> <label for="input-@badge-active-color">@badge-active-color</label> <input id="input-@badge-active-color" type="text" value="@link-color" data-var="@badge-active-color" class="form-control"/> - <p class="help-block">Badge text color in active nav lin</p> + <p class="help-block">Badge text color in active nav link</p> </div> <div class="col-xs-4"> <label for="input-@badge-active-bg">@badge-active-bg</label> <input id="input-@badge-active-bg" type="text" value="#fff" data-var="@badge-active-bg" class="form-control"/> - <p class="help-block">Badge background color in active nav lin</p> + <p class="help-block">Badge background color in active nav link</p> </div> <div class="col-xs-4"> <label for="input-@badge-font-weight">@badge-font-weight</label> @@ -1695,23 +1695,23 @@ <div class="col-xs-4"> <label for="input-@breadcrumb-bg">@breadcrumb-bg</label> <input id="input-@breadcrumb-bg" type="text" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control"/> - <p class="help-block">Breadcrumb background colo</p> + <p class="help-block">Breadcrumb background color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@breadcrumb-color">@breadcrumb-color</label> <input id="input-@breadcrumb-color" type="text" value="#ccc" data-var="@breadcrumb-color" class="form-control"/> - <p class="help-block">Breadcrumb text colo</p> + <p class="help-block">Breadcrumb text color</p> </div> <div class="col-xs-4"> <label for="input-@breadcrumb-active-color">@breadcrumb-active-color</label> <input id="input-@breadcrumb-active-color" type="text" value="@gray-light" data-var="@breadcrumb-active-color" class="form-control"/> - <p class="help-block">Text color of current page in the breadcrum</p> + <p class="help-block">Text color of current page in the breadcrumb</p> </div> <div class="col-xs-4"> <label for="input-@breadcrumb-separator">@breadcrumb-separator</label> <input id="input-@breadcrumb-separator" type="text" value=""/"" data-var="@breadcrumb-separator" class="form-control"/> - <p class="help-block">Textual separator for between breadcrumb element</p> + <p class="help-block">Textual separator for between breadcrumb elements</p> </div> </div> <h2 id="carousel">Carousel</h2> @@ -1808,55 +1808,55 @@ <div class="col-xs-4"> <label for="input-@component-offset-horizontal">@component-offset-horizontal</label> <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/> - <p class="help-block">Horizontal offset for forms and lists</p> + <p class="help-block">Horizontal offset for forms and lists.</p> </div> <div class="col-xs-4"> <label for="input-@text-muted">@text-muted</label> <input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/> - <p class="help-block">Text muted colo</p> + <p class="help-block">Text muted color</p> </div> <div class="col-xs-4"> <label for="input-@abbr-border-color">@abbr-border-color</label> <input id="input-@abbr-border-color" type="text" value="@gray-light" data-var="@abbr-border-color" class="form-control"/> - <p class="help-block">Abbreviations and acronyms border colo</p> + <p class="help-block">Abbreviations and acronyms border color</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@headings-small-color">@headings-small-color</label> <input id="input-@headings-small-color" type="text" value="@gray-light" data-var="@headings-small-color" class="form-control"/> - <p class="help-block">Headings small colo</p> + <p class="help-block">Headings small color</p> </div> <div class="col-xs-4"> <label for="input-@blockquote-small-color">@blockquote-small-color</label> <input id="input-@blockquote-small-color" type="text" value="@gray-light" data-var="@blockquote-small-color" class="form-control"/> - <p class="help-block">Blockquote small colo</p> + <p class="help-block">Blockquote small color</p> </div> <div class="col-xs-4"> <label for="input-@blockquote-font-size">@blockquote-font-size</label> <input id="input-@blockquote-font-size" type="text" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/> - <p class="help-block">Blockquote font siz</p> + <p class="help-block">Blockquote font size</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@blockquote-border-color">@blockquote-border-color</label> <input id="input-@blockquote-border-color" type="text" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/> - <p class="help-block">Blockquote border colo</p> + <p class="help-block">Blockquote border color</p> </div> <div class="col-xs-4"> <label for="input-@page-header-border-color">@page-header-border-color</label> <input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/> - <p class="help-block">Page header border colo</p> + <p class="help-block">Page header border color</p> </div> <div class="col-xs-4"> <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label> <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/> - <p class="help-block">Width of horizontal description list title</p> + <p class="help-block">Width of horizontal description list titles</p> </div> <div class="clearfix"></div> <div class="col-xs-4"> <label for="input-@hr-border">@hr-border</label> <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/> - <p class="help-block">Horizontal line color</p> + <p class="help-block">Horizontal line color.</p> </div> </div> <!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.--> \ No newline at end of file -- cgit v1.2.3 From 1339ab7a130600330b1db4e3acae9760710a0a41 Mon Sep 17 00:00:00 2001 From: hillai <hillaib@walla.com> Date: Thu, 30 Oct 2014 18:13:39 +0200 Subject: Replace v3.2.1 reference with v3.3.0 since there wasn't a v3.2.1 Closes #14941 --- docs/_includes/js/modal.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index e47464a4c..1bb606ab8 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -262,7 +262,7 @@ <td>path</td> <td>false</td> <td> - <p><span class="text-danger">This option is deprecated since v3.2.1 and will be removed in v4.</span> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p> + <p><strong class="text-danger">This option is deprecated since v3.3.0 and will be removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p> <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p> {% highlight html %} <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> -- cgit v1.2.3 From 88dfd954fa8b0eeefe37482ffd1dba19b1369098 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Thu, 30 Oct 2014 11:31:28 -0700 Subject: Replace deprecated uses of .pull-left & .pull-right in .media docs Refs https://github.com/twbs/bootlint/pull/153 [skip sauce] --- docs/_includes/components/media.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/components/media.html b/docs/_includes/components/media.html index 1ea4176d4..d77a2520c 100644 --- a/docs/_includes/components/media.html +++ b/docs/_includes/components/media.html @@ -43,16 +43,16 @@ </a> </div> <div class="media"> - <a class="pull-right" href="#"> - <img data-src="holder.js/64x64" alt="Generic placeholder image"> - </a> - <a class="pull-left" href="#"> + <a class="media-left" href="#"> <img data-src="holder.js/64x64" alt="Generic placeholder image"> </a> <div class="media-body"> - <h4 class="media-heading">Deprecated pull-right pull-left example</h4> + <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </div> + <a class="media-right" href="#"> + <img data-src="holder.js/64x64" alt="Generic placeholder image"> + </a> </div> </div><!-- /.bs-example --> {% highlight html %} -- cgit v1.2.3 From 1f64aac6b9e04e9f5ba2cf2dcc29031c3d150d81 Mon Sep 17 00:00:00 2001 From: Manuel Meurer <manuel@krautcomputing.com> Date: Sat, 1 Nov 2014 11:51:11 +0100 Subject: fix whitespace in js dropdown docs --- docs/_includes/js/dropdowns.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html index dd360a334..64b03fa54 100644 --- a/docs/_includes/js/dropdowns.html +++ b/docs/_includes/js/dropdowns.html @@ -124,7 +124,7 @@ <div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown trigger - <span class="caret"></span> + <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... -- cgit v1.2.3 From f4129792874465a7950b871c6042110f47954248 Mon Sep 17 00:00:00 2001 From: Aaron Cordovez <aaron.cordovez.m@gmail.com> Date: Sat, 1 Nov 2014 17:46:33 -0700 Subject: Fix typo Corrected spelling of the word "elements" --- docs/_includes/js/carousel.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/_includes') diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index 62adc09e6..a74802b62 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -1,7 +1,7 @@ <div class="bs-docs-section"> <h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1> - <p>A slideshow component for cycling through elemnts, like a carousel. <strong>Nested carousels are not supported.</strong></p> + <p>A slideshow component for cycling through elements, like a carousel. <strong>Nested carousels are not supported.</strong></p> <h2 id="carousel-examples">Examples</h2> <div class="bs-example"> -- cgit v1.2.3 From f0d8894d54afbd10b43a0919383b35fdbf961b51 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Mon, 3 Nov 2014 10:56:30 -0800 Subject: Add #14868 to the compatibility docs --- docs/_includes/getting-started/browser-device-support.html | 13 +++++++++++-- docs/_includes/nav/getting-started.html | 2 +- 2 files changed, 12 insertions(+), 3 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html index a0b5ef367..fd66f54b4 100644 --- a/docs/_includes/getting-started/browser-device-support.html +++ b/docs/_includes/getting-started/browser-device-support.html @@ -165,13 +165,22 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h3 id="support-browser-zooming">Browser zooming</h3> <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p> - <h3 id="support-printing">Printer viewports</h3> - <p>Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p> + <h3 id="support-printing">Printing</h3> + <p>Even in some modern browsers, printing can be quirky.</p> + <p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p> <ul> <li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li> <li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li> <li>Add custom media queries to change the grid size breakpoints for print media only.</li> </ul> + <p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p> + {% highlight css %} +@media print { + .container { + width: auto; + } +} + {% endhighlight %} <h3 id="support-android-stock-browser">Android stock browser</h3> <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p> diff --git a/docs/_includes/nav/getting-started.html b/docs/_includes/nav/getting-started.html index d858b2e55..b06dcce9b 100644 --- a/docs/_includes/nav/getting-started.html +++ b/docs/_includes/nav/getting-started.html @@ -56,7 +56,7 @@ <li><a href="#support-safari-percentages">Safari percent rounding</a></li> <li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li> <li><a href="#support-browser-zooming">Browser zooming</a></li> - <li><a href="#support-printing">Printer viewports</a></li> + <li><a href="#support-printing">Printing</a></li> <li><a href="#support-android-stock-browser">Android stock browser</a></li> <li><a href="#support-validators">Validators</a></li> </ul> -- cgit v1.2.3 From 594831f4f3f3c1164812cfdd60497fe6d7438376 Mon Sep 17 00:00:00 2001 From: Chris Rebert <code@rebertia.com> Date: Mon, 3 Nov 2014 13:37:27 -0800 Subject: Add event.relatedTarget + `data-*` example to Modal docs Fixes #14245 --- docs/_includes/js/modal.html | 80 ++++++++++++++++++++++++++++++++++++++ docs/_includes/nav/javascript.html | 1 + 2 files changed, 81 insertions(+) (limited to 'docs/_includes') diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index 1bb606ab8..22924b4e7 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -211,6 +211,86 @@ <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> ... </div> +{% endhighlight %} + + <h2 id="modals-related-target">Varying modal content based on trigger button</h2> + <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p> + <div class="bs-example" style="padding-bottom: 24px;"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> + ...more buttons... + + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title" id="exampleModalLabel">New message</h4> + </div> + <div class="modal-body"> + <form role="form"> + <div class="form-group"> + <label for="recipient-name" class="control-label">Recipient:</label> + <input type="text" class="form-control" id="recipient-name"> + </div> + <div class="form-group"> + <label for="message-text" class="control-label">Message:</label> + <textarea class="form-control" id="message-text"></textarea> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Send message</button> + </div> + </div> + </div> + </div><!-- /.modal --> + </div><!-- /.bs-example --> +{% highlight html %} +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> +...more buttons... + +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title" id="exampleModalLabel">New message</h4> + </div> + <div class="modal-body"> + <form role="form"> + <div class="form-group"> + <label for="recipient-name" class="control-label">Recipient:</label> + <input type="text" class="form-control" id="recipient-name"> + </div> + <div class="form-group"> + <label for="message-text" class="control-label">Message:</label> + <textarea class="form-control" id="message-text"></textarea> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Send message</button> + </div> + </div> + </div> +</div> +{% endhighlight %} +{% highlight js %} +$('#exampleModal').on('show.bs.modal', function (event) { + var button = $(event.relatedTarget) // Button that triggered the modal + var recipient = button.data('whatever') // Extract info from data-* attributes + // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). + // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. + var modal = $(this) + modal.find('.modal-title').text('New message to ' + recipient) + modal.find('.modal-body input').val(recipient) +}) {% endhighlight %} <h2 id="modals-usage">Usage</h2> diff --git a/docs/_includes/nav/javascript.html b/docs/_includes/nav/javascript.html index 3459bb1e4..a1695bce8 100644 --- a/docs/_includes/nav/javascript.html +++ b/docs/_includes/nav/javascript.html @@ -17,6 +17,7 @@ <li><a href="#modals-examples">Examples</a></li> <li><a href="#modals-sizes">Sizes</a></li> <li><a href="#modals-remove-animation">Remove animation</a></li> + <li><a href="#modals-related-target">Varying content based on trigger button</a></li> <li><a href="#modals-usage">Usage</a></li> </ul> </li> -- cgit v1.2.3 From d10700427805c40497b24d7f4ffdd58a7a83c997 Mon Sep 17 00:00:00 2001 From: Heinrich Fenkart <hnrch02@gmail.com> Date: Mon, 3 Nov 2014 16:19:40 +0100 Subject: Remove duplicate code from Customizer/Gruntfile by sharing it --- docs/_includes/footer.html | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) (limited to 'docs/_includes') diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index c44cabec8..24dfd26a5 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -43,25 +43,19 @@ {% if site.github %} <script src="../assets/js/docs.min.js"></script> {% else %} - <script src="../assets/js/vendor/holder.js"></script> - <script src="../assets/js/vendor/ZeroClipboard.min.js"></script> - <script src="../assets/js/src/application.js"></script> + {% for file in site.data.configBridge.paths.docsJs %} + <script src="{{ file }}"></script> + {% endfor %} {% endif %} {% if page.slug == "customize" %} + <script>var __configBridge = {{ site.data.configBridge.config | jsonify }}</script> {% if site.github %} <script src="../assets/js/customize.min.js"></script> {% else %} - {% comment %} - This list is repeated in our Gruntfile—update both when making changes. - {% endcomment %} - <script src="../assets/js/vendor/less.min.js"></script> - <script src="../assets/js/vendor/jszip.min.js"></script> - <script src="../assets/js/vendor/uglify.min.js"></script> - <script src="../assets/js/vendor/Blob.js"></script> - <script src="../assets/js/vendor/FileSaver.js"></script> - <script src="../assets/js/raw-files.min.js"></script> - <script src="../assets/js/src/customizer.js"></script> + {% for file in site.data.configBridge.paths.customizerJs %} + <script src="{{ file }}"></script> + {% endfor %} {% endif %} {% endif %} -- cgit v1.2.3 From e55feacf5be152694205b14491ad626537756314 Mon Sep 17 00:00:00 2001 From: Jayanth Koushik <jnkoushik@gmail.com> Date: Tue, 4 Nov 2014 22:20:34 +0530 Subject: Add initialization examples to tooltip and popover "Opt-in functionality" callouts Fixes #14950. Closes #15015 by merging it. --- docs/_includes/js/popovers.html | 6 ++++++ docs/_includes/js/tooltips.html | 7 +++++++ 2 files changed, 13 insertions(+) (limited to 'docs/_includes') diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index 7739c685e..09b8f36eb 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -12,6 +12,12 @@ <div class="bs-callout bs-callout-danger"> <h4>Opt-in functionality</h4> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> + <p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p> +{% highlight js %} +$(function () { + $('[data-toggle="popover"]').popover() +}) +{% endhighlight %} </div> <div class="bs-callout bs-callout-warning"> <h4>Popovers in button groups and input groups require special setting</h4> diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index 3ec076b70..87893608b 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -61,6 +61,13 @@ <div class="bs-callout bs-callout-danger"> <h4>Opt-in functionality</h4> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> + <p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p> +{% highlight js %} +$(function () { + $('[data-toggle="tooltip"]').tooltip() +}) +{% endhighlight %} + </div> <div class="bs-callout bs-callout-warning"> <h4>Tooltips in button groups and input groups require special setting</h4> -- cgit v1.2.3