mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
Merge branch 'master' into fix-8869
This commit is contained in:
Mark Otto
@@ -151,6 +151,25 @@
|
||||
<input id="input-@headings-color" type="text" value="inherit" data-var="@headings-color" class="form-control"/>
|
||||
</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>
|
||||
<div class="row">
|
||||
<div class="bs-customizer-input">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
<div class="row">
|
||||
@@ -1126,7 +1145,7 @@
|
||||
<div class="row">
|
||||
<div class="bs-customizer-input">
|
||||
<label for="input-@modal-inner-padding">@modal-inner-padding</label>
|
||||
<input id="input-@modal-inner-padding" type="text" value="20px" data-var="@modal-inner-padding" class="form-control"/>
|
||||
<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">
|
||||
@@ -1311,17 +1330,17 @@
|
||||
<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"/>
|
||||
<p class="help-block">Background color of single list elements on hover</p>
|
||||
<p class="help-block">Background color of single list items on hover</p>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<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 elements</p>
|
||||
<p class="help-block">Text color of active list items</p>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<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 elements</p>
|
||||
<p class="help-block">Background color of active list items</p>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<label for="input-@list-group-active-border">@list-group-active-border</label>
|
||||
@@ -1331,11 +1350,31 @@
|
||||
<div class="bs-customizer-input">
|
||||
<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">
|
||||
<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="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"/>
|
||||
<p class="help-block">Background color of disabled list items</p>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<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">
|
||||
<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="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"/>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<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"/>
|
||||
@@ -1352,6 +1391,14 @@
|
||||
<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">
|
||||
<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="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"/>
|
||||
</div>
|
||||
<div class="bs-customizer-input">
|
||||
<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"/>
|
||||
|
||||
@@ -103,6 +103,7 @@
|
||||
<ul class="nav">
|
||||
<li><a href="#progress-basic">Basic example</a></li>
|
||||
<li><a href="#progress-label">With label</a></li>
|
||||
<li><a href="#progress-low-percentages">Low percentages</a></li>
|
||||
<li><a href="#progress-alternatives">Contextual alternatives</a></li>
|
||||
<li><a href="#progress-striped">Striped</a></li>
|
||||
<li><a href="#progress-animated">Animated</a></li>
|
||||
@@ -122,6 +123,7 @@
|
||||
<li><a href="#list-group-basic">Basic example</a></li>
|
||||
<li><a href="#list-group-badges">Badges</a></li>
|
||||
<li><a href="#list-group-linked">Linked items</a></li>
|
||||
<li><a href="#list-group-disabled">Disabled items</a></li>
|
||||
<li><a href="#list-group-contextual-classes">Contextual classes</a></li>
|
||||
<li><a href="#list-group-custom-content">Custom content</a></li>
|
||||
</ul>
|
||||
@@ -136,4 +138,5 @@
|
||||
<li><a href="#panels-list-group">With list groups</a>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#responsive-embed">Responsive embed</a></li>
|
||||
<li><a href="#wells">Wells</a></li>
|
||||
|
||||
@@ -30,7 +30,8 @@
|
||||
<ul class="nav">
|
||||
<li><a href="#type-headings">Headings</a></li>
|
||||
<li><a href="#type-body-copy">Body copy</a></li>
|
||||
<li><a href="#type-emphasis">Emphasis</a></li>
|
||||
<li><a href="#type-inline-text">Inline text elements</a></li>
|
||||
<li><a href="#type-alignment">Alignment classes</a></li>
|
||||
<li><a href="#type-abbreviations">Abbreviations</a></li>
|
||||
<li><a href="#type-addresses">Addresses</a></li>
|
||||
<li><a href="#type-blockquotes">Blockquotes</a></li>
|
||||
@@ -43,6 +44,8 @@
|
||||
<li><a href="#code-inline">Inline code</a></li>
|
||||
<li><a href="#code-user-input">User input</a></li>
|
||||
<li><a href="#code-block">Blocks of code</a></li>
|
||||
<li><a href="#code-variables">Variables</a></li>
|
||||
<li><a href="#code-sample-output">Sample output</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@@ -67,6 +70,7 @@
|
||||
<li><a href="#forms-controls-static">Static control</a></li>
|
||||
<li><a href="#forms-control-focus">Focus state</a></li>
|
||||
<li><a href="#forms-control-disabled">Disabled state</a></li>
|
||||
<li><a href="#forms-control-readonly">Readonly state</a></li>
|
||||
<li><a href="#forms-control-validation">Validation states</a></li>
|
||||
<li><a href="#forms-control-sizes">Control sizing</a></li>
|
||||
<li><a href="#forms-help-text">Help text</a></li>
|
||||
@@ -128,3 +132,10 @@
|
||||
<li><a href="#sass-installation">Rails install</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#rtl">RTL version</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#rtl-how-to">How to use</a></li>
|
||||
<li><a href="#rtl-css-flip">CSS Flip</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#scaffolding">Scaffolding</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#iconography">Iconography</a></li>
|
||||
<li><a href="#components">Components</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body>
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
{% include nav-main.html %}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% include header.html %}
|
||||
</head>
|
||||
<body class="bs-docs-home">
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
|
||||
<!-- Docs master nav -->
|
||||
{% include nav-main.html %}
|
||||
|
||||
@@ -80,6 +80,20 @@ lead: "Learn about the project's history, meet the maintaining teams, and find o
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Download mark</h2>
|
||||
<p>Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.</p>
|
||||
<div class="bs-brand-logos">
|
||||
<div class="bs-brand-item">
|
||||
<img class="svg" src="../assets/brand/bootstrap-solid.svg" alt="Bootstrap">
|
||||
</div>
|
||||
<div class="bs-brand-item inverse">
|
||||
<img class="svg" src="../assets/brand/bootstrap-outline.svg" alt="Bootstrap">
|
||||
</div>
|
||||
<div class="bs-brand-item inverse">
|
||||
<img class="svg" src="../assets/brand/bootstrap-punchout.svg" alt="Bootstrap">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Name</h2>
|
||||
<p>The project and framework should always be referred to as <strong>Bootstrap</strong>. No Twitter before it, no capital <em>s</em>, and no abbreviations except for one, a capital <strong>B</strong>.</p>
|
||||
<div class="bs-brand-logos">
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
|
||||
<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
|
||||
<path id="bg" display="inline" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192
|
||||
C0,135.9,45.9,90,102,90h408c56.1,0,102,45.9,102,102V600z"/>
|
||||
<g id="B" display="inline" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<g id="bg_1_">
|
||||
<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
|
||||
c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
|
||||
v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
|
||||
</g>
|
||||
<g id="B_2_" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
|
||||
<g display="inline">
|
||||
<path fill="#FFFFFF" d="M373.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H218.8V529h110.5c19,0,33.8-4.9,44.2-14.8
|
||||
c10.5-9.8,15.8-23.8,15.8-41.8C389.2,454.8,384,441.2,373.5,431.8z"/>
|
||||
<path fill="#FFFFFF" d="M358.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
|
||||
C335.7,372.5,348.2,368.2,358.2,359.8z"/>
|
||||
<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
|
||||
C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
|
||||
h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
|
||||
c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
|
||||
<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
|
||||
<path id="bg" display="inline" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192
|
||||
C0,135.9,45.9,90,102,90h408c56.1,0,102,45.9,102,102V600z"/>
|
||||
<g id="B" display="inline" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
|
||||
<g id="bg_1_" display="inline">
|
||||
<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
|
||||
c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
|
||||
v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
|
||||
</g>
|
||||
<g id="B_2_" display="inline" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M383.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V529h110.5c19,0,33.8-4.9,44.2-14.8
|
||||
c10.5-9.8,15.8-23.8,15.8-41.8C399.2,454.8,394,441.2,383.5,431.8z"/>
|
||||
<path fill="#FFFFFF" d="M368.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
|
||||
C345.7,372.5,358.2,368.2,368.2,359.8z"/>
|
||||
<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
|
||||
C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
|
||||
h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
|
||||
c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
|
||||
<g id="solid" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<path id="bg" fill="#563D7C" d="M612,600c0,56.1-45.9,102-102,102H102C45.9,702,0,656.1,0,600V192C0,135.9,45.9,90,102,90h408
|
||||
c56.1,0,102,45.9,102,102V600z"/>
|
||||
<g id="B" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="outline" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
|
||||
<g id="bg_1_" display="inline">
|
||||
<path fill="#FFFFFF" d="M510,96c25.5,0,49.6,10,67.8,28.2S606,166.5,606,192v408c0,25.5-10,49.6-28.2,67.8S535.5,696,510,696H102
|
||||
c-25.5,0-49.6-10-67.8-28.2S6,625.5,6,600V192c0-25.5,10-49.6,28.2-67.8S76.5,96,102,96H510 M510,90H102C45.9,90,0,135.9,0,192
|
||||
v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192C612,135.9,566.1,90,510,90L510,90z"/>
|
||||
</g>
|
||||
<g id="B_2_" display="inline" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8h-164V223z M228.8,372.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102V372.5z M228.8,529h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V529z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="punchout" inkscape:version="0.48.1 r9760" sodipodi:docname="twitter_bootstrap_logo.svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" display="none">
|
||||
<g display="inline">
|
||||
<path fill="#FFFFFF" d="M373.5,431.8c-10.5-9.5-25.2-14.2-44.2-14.2H218.8V529h110.5c19,0,33.8-4.9,44.2-14.8
|
||||
c10.5-9.8,15.8-23.8,15.8-41.8C389.2,454.8,384,441.2,373.5,431.8z"/>
|
||||
<path fill="#FFFFFF" d="M358.2,359.8c10-8.5,15-20.8,15-36.8c0-18-4.5-30.7-13.5-38c-9-7.3-22-11-39-11h-102v98.5h102
|
||||
C335.7,372.5,348.2,368.2,358.2,359.8z"/>
|
||||
<path fill="#FFFFFF" d="M510,90H102C45.9,90,0,135.9,0,192v408c0,56.1,45.9,102,102,102h408c56.1,0,102-45.9,102-102V192
|
||||
C612,135.9,566.1,90,510,90z M454.2,519.8c-5,12.2-12.8,22.7-23.5,31.5c-10.7,8.8-24.3,15.8-41,21c-16.7,5.2-36.5,7.8-59.5,7.8
|
||||
h-164V223h173.5c32,0,57.7,7.3,77,22c19.3,14.7,29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2c-8.8,12.8-21.4,22.8-37.8,29.8v1
|
||||
c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8C461.7,494.5,459.2,507.6,454.2,519.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -1,5 +1,3 @@
|
||||
/*csslint ids: false, overqualified-elements: false, fallback-colors: false*/
|
||||
|
||||
/*!
|
||||
* Bootstrap Docs (http://getbootstrap.com)
|
||||
* Copyright 2011-2014 Twitter, Inc.
|
||||
@@ -85,10 +83,10 @@ body {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
background-color: #563d7c;
|
||||
border-radius: 15%;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
}
|
||||
.bs-docs-booticon-sm {
|
||||
width: 30px;
|
||||
@@ -128,8 +126,8 @@ body {
|
||||
}
|
||||
.bs-docs-nav .navbar-brand,
|
||||
.bs-docs-nav .navbar-nav > li > a {
|
||||
color: #563d7c;
|
||||
font-weight: 500;
|
||||
color: #563d7c;
|
||||
}
|
||||
.bs-docs-nav .navbar-nav > li > a:hover,
|
||||
.bs-docs-nav .navbar-nav > .active > a,
|
||||
@@ -165,8 +163,8 @@ body {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.bs-docs-footer-links {
|
||||
margin-top: 20px;
|
||||
padding-left: 0;
|
||||
margin-top: 20px;
|
||||
color: #999;
|
||||
}
|
||||
.bs-docs-footer-links li {
|
||||
@@ -196,14 +194,14 @@ body {
|
||||
}
|
||||
.bs-docs-social-buttons {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.bs-docs-social-buttons li {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
padding: 5px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
.bs-docs-social-buttons .twitter-follow-button {
|
||||
width: 225px !important;
|
||||
@@ -213,8 +211,8 @@ body {
|
||||
}
|
||||
/* Style the GitHub buttons via CSS instead of inline attributes */
|
||||
.github-btn {
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -233,10 +231,12 @@ body {
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
||||
background-color: #6f5499;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
|
||||
background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%);
|
||||
background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
|
||||
background-repeat: repeat-x;
|
||||
background-image: -o-linear-gradient(top, #563d7c 0%, #6f5499 100%);
|
||||
background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
/* Masthead (headings and download button) */
|
||||
@@ -345,10 +345,10 @@ body {
|
||||
|
||||
.carbonad {
|
||||
width: auto !important;
|
||||
margin: 30px -30px -31px !important;
|
||||
padding: 20px !important;
|
||||
overflow: hidden; /* clearfix */
|
||||
height: auto !important;
|
||||
padding: 20px !important;
|
||||
margin: 30px -30px -31px !important;
|
||||
overflow: hidden; /* clearfix */
|
||||
font-size: 13px !important;
|
||||
line-height: 16px !important;
|
||||
text-align: left;
|
||||
@@ -361,8 +361,8 @@ body {
|
||||
}
|
||||
.carbonad-text,
|
||||
.carbonad-tag {
|
||||
float: none !important;
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin-left: 145px !important;
|
||||
@@ -387,8 +387,8 @@ body {
|
||||
.carbonad {
|
||||
width: 330px !important;
|
||||
margin: 20px auto !important;
|
||||
border-radius: 4px;
|
||||
border-width: 1px !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bs-docs-masthead .carbonad {
|
||||
margin: 50px auto 0 !important;
|
||||
@@ -397,8 +397,8 @@ body {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.carbonad {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -407,9 +407,9 @@ body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px; /* 15px instead of 0 since box-sizing */
|
||||
margin: 0 !important;
|
||||
padding: 15px !important;
|
||||
width: 330px !important;
|
||||
padding: 15px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.bs-docs-masthead .carbonad {
|
||||
position: static;
|
||||
@@ -424,7 +424,7 @@ body {
|
||||
*/
|
||||
|
||||
.bs-docs-featurette {
|
||||
padding-top: 40px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
@@ -439,19 +439,19 @@ body {
|
||||
}
|
||||
|
||||
.bs-docs-featurette-title {
|
||||
margin-bottom: 5px;
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.half-rule {
|
||||
width: 100px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
.bs-docs-featurette h3 {
|
||||
margin-bottom: 5px;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.bs-docs-featurette-img {
|
||||
display: block;
|
||||
@@ -459,8 +459,8 @@ body {
|
||||
color: #333;
|
||||
}
|
||||
.bs-docs-featurette-img:hover {
|
||||
text-decoration: none;
|
||||
color: #428bca;
|
||||
text-decoration: none;
|
||||
}
|
||||
.bs-docs-featurette-img img {
|
||||
display: block;
|
||||
@@ -469,12 +469,12 @@ body {
|
||||
|
||||
/* Featured sites */
|
||||
.bs-docs-featured-sites {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.bs-docs-featured-sites .col-sm-3 {
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
@@ -484,16 +484,16 @@ body {
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bs-docs-featurette {
|
||||
padding-top: 100px;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.bs-docs-featurette-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
.bs-docs-featurette .lead {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 80%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.bs-docs-featured-sites .col-sm-3:first-child img {
|
||||
border-top-left-radius: 4px;
|
||||
@@ -536,10 +536,10 @@ body {
|
||||
/* All levels of nav */
|
||||
.bs-docs-sidebar .nav > li > a {
|
||||
display: block;
|
||||
padding: 4px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
padding: 4px 20px;
|
||||
}
|
||||
.bs-docs-sidebar .nav > li > a:hover,
|
||||
.bs-docs-sidebar .nav > li > a:focus {
|
||||
@@ -565,7 +565,7 @@ body {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.bs-docs-sidebar .nav .nav > li > a {
|
||||
padding-top: 1px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 30px;
|
||||
font-size: 12px;
|
||||
@@ -578,23 +578,23 @@ body {
|
||||
.bs-docs-sidebar .nav .nav > .active > a,
|
||||
.bs-docs-sidebar .nav .nav > .active:hover > a,
|
||||
.bs-docs-sidebar .nav .nav > .active:focus > a {
|
||||
font-weight: 500;
|
||||
padding-left: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Back to top (hidden on mobile) */
|
||||
.back-to-top {
|
||||
display: none;
|
||||
padding: 4px 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
.back-to-top:hover {
|
||||
text-decoration: none;
|
||||
color: #563d7c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -650,8 +650,8 @@ body {
|
||||
}
|
||||
|
||||
h1[id] {
|
||||
margin-top: 0;
|
||||
padding-top: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -664,8 +664,8 @@ h1[id] {
|
||||
|
||||
/* Common styles for all types */
|
||||
.bs-callout {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-left: 3px solid #eee;
|
||||
}
|
||||
.bs-callout h4 {
|
||||
@@ -716,7 +716,7 @@ h1[id] {
|
||||
}
|
||||
.color-swatch {
|
||||
float: left;
|
||||
width: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 5px;
|
||||
border-radius: 3px;
|
||||
@@ -724,28 +724,56 @@ h1[id] {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.color-swatch {
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Framework colors */
|
||||
.color-swatches .gray-darker { background-color: #222; }
|
||||
.color-swatches .gray-dark { background-color: #333; }
|
||||
.color-swatches .gray { background-color: #555; }
|
||||
.color-swatches .gray-light { background-color: #999; }
|
||||
.color-swatches .gray-lighter { background-color: #eee; }
|
||||
.color-swatches .brand-primary { background-color: #428bca; }
|
||||
.color-swatches .brand-success { background-color: #5cb85c; }
|
||||
.color-swatches .brand-warning { background-color: #f0ad4e; }
|
||||
.color-swatches .brand-danger { background-color: #d9534f; }
|
||||
.color-swatches .brand-info { background-color: #5bc0de; }
|
||||
.color-swatches .gray-darker {
|
||||
background-color: #222;
|
||||
}
|
||||
.color-swatches .gray-dark {
|
||||
background-color: #333;
|
||||
}
|
||||
.color-swatches .gray {
|
||||
background-color: #555;
|
||||
}
|
||||
.color-swatches .gray-light {
|
||||
background-color: #999;
|
||||
}
|
||||
.color-swatches .gray-lighter {
|
||||
background-color: #eee;
|
||||
}
|
||||
.color-swatches .brand-primary {
|
||||
background-color: #428bca;
|
||||
}
|
||||
.color-swatches .brand-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.color-swatches .brand-warning {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.color-swatches .brand-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.color-swatches .brand-info {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
/* Docs colors */
|
||||
.color-swatches .bs-purple { background-color: #563d7c; }
|
||||
.color-swatches .bs-purple-light { background-color: #c7bfd3; }
|
||||
.color-swatches .bs-purple-lighter { background-color: #e5e1ea; }
|
||||
.color-swatches .bs-gray { background-color: #f9f9f9; }
|
||||
.color-swatches .bs-purple {
|
||||
background-color: #563d7c;
|
||||
}
|
||||
.color-swatches .bs-purple-light {
|
||||
background-color: #c7bfd3;
|
||||
}
|
||||
.color-swatches .bs-purple-lighter {
|
||||
background-color: #e5e1ea;
|
||||
}
|
||||
.color-swatches .bs-gray {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@@ -755,8 +783,8 @@ h1[id] {
|
||||
*/
|
||||
|
||||
.bs-team .team-member {
|
||||
color: #555;
|
||||
line-height: 32px;
|
||||
color: #555;
|
||||
}
|
||||
.bs-team .team-member:hover {
|
||||
color: #333;
|
||||
@@ -764,9 +792,9 @@ h1[id] {
|
||||
}
|
||||
.bs-team .github-btn {
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
width: 180px;
|
||||
height: 20px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.bs-team img {
|
||||
float: left;
|
||||
@@ -808,49 +836,51 @@ h1[id] {
|
||||
padding: 45px 15px 15px;
|
||||
margin: 0 -15px 15px;
|
||||
background-color: #fafafa;
|
||||
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
|
||||
border-color: #e5e5e5 #eee #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
|
||||
}
|
||||
/* Echo out a label for the example */
|
||||
.bs-example:after {
|
||||
content: "Example";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #bbb;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
content: "Example";
|
||||
}
|
||||
|
||||
/* Tweak display of the code snippets when following an example */
|
||||
.bs-example + .highlight {
|
||||
margin: -15px -15px 15px;
|
||||
border-radius: 0;
|
||||
border-width: 0 0 1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Make the examples and snippets not full-width */
|
||||
@media (min-width: 768px) {
|
||||
.bs-example {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
background-color: #fff;
|
||||
border-width: 1px;
|
||||
border-color: #ddd;
|
||||
border-width: 1px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.bs-example + .highlight {
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -962,8 +992,8 @@ h1[id] {
|
||||
.bs-navbar-top-example .navbar-fixed-top,
|
||||
.bs-navbar-bottom-example .navbar-fixed-bottom {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.bs-navbar-top-example {
|
||||
padding-bottom: 45px;
|
||||
@@ -1016,15 +1046,15 @@ h1[id] {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
.bs-example-modal .modal-dialog {
|
||||
left: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Example dropdowns */
|
||||
@@ -1087,9 +1117,9 @@ h1[id] {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.highlight pre code {
|
||||
font-size: inherit;
|
||||
@@ -1100,8 +1130,8 @@ h1[id] {
|
||||
width: 22px;
|
||||
padding-right: 5px;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
color: #bebec5;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@@ -1186,7 +1216,7 @@ h1[id] {
|
||||
*/
|
||||
|
||||
.bs-glyphicons {
|
||||
margin: 0 -19px 20px -16px;
|
||||
margin: 0 -10px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bs-glyphicons-list {
|
||||
@@ -1201,8 +1231,8 @@ h1[id] {
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
border: 1px solid #fff;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
.bs-glyphicons .glyphicon {
|
||||
margin-top: 5px;
|
||||
@@ -1221,8 +1251,8 @@ h1[id] {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bs-glyphicons {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
.bs-glyphicons li {
|
||||
width: 12.5%;
|
||||
@@ -1251,9 +1281,9 @@ h1[id] {
|
||||
color: #555;
|
||||
}
|
||||
.bs-customizer h2 {
|
||||
padding-top: 30px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.bs-customizer h3 {
|
||||
margin-bottom: 0;
|
||||
@@ -1271,8 +1301,8 @@ h1[id] {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.bs-customizer .help-block {
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* For the variables, use regular weight */
|
||||
@@ -1283,8 +1313,8 @@ h1[id] {
|
||||
.bs-customizer-input {
|
||||
float: left;
|
||||
width: 33.333333%;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* Downloads */
|
||||
@@ -1296,14 +1326,15 @@ h1[id] {
|
||||
.bs-customizer-alert {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
padding: 15px 0;
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
|
||||
border-bottom: 1px solid #b94441;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
|
||||
}
|
||||
.bs-customizer-alert .close {
|
||||
margin-top: -4px;
|
||||
@@ -1320,7 +1351,8 @@ h1[id] {
|
||||
color: #fff;
|
||||
background-color: #a83c3a;
|
||||
border-color: #973634;
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
|
||||
@@ -1353,6 +1385,10 @@ h1[id] {
|
||||
color: #fff;
|
||||
background-color: #563d7c;
|
||||
}
|
||||
.bs-brand-item .svg {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
}
|
||||
|
||||
/* Heading content within */
|
||||
.bs-brand-item h1,
|
||||
@@ -1361,8 +1397,8 @@ h1[id] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bs-brand-item .bs-docs-booticon {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Make the icons stand out on what is/isn't okay */
|
||||
@@ -1374,8 +1410,12 @@ h1[id] {
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.bs-brand-item .glyphicon-ok { background-color: #5cb85c; }
|
||||
.bs-brand-item .glyphicon-remove { background-color: #d9534f; }
|
||||
.bs-brand-item .glyphicon-ok {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.bs-brand-item .glyphicon-remove {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bs-brand-item {
|
||||
@@ -1415,6 +1455,6 @@ h1[id] {
|
||||
border-color: rgba(82,168,236,.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
|
||||
box-shadow: 0 0 8px rgba(82,168,236,.6);
|
||||
-webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
|
||||
box-shadow: 0 0 8px rgba(82,168,236,.6);
|
||||
}
|
||||
Vendored
+6
-6
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -13,4 +13,4 @@ var Holder=Holder||{};!function(a,b){function c(a,b,c){b=parseInt(b,10),a=parseI
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
!function(a){a(function(){if(navigator.userAgent.match(/IEMobile\/10\.0/)){var b=document.createElement("style");b.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")),document.querySelector("head").appendChild(b)}{var c=a(window),d=a(document.body);a(".navbar").outerHeight(!0)+10}d.scrollspy({target:".bs-docs-sidebar"}),c.on("load",function(){d.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),a(".tooltip-demo").tooltip({selector:"[data-toggle=tooltip]",container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-navbar").tooltip({selector:"a[data-toggle=tooltip]",container:".bs-docs-navbar .nav"}),a("[data-toggle=popover]").popover(),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)})})}(jQuery);
|
||||
!function(a){a(function(){if(navigator.userAgent.match(/IEMobile\/10\.0/)){var b=document.createElement("style");b.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")),document.querySelector("head").appendChild(b)}{var c=a(window),d=a(document.body);a(".navbar").outerHeight(!0)+10}d.scrollspy({target:".bs-docs-sidebar"}),c.on("load",function(){d.scrollspy("refresh")}),a(".bs-docs-container [href=#]").click(function(a){a.preventDefault()}),setTimeout(function(){var b=a(".bs-docs-sidebar");b.affix({offset:{top:function(){var c=b.offset().top,d=parseInt(b.children(0).css("margin-top"),10),e=a(".bs-docs-nav").height();return this.top=c-e-d},bottom:function(){return this.bottom=a(".bs-docs-footer").outerHeight(!0)}}})},100),setTimeout(function(){a(".bs-top").affix()},100),a(".tooltip-demo").tooltip({selector:"[data-toggle=tooltip]",container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-navbar").tooltip({selector:"a[data-toggle=tooltip]",container:".bs-docs-navbar .nav"}),a(".bs-docs-popover").popover(),a(".bs-docs-popover-dismiss").popover({trigger:"focus"}),a("#loading-example-btn").click(function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)})})}(jQuery);
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
@@ -85,7 +85,12 @@
|
||||
})
|
||||
|
||||
// popover demo
|
||||
$('[data-toggle=popover]').popover()
|
||||
$('.bs-docs-popover').popover()
|
||||
|
||||
// Popover dismiss on next click
|
||||
$('.bs-docs-popover-dismiss').popover({
|
||||
trigger: 'focus'
|
||||
})
|
||||
|
||||
// button state demo
|
||||
$('#loading-example-btn')
|
||||
@@ -45,11 +45,11 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
|
||||
function createGist(configJson) {
|
||||
var data = {
|
||||
'description': 'Bootstrap Customizer Config',
|
||||
description: 'Bootstrap Customizer Config',
|
||||
'public': true,
|
||||
'files': {
|
||||
files: {
|
||||
'config.json': {
|
||||
'content': configJson
|
||||
content: configJson
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -72,9 +72,9 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
var vars = {}
|
||||
|
||||
$('#less-variables-section input')
|
||||
.each(function () {
|
||||
$(this).val() && (vars[$(this).prev().text()] = $(this).val())
|
||||
})
|
||||
.each(function () {
|
||||
$(this).val() && (vars[$(this).prev().text()] = $(this).val())
|
||||
})
|
||||
|
||||
var data = {
|
||||
vars: vars,
|
||||
@@ -238,9 +238,9 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
||||
var vars = {}
|
||||
|
||||
$('#less-variables-section input')
|
||||
.each(function () {
|
||||
$(this).val() && (vars[$(this).prev().text()] = $(this).val())
|
||||
})
|
||||
.each(function () {
|
||||
$(this).val() && (vars[$(this).prev().text()] = $(this).val())
|
||||
})
|
||||
|
||||
var bsLessSource = generateLESS('bootstrap.less', lessFileIncludes, vars)
|
||||
var themeLessSource = generateLESS('theme.less', lessFileIncludes, vars)
|
||||
+3
-2
@@ -8,5 +8,6 @@
|
||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
// Intended to prevent false-positive bug reports about responsive styling supposedly not working in IE8.
|
||||
if (window.location.protocol == 'file:')
|
||||
alert("ERROR: Bootstrap's responsive CSS is disabled!\nSee getbootstrap.com/getting-started/#respond-file-proto for details.")
|
||||
if (window.location.protocol == 'file:') {
|
||||
alert('ERROR: Bootstrap\'s responsive CSS is disabled!\nSee getbootstrap.com/getting-started/#respond-file-proto for details.')
|
||||
}
|
||||
Vendored
+5
-5
File diff suppressed because one or more lines are too long
@@ -0,0 +1,114 @@
|
||||
---
|
||||
layout: default
|
||||
title: Wall of browser bugs
|
||||
slug: browser-bugs
|
||||
lead: "A list of the browser bugs that Bootstrap is currently grappling with."
|
||||
---
|
||||
|
||||
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="browser-bugs" class="page-header">Browser bugs</h1>
|
||||
|
||||
<p class="lead">Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p>
|
||||
<p>We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href="../getting-started/#support">see our browser compatibility docs</a>.</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser(s)</th>
|
||||
<th>Summary of bug</th>
|
||||
<th>Upstream bug(s)</th>
|
||||
<th>Bootstrap issue(s)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td>Allow use of line-height for <code><input></code></td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">Mozilla bug #697451</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/2985">#2985</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td>Unusual default form control styles on Android</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=900871">Closed Mozilla bug #900871</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=763671">Open Mozilla bug #763671</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/8702">#8702</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox</td>
|
||||
<td><code>max-width: 100%;</code> doesn't work inside tables</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975632">Mozilla bug #975632</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/10690">#10690</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Firefox <strong>≤27</strong></td>
|
||||
<td><code>position: relative;</code> doesn't work inside tables</td>
|
||||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=63895">Mozilla bug #63895</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12467">#12467</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>Weird button behavior with some number inputs</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/8350">#8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize #283</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>Navbar rendering problem on Windows after several clicks</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=272750">Chromium issue #272750</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=119793">WebKit bug #119793</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9226">#9226</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td><code>display: table;</code> within <code>display: block;</code> forces sibling content to new line</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=309483">Chromium issue #309483</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9950">#9950</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>Unwanted vertical lines when printing styled <code><select>s</code> on OS X</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=282918">Chromium issue #282918</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/11245">#11245</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>inline-block element collapses white-space on Windows</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=329574">Chromium issue #329574</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/11885">#11885</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td>Incorrect viewport size used for media queries when printing</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=273306">Chromium issue #273306</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12078">#12078</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome & Safari</td>
|
||||
<td>OS X scrollbar clipped in <code>select[multiple]</code> with padding</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=342208">Chromium issue #342208</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12536">#12536</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Chrome</td>
|
||||
<td><code>display: table-cell; width: 100%;</code> doesn't work correctly on date input</td>
|
||||
<td><a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium issue #346051</a></td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/12548">#12548</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>Insufficient CSS percentage precision</td>
|
||||
<td>(No public bug tracker)</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9282">#9282</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>Justified nav rendering bug</td>
|
||||
<td>(No public bug tracker)</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/9774">#9774</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -370,6 +370,11 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||
<h4>Handling borders</h4>
|
||||
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>IE8 and borders</h4>
|
||||
<p>Internet Explorer 8 doesn't render borders in on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
|
||||
<p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
|
||||
</div>
|
||||
|
||||
<h4>With <code><a></code> elements</h4>
|
||||
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
|
||||
@@ -1535,6 +1540,11 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||
<h2 id="navbar-component-alignment">Component alignment</h2>
|
||||
<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>
|
||||
<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Right aligning multiple components</h4>
|
||||
<p>Navbars currently have a limitation with multiple <code>.navbar-right</code> classes. To properly space content, we use negative margin on the last <code>.navbar-right</code> element. When there are multiple elements using that class, these margins don't work as intended.</p>
|
||||
<p>We'll revisit this when we can rewrite that component in v4.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="navbar-fixed-top">Fixed to top</h2>
|
||||
@@ -2280,6 +2290,34 @@ body { padding-bottom: 70px; }
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="progress-low-percentages">Low percentages</h3>
|
||||
<p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p>
|
||||
<div class="bs-example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
0%
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
|
||||
2%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
0%
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
|
||||
2%
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h3 id="progress-alternatives">Contextual alternatives</h3>
|
||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||
<div class="bs-example">
|
||||
@@ -2620,6 +2658,31 @@ body { padding-bottom: 70px; }
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="list-group-disabled">Disabled items</h3>
|
||||
<p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
|
||||
<div class="bs-example">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item disabled">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item disabled">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="list-group-contextual-classes">Contextual classes</h3>
|
||||
@@ -2972,6 +3035,34 @@ body { padding-bottom: 70px; }
|
||||
|
||||
|
||||
|
||||
<!-- Responsive embeds
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="responsive-embed" class="page-header">Responsive embed</h1>
|
||||
|
||||
<p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p>
|
||||
<p>Rules are directly apply to <code><iframe></code>, <code><embed></code> and <code><object></code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
|
||||
<p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code><iframe></code>s as we override that for you.</p>
|
||||
<div class="bs-example">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<!-- 16:9 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="…"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 4:3 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="embed-responsive-item" src="…"></iframe>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Wells
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
|
||||
+132
-17
@@ -79,6 +79,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
||||
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.</li>
|
||||
<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
|
||||
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
|
||||
<li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
|
||||
</ul>
|
||||
<p>Look to the examples for applying these principles to your code.</p>
|
||||
|
||||
@@ -157,9 +158,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
||||
<tr>
|
||||
<th>Column width</th>
|
||||
<td class="text-muted">Auto</td>
|
||||
<td>60px</td>
|
||||
<td>78px</td>
|
||||
<td>95px</td>
|
||||
<td>~62px</td>
|
||||
<td>~81px</td>
|
||||
<td>~97px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Gutter width</th>
|
||||
@@ -180,7 +181,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p>
|
||||
|
||||
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
|
||||
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</p>
|
||||
@@ -718,9 +718,54 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
||||
<h3>Built with Less</h3>
|
||||
<p>The typographic scale is based on two Less variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
|
||||
|
||||
<!-- Inline text elements -->
|
||||
<h2 id="type-inline-text">Inline text elements</h2>
|
||||
<h3>Marked text</h3>
|
||||
<p>For indicating blocks of text that have been deleted use the <code><mark></code> tag.</p>
|
||||
<div class="bs-example">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<mark>This line of text is meant to be treated as deleted text.</mark>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h3>Deleted text</h3>
|
||||
<p>For indicating blocks of text that have been deleted use the <code><del></code> tag.</p>
|
||||
<div class="bs-example">
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<del>This line of text is meant to be treated as deleted text.</del>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Strikethrough text</h3>
|
||||
<p>For indicating blocks of text that are no longer relevant use the <code><s></code> tag.</p>
|
||||
<div class="bs-example">
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<s>This line of text is meant to be treated as no longer accurate.</s>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Inserted text</h3>
|
||||
<p>For indicating additions to the document use the <code><ins></code> tag.</p>
|
||||
<div class="bs-example">
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ins>This line of text is meant to be treated as an addition to the document.</ins>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Underlined text</h3>
|
||||
<p>To underline text use the <code><u></code> tag.</p>
|
||||
<div class="bs-example">
|
||||
<p><u>This line of text is will render as underlined</u></p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<u>This line of text is will render as underlined</u>
|
||||
{% endhighlight %}
|
||||
|
||||
<!-- Emphasis -->
|
||||
<h2 id="type-emphasis">Emphasis</h2>
|
||||
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
|
||||
|
||||
<h3>Small text</h3>
|
||||
@@ -757,7 +802,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
</div>
|
||||
|
||||
<h3>Alignment classes</h3>
|
||||
<h2 id="type-alignment">Alignment classes</h2>
|
||||
<p>Easily realign text to components with text alignment classes.</p>
|
||||
<div class="bs-example">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
@@ -1051,10 +1096,29 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
<p>You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 350px and provide a y-axis scrollbar.</p>
|
||||
<h2 id="code-variables">Variables</h2>
|
||||
<p>For indicating variables use the <code><var></code> tag.</p>
|
||||
<div class="bs-example">
|
||||
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
|
||||
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="code-sample-output">Sample output</h2>
|
||||
<p>For indicating blocks sample output from a program use the <code><samp></code> tag.</p>
|
||||
<div class="bs-example">
|
||||
<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Tables
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
@@ -1585,6 +1649,12 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<label class="sr-only" for="exampleInputEmail2">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">@</div>
|
||||
<input class="form-control" type="email" placeholder="Enter email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="exampleInputPassword2">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
|
||||
@@ -1878,7 +1948,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
|
||||
|
||||
<h2 id="forms-control-disabled">Disabled inputs</h2>
|
||||
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
|
||||
@@ -1947,6 +2017,18 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="forms-control-readonly">Readonly inputs</h2>
|
||||
<p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
{% highlight html %}
|
||||
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="forms-control-validation">Validation states</h2>
|
||||
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
|
||||
|
||||
@@ -1984,8 +2066,8 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<h3>With optional icons</h3>
|
||||
<p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Icons and input groups</h4>
|
||||
<p>When using the feedback icons, be aware that manual positioning may be required for <a href="../components#input-groups">input groups</a> with an add-on on the right. Adjust the <code>right: 0;</code> to an appropriate pixel value depending on the width of your addon.</p>
|
||||
<h4>Icons, labels, and input groups</h4>
|
||||
<p>Manual positioning of feedback icons is required for <a href="../components#input-groups">input groups</a> with an add-on on the right and inputs without a label. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon. For labels, adjust the <code>top</code>value.</p>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
@@ -2535,15 +2617,16 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h3 id="helper-classes-screen-readers">Screen reader content</h3>
|
||||
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
|
||||
<h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
|
||||
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
|
||||
{% highlight html %}
|
||||
<a class="sr-only" href="#content">Skip to main content</a>
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
{% endhighlight %}
|
||||
{% highlight scss %}
|
||||
// Usage as a Mixin
|
||||
.skip-navigation {
|
||||
.sr-only();
|
||||
.sr-only-focusable();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
@@ -2992,6 +3075,7 @@ a {
|
||||
|
||||
<h3 id="less-mixins-box-sizing">Box-sizing</h3>
|
||||
<p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
|
||||
<p>The mixin is <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
|
||||
{% highlight scss %}
|
||||
.box-sizing(@box-model) {
|
||||
-webkit-box-sizing: @box-model; // Safari <= 5
|
||||
@@ -3033,7 +3117,8 @@ a {
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="less-mixins-transitions">Transitions</h3>
|
||||
<p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
|
||||
<p>Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
|
||||
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
|
||||
{% highlight scss %}
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
@@ -3051,6 +3136,10 @@ a {
|
||||
-webkit-transition-duration: @transition-duration;
|
||||
transition-duration: @transition-duration;
|
||||
}
|
||||
.transition-timing-function(@timing-function) {
|
||||
-webkit-transition-timing-function: @timing-function;
|
||||
transition-timing-function: @timing-function;
|
||||
}
|
||||
.transition-transform(@transition) {
|
||||
-webkit-transition: -webkit-transform @transition;
|
||||
-moz-transition: -moz-transform @transition;
|
||||
@@ -3061,6 +3150,7 @@ a {
|
||||
|
||||
<h3 id="less-mixins-transformations">Transformations</h3>
|
||||
<p>Rotate, scale, translate (move), or skew any object.</p>
|
||||
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
|
||||
{% highlight scss %}
|
||||
.rotate(@degrees) {
|
||||
-webkit-transform: rotate(@degrees);
|
||||
@@ -3117,6 +3207,7 @@ a {
|
||||
|
||||
<h3 id="less-mixins-animations">Animations</h3>
|
||||
<p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
|
||||
<p>The mixins are <strong>deprecated</strong> as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.</p>
|
||||
{% highlight scss %}
|
||||
.animation(@animation) {
|
||||
-webkit-animation: @animation;
|
||||
@@ -3163,8 +3254,7 @@ a {
|
||||
<p>Provide context for form controls within each field.</p>
|
||||
{% highlight scss %}
|
||||
.placeholder(@color: @input-color-placeholder) {
|
||||
&:-moz-placeholder { color: @color; } // Firefox 4-18
|
||||
&::-moz-placeholder { color: @color; } // Firefox 19+
|
||||
&::-moz-placeholder { color: @color; } // Firefox
|
||||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
||||
}
|
||||
@@ -3199,7 +3289,7 @@ a {
|
||||
{% endhighlight %}
|
||||
<p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
|
||||
{% highlight scss %}
|
||||
#gradient > .striped(#333; #000; 45deg);
|
||||
#gradient > .striped(#333; 45deg);
|
||||
{% endhighlight %}
|
||||
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
|
||||
{% highlight scss %}
|
||||
@@ -3377,3 +3467,28 @@ a {
|
||||
<a class="btn btn-lg btn-outline" href="{{ site.sass_repo }}">Bootstrap for Sass</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- RTL
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="rtl" class="page-header">RTL</h1>
|
||||
<p class="lead">As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's <a href="https://github.com/twitter/css-flip">CSS Flip project</a> and is generated via our Gruntfile.</p>
|
||||
|
||||
<h2 id="rtl-how-to">How to use</h2>
|
||||
<p>Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:</p>
|
||||
{% highlight html %}
|
||||
<!-- Example: Arabic language with direction set to RTL -->
|
||||
<html lang="ar" dir="rtl">
|
||||
{% endhighlight %}
|
||||
<p>Then, include the right-to-left CSS file in place of the default Bootstrap CSS:</p>
|
||||
{% highlight html %}
|
||||
<!-- Bootstrap RTL -->
|
||||
<link rel="stylesheet" href="bootstrap-rtl.css">
|
||||
{% endhighlight %}
|
||||
<p>Alternatively, you may use the minified RTL file, <code>bootstrap-rtl.min.css</code>.</p>
|
||||
|
||||
<h2 id="rtl-css-flip">CSS Flip</h2>
|
||||
<p><a href="https://github.com/twitter/css-flip">CSS Flip</a> is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.</p>
|
||||
</div>
|
||||
|
||||
@@ -164,6 +164,12 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
|
||||
Panels
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked value="responsive-embed.less">
|
||||
Responsive embed
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" checked value="wells.less">
|
||||
|
||||
Vendored
+7
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -37,7 +37,8 @@ h6, .h6 {
|
||||
|
||||
.blog-masthead {
|
||||
background-color: #428bca;
|
||||
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
|
||||
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
|
||||
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* Nav links */
|
||||
@@ -67,9 +68,9 @@ h6, .h6 {
|
||||
margin-left: -5px;
|
||||
vertical-align: middle;
|
||||
content: " ";
|
||||
border-right: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid;
|
||||
border-left: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
@@ -161,3 +162,6 @@ h6, .h6 {
|
||||
background-color: #f9f9f9;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.blog-footer p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -116,11 +116,11 @@ body {
|
||||
}
|
||||
.navbar-wrapper .container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.navbar-wrapper .navbar {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* The navbar becomes detached from the top, so we round the corners */
|
||||
|
||||
@@ -33,7 +33,8 @@ body {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,.5);
|
||||
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
|
||||
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
|
||||
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
/* Extra markup and styles for table-esque vertical and horizontal centering */
|
||||
@@ -84,6 +85,7 @@ body {
|
||||
.masthead-nav > li > a:hover,
|
||||
.masthead-nav > li > a:focus {
|
||||
background-color: transparent;
|
||||
border-bottom-color: #a9a9a9;
|
||||
border-bottom-color: rgba(255,255,255,.25);
|
||||
}
|
||||
.masthead-nav > .active > a,
|
||||
|
||||
@@ -17,6 +17,13 @@ body {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/*
|
||||
* Top navigation
|
||||
* Hide default border to remove 1px line.
|
||||
*/
|
||||
.navbar-fixed-top {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
|
||||
@@ -34,11 +34,10 @@ body {
|
||||
color: #777;
|
||||
text-align: center;
|
||||
background-color: #e5e5e5; /* Old browsers */
|
||||
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
|
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
|
||||
background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
|
||||
background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
|
||||
background-repeat: repeat-x; /* Repeat the gradient */
|
||||
border-bottom: 1px solid #d5d5d5;
|
||||
@@ -48,7 +47,8 @@ body {
|
||||
.nav-justified > .active > a:focus {
|
||||
background-color: #ddd;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
|
||||
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
|
||||
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
|
||||
}
|
||||
.nav-justified > li:first-child > a {
|
||||
border-radius: 5px 5px 0 0;
|
||||
|
||||
@@ -11,6 +11,11 @@ body {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Don't let the lead text change font-size. */
|
||||
.lead {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Finesse the page header spacing */
|
||||
.page-header {
|
||||
margin-bottom: 30px;
|
||||
|
||||
@@ -21,7 +21,7 @@ footer {
|
||||
.row-offcanvas {
|
||||
position: relative;
|
||||
-webkit-transition: all .25s ease-out;
|
||||
-moz-transition: all .25s ease-out;
|
||||
-o-transition: all .25s ease-out;
|
||||
transition: all .25s ease-out;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,382 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
|
||||
|
||||
<title>RTL Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap RTL CSS -->
|
||||
<link href="../../dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="rtl.css" rel="stylesheet">
|
||||
|
||||
<!-- Just for debugging purposes. Don't actually copy this line! -->
|
||||
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body role="document">
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Bootstrap RTL</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container theme-showcase" role="main">
|
||||
|
||||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||
<div class="jumbotron">
|
||||
<h1>RTL Bootstrap</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a href="#" class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Buttons</h1>
|
||||
</div>
|
||||
<p>
|
||||
<button type="button" class="btn btn-lg btn-default">Default</button>
|
||||
<button type="button" class="btn btn-lg btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-lg btn-success">Success</button>
|
||||
<button type="button" class="btn btn-lg btn-info">Info</button>
|
||||
<button type="button" class="btn btn-lg btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-lg btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-lg btn-link">Link</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-sm btn-default">Default</button>
|
||||
<button type="button" class="btn btn-sm btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-sm btn-success">Success</button>
|
||||
<button type="button" class="btn btn-sm btn-info">Info</button>
|
||||
<button type="button" class="btn btn-sm btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-sm btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-sm btn-link">Link</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-xs btn-default">Default</button>
|
||||
<button type="button" class="btn btn-xs btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-xs btn-success">Success</button>
|
||||
<button type="button" class="btn btn-xs btn-info">Info</button>
|
||||
<button type="button" class="btn btn-xs btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-xs btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-xs btn-link">Link</button>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Thumbnails</h1>
|
||||
</div>
|
||||
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Dropdown menus</h1>
|
||||
</div>
|
||||
<div class="dropdown theme-dropdown clearfix">
|
||||
<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Navbars</h1>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar navbar-inverse">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Project name</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Alerts</h1>
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Progress bars</h1>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
|
||||
<div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
|
||||
<div class="progress-bar progress-bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>List groups</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div><!-- /.col-sm-4 -->
|
||||
<div class="col-sm-4">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div><!-- /.col-sm-4 -->
|
||||
<div class="col-sm-4">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item active">
|
||||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
<a href="#" class="list-group-item">
|
||||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div><!-- /.col-sm-4 -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Panels</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.col-sm-4 -->
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.col-sm-4 -->
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-warning">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.col-sm-4 -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Wells</h1>
|
||||
</div>
|
||||
<div class="well">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
body {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.theme-dropdown .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.theme-showcase > p > .btn {
|
||||
margin: 5px 0;
|
||||
}
|
||||
@@ -71,7 +71,7 @@
|
||||
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<p class="text-muted">Place sticky footer content here.</p>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ body {
|
||||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
#footer {
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
@@ -29,7 +29,7 @@ body > .container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#footer > .container {
|
||||
.footer > .container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<p class="text-muted">Place sticky footer content here.</p>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ body {
|
||||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
#footer {
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
@@ -418,6 +418,7 @@ bootstrap/
|
||||
</table>
|
||||
</div>
|
||||
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
|
||||
<p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="../browser-bugs/">Wall of browser bugs</a>.</p>
|
||||
|
||||
<h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
|
||||
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
|
||||
@@ -450,8 +451,6 @@ bootstrap/
|
||||
<th scope="row"><code>transition</code></th>
|
||||
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><code>placeholder</code></th>
|
||||
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
|
||||
@@ -622,7 +621,7 @@ if (isAndroid) {
|
||||
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link immediately after your opening <code><body></code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
|
||||
{% highlight html %}
|
||||
<body>
|
||||
<a href="#content" class="sr-only">Skip to main content</a>
|
||||
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
|
||||
<div class="container" id="content">
|
||||
The main page content.
|
||||
</div>
|
||||
|
||||
+35
-4
@@ -65,7 +65,7 @@ $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Boot
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="js-events">Events</h3>
|
||||
<p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
|
||||
<p>Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is triggered on the completion of an action.</p>
|
||||
<p>As of 3.0.0, all Bootstrap events are namespaced.</p>
|
||||
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
|
||||
{% highlight js %}
|
||||
@@ -231,13 +231,17 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Make modals accessible</h4>
|
||||
<p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
|
||||
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Embedding YouTube videos</h4>
|
||||
<p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="modals-sizes">Optional sizes</h2>
|
||||
<p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
|
||||
<div class="bs-example">
|
||||
@@ -665,8 +669,16 @@ $('#myDropdown').on('show.bs.dropdown', function () {
|
||||
|
||||
<h2 id="scrollspy-usage">Usage</h2>
|
||||
|
||||
<h3>Requires relative positioning</h3>
|
||||
<p>No matter the implementation method, scrollspy requires the use of <code>position: absolute;</code> on the element you're spying on. In most cases this is the <code><body></code>.</p>
|
||||
|
||||
<h3>Via data attributes</h3>
|
||||
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
|
||||
{% highlight css %}
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% highlight html %}
|
||||
<body data-spy="scroll" data-target=".navbar-example">
|
||||
...
|
||||
@@ -680,7 +692,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Via JavaScript</h3>
|
||||
<p>Call the scrollspy via JavaScript:</p>
|
||||
<p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
|
||||
{% highlight js %}
|
||||
$('body').scrollspy({ target: '.navbar-example' })
|
||||
{% endhighlight %}
|
||||
@@ -1101,6 +1113,8 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Popovers
|
||||
================================================== -->
|
||||
<div class="bs-docs-section">
|
||||
@@ -1167,8 +1181,11 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
|
||||
<h3>Live demo</h3>
|
||||
<div class="bs-example" style="padding-bottom: 24px;">
|
||||
<a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button">Click to toggle popover</a>
|
||||
<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Four directions</h4>
|
||||
<div class="bs-example tooltip-demo">
|
||||
@@ -1204,6 +1221,20 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Dismiss on next click</h4>
|
||||
<p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p>
|
||||
<div class="bs-example" style="padding-bottom: 24px;">
|
||||
<button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
|
||||
{% endhighlight %}
|
||||
{% highlight js %}
|
||||
$('.popover-dismiss').popover({
|
||||
trigger: 'focus'
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
|
||||
@@ -428,6 +428,7 @@ lead: "Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on m
|
||||
<li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
|
||||
<li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior. Also, you should no longer apply <code>.hide</code> to <code>.modal</code> in your markup.</li>
|
||||
<li>As of v3.1.0, the HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal-content</code> (from v3.0.0 to v3.0.3, into the <code>.modal</code>) instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
|
||||
<li>The checkbox and radio features of the button.js plugin now both use <code>data-toggle="buttons"</code> instead of <code>data-toggle="buttons-checkbox"</code> or <code>data-toggle="buttons-radio"</code> in their markup.</li>
|
||||
<li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc.</li>
|
||||
</ul>
|
||||
<p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
layout: nil
|
||||
---
|
||||
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
||||
Sitemap: {{ site.url }}/sitemap.xml
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
layout: nil
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>{{ site.url }}/</loc>
|
||||
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
{% for page in site.html_pages %}
|
||||
{% if page.layout != "home" %}
|
||||
<url>
|
||||
<loc>{{ site.url }}{{ page.url }}</loc>
|
||||
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</urlset>
|
||||
Reference in New Issue
Block a user