host: 0.0.0.0
port: 3001
url: http://getbootstrap.com
+baseurl: /docs/3.4
encoding: UTF-8
gems:
- jekyll-sitemap
# Custom vars
-current_version: 3.3.7
+current_version: 3.4.0
repo: https://github.com/twbs/bootstrap
sass_repo: https://github.com/twbs/bootstrap-sass
download:
- source: https://github.com/twbs/bootstrap/archive/v3.3.7.zip
- dist: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
- sass: https://github.com/twbs/bootstrap-sass/archive/v3.3.7.tar.gz
+ source: https://github.com/twbs/bootstrap/archive/v3.4.0.zip
+ dist: https://github.com/twbs/bootstrap/releases/download/v3.4.0/bootstrap-3.4.0-dist.zip
+ sass: https://github.com/twbs/bootstrap-sass/archive/v3.4.0.tar.gz
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
cdn:
# See https://www.srihash.org for info on how to generate the hashes
- css: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
+ css: https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css
css_hash: "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
- css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css
+ css_theme: https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css
css_theme_hash: "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
- js: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
+ js: https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js
js_hash: "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
<p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
<div class="bs-callout bs-callout-info" id="callout-alerts-dismiss-plugin">
<h4>Requires JavaScript alert plugin</h4>
- <p>For fully functioning, dismissible alerts, you must use the <a href="../javascript/#alerts">alerts JavaScript plugin</a>.</p>
+ <p>For fully functioning, dismissible alerts, you must use the <a href="{{ site.baseurl }}/javascript/#alerts">alerts JavaScript plugin</a>.</p>
</div>
<div class="bs-example" data-example-id="dismissible-alert-css">
<div class="alert alert-warning alert-dismissible" role="alert">
<div class="bs-callout bs-callout-danger" id="callout-btndropdown-dependency">
<h4>Plugin dependency</h4>
- <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
+ <p>Button dropdowns require the <a href="{{ site.baseurl }}/javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
</div>
<h2 id="btn-dropdowns-single">Single button dropdowns</h2>
<div class="bs-docs-section">
<h1 id="btn-groups" class="page-header">Button groups</h1>
- <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
+ <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="{{ site.baseurl }}/javascript/#buttons">our buttons plugin</a>.</p>
<div class="bs-callout bs-callout-warning" id="callout-btn-group-tooltips">
<h4>Tooltips & popovers in button groups require special setting</h4>
<div class="bs-docs-section">
<h1 id="dropdowns" class="page-header">Dropdowns</h1>
- <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
+ <p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="{{ site.baseurl }}/javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<h2 id="dropdowns-example">Example</h2>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
<ol type="a">
<li>Reduce the amount or width of navbar items.</li>
- <li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
+ <li>Hide certain navbar items at certain screen sizes using <a href="{{ site.baseurl }}/css/#responsive-utilities">responsive utility classes</a>.</li>
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
</ol>
</div>
<div class="bs-callout bs-callout-danger" id="callout-navbar-js">
<h4>Requires JavaScript plugin</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
- <p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
+ <p>The responsive navbar requires the <a href="{{ site.baseurl }}/javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
</div>
<div class="bs-callout bs-callout-info" id="callout-navbar-breakpoint">
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<div class="bs-callout bs-callout-warning" id="callout-navbar-mobile-caveats">
<h4>Mobile device caveats</h4>
- <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
+ <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="{{ site.baseurl }}/getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-navbar-form-labels">
<div class="bs-callout bs-callout-warning" id="callout-navbar-btn-context">
<h4>Context-specific usage</h4>
- <p>Like the standard <a href="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p>
+ <p>Like the standard <a href="{{ site.baseurl }}/css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p>
</div>
<h2 id="navbar-text">Text</h2>
<div class="bs-callout bs-callout-info" id="callout-navs-tabs-plugin">
<h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
- <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
+ <p>For tabs with tabbable areas, you must use the <a href="{{ site.baseurl }}/javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="{{ site.baseurl }}/javascript/#tabs-usage">example markup</a> for further details.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-navs-accessibility">
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<div class="bs-callout bs-callout-warning" id="callout-navs-justified-safari">
<h4>Safari and responsive justified navs</h4>
- <p>As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
+ <p>As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="{{ site.baseurl }}/examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example" data-example-id="simple-nav-justified">
<ul class="nav nav-tabs nav-justified">
<h2 id="nav-dropdowns">Using dropdowns</h2>
- <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
+ <p>Add dropdown menus with a little extra HTML and the <a href="{{ site.baseurl }}/javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-example" data-example-id="nav-tabs-with-dropdown">
<div class="bs-docs-section">
<h1 id="thumbnails" class="page-header">Thumbnails</h1>
- <p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
+ <p class="lead">Extend Bootstrap's <a href="{{ site.baseurl }}/css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p>
<h2 id="thumbnails-default">Default example</h2>
{% endhighlight %}
<div class="bs-callout bs-callout-info" id="callout-xref-input-group">
<h4>Input groups</h4>
- <p>To add integrated text or buttons before and/or after any text-based <code><input></code>, <a href="../components/#input-groups">check out the input group component</a>.</p>
+ <p>To add integrated text or buttons before and/or after any text-based <code><input></code>, <a href="{{ site.baseurl }}/components/#input-groups">check out the input group component</a>.</p>
</div>
<h3>Textarea</h3>
<div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility">
<h4>Conveying validation state to assistive technologies and colorblind users</h4>
<p>Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.</p>
- <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), include a <a href="
../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
+ <p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), include a <a href="
{{ site.baseurl }}/components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="{{ site.baseurl }}/components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
</div>
<div class="bs-example" data-example-id="form-validation-states">
<p><strong class="text-danger">Feedback icons only work with textual <code><input class="form-control"></code> elements.</strong></p>
<div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-positioning">
<h4>Icons, labels, and input groups</h4>
- <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
+ <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="{{ site.baseurl }}/components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>.sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
</div>
<div class="bs-callout bs-callout-warning" id="callout-has-feedback-icon-accessibility">
<h4>Conveying the icon's meaning to assistive technologies</h4>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
{% endhighlight %}
- <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="../examples/grid/">the grid example</a>.</p>
+ <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="{{ site.baseurl }}/examples/grid/">the grid example</a>.</p>
{% highlight html %}
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<h3 id="helper-classes-carets">Carets</h3>
- <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
+ <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="{{ site.baseurl }}/components/#btn-dropdowns-dropup">dropup menus</a>.</p>
<div class="bs-example" data-example-id="caret">
<span class="caret"></span>
</div>
<div class="bs-callout bs-callout-warning" id="callout-helper-pull-navbar">
<h4>Not for use in navbars</h4>
- <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
+ <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="{{ site.baseurl }}/components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
</div>
<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>
+ <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="{{ site.baseurl }}/getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
{% highlight html %}
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{% endhighlight %}
<h2 id="images-responsive">Responsive images</h2>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code>, <code>height: auto;</code> and <code>display: block;</code> to the image so that it scales nicely to the parent element.</p>
- <p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="../css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
+ <p>To center images which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="{{ site.baseurl }}/css/#helper-classes-center">See the helper classes section</a> for more details about <code>.center-block</code> usage.</p>
<div class="bs-callout bs-callout-warning" id="callout-images-ie-svg">
<h4>SVG images and IE 8-10</h4>
<p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
<h2 id="less-bootstrap">Compiling Bootstrap</h2>
- <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
+ <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="{{ site.baseurl }}/getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
<p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
<h2 id="less-variables">Variables</h2>
- <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
+ <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ site.baseurl }}/customize/#less-variables-section">the Customizer</a>.</p>
<h3 id="less-variables-colors">Colors</h3>
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
<ul class="bs-docs-footer-links">
<li><a href="{{ site.repo }}">GitHub</a></li>
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
- <li><a href="../getting-started/#examples">Examples</a></li>
- <li><a href="../about/">About</a></li>
+ <li><a href="{{ site.baseurl }}/getting-started/#examples">Examples</a></li>
+ <li><a href="{{ site.baseurl }}/about/">About</a></li>
</ul>
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
<h2>Color contrast</h2>
- <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="
../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="../css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
+ <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="
{{ site.baseurl }}/css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="{{ site.baseurl }}/css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="{{ site.baseurl }}/css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p>
<h2>Additional resources</h2>
<ul>
</div>
<p>On Windows, <strong>we support Internet Explorer 8-11</strong>.</p>
-
+
<p>For Firefox, in addition to the latest normal stable release, we also support the latest <a href="https://www.mozilla.org/en-US/firefox/organizations/faq/">Extended Support Release (ESR)</a> version of Firefox.</p>
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, 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>
+ <p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="{ site.baseurl }}/browser-bugs/">Wall of browser bugs</a>.</p>
<h2 id="support-ie8-ie9">Internet Explorer 8 and 9</h2>
<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>
<h1 id="disable-responsive" class="page-header">Disabling responsiveness</h1>
<p class="lead">Bootstrap automatically adapts your pages for various screen sizes.
- Here's how to disable this feature so your page works like <a href="../examples/non-responsive/">this non-responsive example</a>.</p>
+ Here's how to disable this feature so your page works like <a href="{{ site.baseurl }}/examples/non-responsive/">this non-responsive example</a>.</p>
<h2>Steps to disable page responsiveness</h2>
<ol>
- <li>Omit the viewport <code><meta></code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
+ <li>Omit the viewport <code><meta></code> mentioned in <a href="{{ site.baseurl }}/css/#overview-mobile">the CSS docs</a></li>
<li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
<li>If using navbars, remove all navbar collapsing and expanding behavior.</li>
<li>For grid layouts, use <code>.col-xs-*</code> classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.</li>
<h2>Bootstrap template with responsiveness disabled</h2>
<p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
<p>
- <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
+ <a href="{{ site.baseurl }}/examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
</p>
</div>
<img src="../examples/screenshots/justified-nav.jpg" alt="Justified nav example">
</a>
<h3>Justified nav</h3>
- <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p>
+ <p>Create a custom navbar with justified links. Heads up! <a href="{{ site.baseurl }}/components/#nav-justified">Not too Safari friendly.</a></p>
</div>
<div class="clearfix visible-xs"></div>
<!-- Bootstrap core CSS -->
{% if site.github %}
-<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+ <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
{% else %}
-<link href="../dist/css/bootstrap.css" rel="stylesheet">
+ <link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
{% endif %}
+
{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
<!-- Optional Bootstrap Theme -->
-{% if site.github %}
- <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
-{% else %}
- <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
-{% endif %}
+ {% if site.github %}
+ <link href="data:text/css;charset=utf-8," data-href="{{ site.baseurl }}/dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+ {% else %}
+ <link href="data:text/css;charset=utf-8," data-href="{{ site.baseurl }}/dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
+ {% endif %}
{% endif %}
<!-- Documentation extras -->
{% if site.github %}
-<link href="../assets/css/docs.min.css" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
{% else %}
-<link href="../assets/css/docs.css" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/docs.css" rel="stylesheet">
{% endif %}
-<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
-<script src="../assets/js/ie-emulation-modes-warning.js"></script>
+<!--[if lt IE 9]><script src="{{ site.baseurl }}/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<![endif]-->
<!-- Favicons -->
-<link rel="apple-touch-icon" href="/apple-touch-icon.png">
-<link rel="icon" href="/favicon.ico">
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
+<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
</div>
<div class="bs-callout bs-callout-warning" id="callout-modal-mobile-caveats">
<h4>Mobile device caveats</h4>
- <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
+ <p>There are some caveats regarding using modals on mobile devices. <a href="{{ site.baseurl }}/getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
</div>
<p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong> To achieve the same effect, use some custom JavaScript:</p>
<div class="bs-callout bs-callout-warning" id="callout-scrollspy-needs-nav">
<h4>Requires Bootstrap nav</h4>
- <p>Scrollspy currently requires the use of a <a href="../components/#nav">Bootstrap nav component</a> for proper highlighting of active links.</p>
+ <p>Scrollspy currently requires the use of a <a href="{{ site.baseurl }}/components/#nav">Bootstrap nav component</a> for proper highlighting of active links.</p>
</div>
<div class="bs-callout bs-callout-danger" id="callout-scrollspy-target-ids">
<h4>Resolvable ID targets required</h4>
<div class="bs-callout bs-callout-info" id="callout-tabs-extends-component">
<h4>Extends tabbed navigation</h4>
- <p>This plugin extends the <a href="../components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
+ <p>This plugin extends the <a href="{{ site.baseurl }}/components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
</div>
{% endhighlight %}
<h3>Markup</h3>
- <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
+ <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="{{ site.baseurl }}/components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="{{ site.baseurl }}/components/#nav-pills">pill styling</a>.</p>
{% highlight html %}
<div>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a href="../" class="navbar-brand">Bootstrap</a>
+ <a href="{{ site.baseurl }}/" class="navbar-brand">Bootstrap</a>
</div>
<nav id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}>
- <a href="../getting-started/">Getting started</a>
+ <a href="{{ site.baseurl }}/getting-started/">Getting started</a>
</li>
<li{% if page.slug == "css" %} class="active"{% endif %}>
- <a href="../css/">CSS</a>
+ <a href="{{ site.baseurl }}/css/">CSS</a>
</li>
<li{% if page.slug == "components" %} class="active"{% endif %}>
- <a href="../components/">Components</a>
+ <a href="{{ site.baseurl }}/components/">Components</a>
</li>
<li{% if page.slug == "js" %} class="active"{% endif %}>
- <a href="../javascript/">JavaScript</a>
+ <a href="{{ site.baseurl }}/javascript/">JavaScript</a>
</li>
<li{% if page.slug == "customize" %} class="active"{% endif %}>
- <a href="../customize/">Customize</a>
+ <a href="{{ site.baseurl }}/customize/">Customize</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<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>
+ <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="{{ site.baseurl }}/getting-started/#support">see our browser compatibility docs</a>.</p>
<p>See also:</p>
<ul>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=536263">Chromium issue 536263: [meta] Issues affecting Bootstrap</a></li>
layout: default
title: Customize and download
slug: customize
-lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version. Requires using IE9+ or latest Safari, Chrome, or Firefox.
+lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version. Requires IE9+ or latest Safari, Chrome, or Firefox.
---
<button class="btn btn-default toggle" type="button">Toggle all</button>
<h1 id="less" class="page-header">Less files</h1>
- <p class="lead">Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
+ <p class="lead">Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="{{ site.baseurl }}/css/">CSS</a> and <a href="{{ site.baseurl }}/components/">Components</a> pages in the docs.</p>
<div class="row">
<div class="col-xs-6 col-sm-4">
<button class="btn btn-default toggle" type="button">Toggle all</button>
<h1 id="plugins" class="page-header">jQuery plugins</h1>
- <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
+ <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="{{ site.baseurl }}/javascript/">JavaScript</a> page in the docs.</p>
<div class="row">
<div class="col-lg-6">
<h4>Linked to components</h4>
<!-- Cross link to new migration page -->
<div class="bs-callout bs-callout-info" id="migration">
<h4>Migrating from v2.x to v3.x</h4>
- <p>Looking to migrate from an older version of Bootstrap to v3.x? Check out <a href="../migration">our migration guide</a>.</p>
+ <p>Looking to migrate from an older version of Bootstrap to v3.x? Check out <a href="{{ site.baseurl }}/migration">our migration guide</a>.</p>
</div>
{% include getting-started/browser-device-support.html %}
<div class="col-sm-4">
<img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
<h3>Preprocessors</h3>
- <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href="../css/#less">Less</a> and <a href="../css/#sass">Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
+ <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href="{{ site.baseurl }}/css/#less">Less</a> and <a href="{{ site.baseurl }}/css/#sass">Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="col-sm-4">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
<div class="bs-docs-featurette">
<div class="container">
<h2 class="bs-docs-featurette-title">Built with Bootstrap</h2>
- <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
+ <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="{{ site.baseurl }}/getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
<hr class="half-rule">
<tr>
<td>Fixed-width input sizes</td>
<td><code>.input-mini</code> <code>.input-small</code> <code>.input-medium</code> <code>.input-large</code> <code>.input-xlarge</code> <code>.input-xxlarge</code></td>
- <td>Use <a href="../css/#forms-controls"><code>.form-control</code></a> and <a href="../css/#grid">the grid system</a> instead.</td>
+ <td>Use <a href="{{ site.baseurl }}/css/#forms-controls"><code>.form-control</code></a> and <a href="{{ site.baseurl }}/css/#grid">the grid system</a> instead.</td>
</tr>
<tr>
<td>Block level form input</td>
<td><code>.input-block-level</code></td>
- <td>No direct equivalent, but <a href="../css/#forms-controls">forms controls</a> are similar.</td>
+ <td>No direct equivalent, but <a href="{{ site.baseurl }}/css/#forms-controls">forms controls</a> are similar.</td>
</tr>
<tr>
<td>Inverse buttons</td>
<tr>
<td>Nav lists</td>
<td><code>.nav-list</code> <code>.nav-header</code></td>
- <td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
+ <td>No direct equivalent, but <a href="{{ site.baseurl }}/components/#list-group">list groups</a> and <a href="{{ site.baseurl }}/javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
</tr>
<tr>
<td>Inline help for form controls</td>
projects / thirdparty / bootstrap.git / commitdiff
