mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-02 16:04:07 +03:00
Use https, fix broken links and unneeded redirects.
This commit is contained in:
@@ -1 +1 @@
|
||||
<script async src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<h1 id="glyphicons" class="page-header">Glyphicons</h1>
|
||||
|
||||
<h2 id="glyphicons-glyphs">Available glyphs</h2>
|
||||
<p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
|
||||
<p>Includes over 250 glyphs in font format from the Glyphicon Halflings set. <a href="http://www.glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://www.glyphicons.com/">Glyphicons</a> whenever possible.</p>
|
||||
<div class="bs-glyphicons">
|
||||
<ul class="bs-glyphicons-list">
|
||||
{% for iconClassName in site.data.glyphicons %}
|
||||
@@ -30,7 +30,7 @@
|
||||
<p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
|
||||
<ul>
|
||||
<li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
|
||||
<li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
|
||||
<li>Utilize the <a href="http://lesscss.org/usage/#less-options-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
|
||||
<li>Change the <code>url()</code> paths in the compiled CSS.</li>
|
||||
</ul>
|
||||
<p>Use whatever option best suits your specific development setup.</p>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4 id="callout-progress-csp">Content Security Policy (CSP) compatibility</h4>
|
||||
<p>If your website has a <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets <code>element.style.width</code>) or using custom CSS classes.</p>
|
||||
<p>If your website has a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets <code>element.style.width</code>) or using custom CSS classes.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="progress-basic">Basic example</h2>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<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" data-example-id="responsive-embed-16by9-iframe-youtube">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<h1 id="thumbnails" class="page-header">Thumbnails</h1>
|
||||
|
||||
<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>
|
||||
<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="https://masonry.desandro.com/">Masonry</a>, <a href="https://isotope.metafizzy.co/">Isotope</a>, or <a href="https://salvattore.js.org/">Salvattore</a>.</p>
|
||||
|
||||
<h2 id="thumbnails-default">Default example</h2>
|
||||
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-warning" id="callout-formgroup-inputgroup">
|
||||
<h4>Don't mix form groups with input groups</h4>
|
||||
<p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
|
||||
<p>Do not mix form groups directly with <a href="{{ site.baseurl }}/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -728,7 +728,7 @@
|
||||
<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="{{ 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>
|
||||
<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>
|
||||
|
||||
@@ -161,7 +161,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>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/Web/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) {
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<p>These styles can be found within <code>scaffolding.less</code>.</p>
|
||||
|
||||
<h2 id="overview-normalize">Normalize.css</h2>
|
||||
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
|
||||
<p>For improved cross-browser rendering, we use <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="https://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
|
||||
|
||||
<h2 id="overview-container">Containers</h2>
|
||||
<p>Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to <code>padding</code> and more, neither container is nestable.</p>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<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="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#examples">Examples</a></li>
|
||||
<li><a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/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>
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
<p class="lead">Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
|
||||
|
||||
<h2>Skip navigation</h2>
|
||||
<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 before the navigation (for a simple explanation, see this <a href="http://a11yproject.com/posts/skip-nav-links">A11Y Project article on skip navigation links</a>). Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
|
||||
<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 before the navigation (for a simple explanation, see this <a href="https://a11yproject.com/posts/skip-nav-links/">A11Y Project article on skip navigation links</a>). Using the <code>.sr-only</code> class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).</p>
|
||||
<div class="bs-callout bs-callout-danger" id="callout-skiplinks">
|
||||
<p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://code.google.com/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
|
||||
<p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
|
||||
<p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
|
||||
<p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
|
||||
</div>
|
||||
@@ -21,17 +21,17 @@
|
||||
|
||||
<h2>Nested headings</h2>
|
||||
<p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</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>
|
||||
<p>Learn more at <a href="https://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="{{ 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>
|
||||
<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="https://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>
|
||||
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
|
||||
<li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li>
|
||||
<li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a></li>
|
||||
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
|
||||
<li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a></li>
|
||||
<li><a href="https://a11yproject.com/">The A11Y Project</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
|
||||
<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>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/">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="{{ site.baseurl }}/browser-bugs/">Wall of browser bugs</a>.</p>
|
||||
@@ -119,7 +119,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
|
||||
<p>Visit <a href="https://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
|
||||
|
||||
<h2 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h2>
|
||||
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
|
||||
@@ -143,14 +143,14 @@
|
||||
{% endhighlight %}
|
||||
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
|
||||
<p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
|
||||
<p>See <a href="https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
|
||||
<p>See <a href="https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do">this StackOverflow question</a> for more information.</p>
|
||||
|
||||
<h2 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h2>
|
||||
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
|
||||
{% highlight scss %}
|
||||
@-ms-viewport { width: device-width; }
|
||||
{% endhighlight %}
|
||||
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
|
||||
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
|
||||
{% highlight scss %}
|
||||
@-ms-viewport { width: device-width; }
|
||||
@-o-viewport { width: device-width; }
|
||||
@@ -170,7 +170,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
document.querySelector('head').appendChild(msViewportStyle)
|
||||
}
|
||||
{% endhighlight %}
|
||||
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
|
||||
<p>For more information and usage guidelines, read <a href="https://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
|
||||
<p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
|
||||
|
||||
<h2 id="support-safari-percentages">Safari percent rounding</h2>
|
||||
@@ -228,7 +228,7 @@ $(function () {
|
||||
})
|
||||
</script>
|
||||
{% endhighlight %}
|
||||
<p>Want to see an example? <a href="http://jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
|
||||
<p>Want to see an example? <a href="http://output.jsbin.com/kuvoz/1">Check out this JS Bin demo.</a></p>
|
||||
|
||||
<h2 id="support-validators">Validators</h2>
|
||||
<p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p>
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
|
||||
<p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
|
||||
<ul>
|
||||
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||
<li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/%23bootstrap">##bootstrap channel</a>.</li>
|
||||
<li>For help using Bootstrap, ask on <a href="https://stackoverflow.com/questions/tagged/twitter-bootstrap-3">StackOverflow using the tag <code>twitter-bootstrap-3</code></a>.</li>
|
||||
<li>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/browse/keyword/bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
<li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
|
||||
<li>Developers should use the keyword <code>bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
<li>Find inspiring examples of people building with Bootstrap at the <a href="https://expo.getbootstrap.com/">Bootstrap Expo</a>.</li>
|
||||
</ul>
|
||||
<p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
|
||||
</div>
|
||||
|
||||
@@ -41,23 +41,23 @@
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="download-bower">Install with Bower</h2>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>:</p>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://bower.io/">Bower</a>:</p>
|
||||
{% highlight bash %}bower install bootstrap{% endhighlight %}
|
||||
|
||||
<h2 id="download-npm">Install with npm</h2>
|
||||
<p>You can also install Bootstrap using <a href="https://www.npmjs.com">npm</a>:</p>
|
||||
<p>You can also install Bootstrap using <a href="https://www.npmjs.com/">npm</a>:</p>
|
||||
{% highlight bash %}npm install bootstrap@3{% endhighlight %}
|
||||
<p><code>require('bootstrap')</code> will load all of Bootstrap's jQuery plugins onto the jQuery object. The <code>bootstrap</code> module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the <code>/js/*.js</code> files under the package's top-level directory.</p>
|
||||
<p>Bootstrap's <code>package.json</code> contains some additional metadata under the following keys:</p>
|
||||
<ul>
|
||||
<li><code>less</code> - path to Bootstrap's main <a href="http://lesscss.org">Less</a> source file</li>
|
||||
<li><code>less</code> - path to Bootstrap's main <a href="http://lesscss.org/">Less</a> source file</li>
|
||||
<li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="download-composer">Install with Composer</h2>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://getcomposer.org">Composer</a>:</p>
|
||||
<p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="https://getcomposer.org/">Composer</a>:</p>
|
||||
{% highlight bash %}composer require twbs/bootstrap{% endhighlight %}
|
||||
|
||||
<h2 id="download-autoprefixer">Autoprefixer required for Less/Sass</h2>
|
||||
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <a href="http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm">CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p>
|
||||
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to deal with <a href="https://www.lifewire.com/css-vendor-prefixes-3466867">CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1>
|
||||
|
||||
<p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
|
||||
<p class="lead">Bootstrap uses <a href="https://gruntjs.com/">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
|
||||
|
||||
<h2 id="grunt-installing">Installing Grunt</h2>
|
||||
<p>To install Grunt, you must <strong>first <a href="https://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="https://www.npmjs.com/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
|
||||
@@ -22,13 +22,13 @@
|
||||
<p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>
|
||||
|
||||
<h3><code>grunt test</code> (Run tests)</h3>
|
||||
<p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests in real browsers thanks to <a href="https://karma-runner.github.io/2.0/index.html">Karma</a>.</p>
|
||||
<p>Runs <a href="http://jshint.com/">JSHint</a> and runs the <a href="https://qunitjs.com/">QUnit</a> tests in real browsers thanks to <a href="https://karma-runner.github.io/2.0/index.html">Karma</a>.</p>
|
||||
|
||||
<h3><code>grunt docs</code> (Build & test the docs assets)</h3>
|
||||
<p>Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via <code>bundle exec jekyll serve</code>.</p>
|
||||
|
||||
<h3><code>grunt</code> (Build absolutely everything and run tests)</h3>
|
||||
<p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <a href="http://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
|
||||
<p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires <a href="https://jekyllrb.com/docs/installation/">Jekyll</a>. Usually only necessary if you're hacking on Bootstrap itself.</p>
|
||||
|
||||
<h2 id="grunt-troubleshooting">Troubleshooting</h2>
|
||||
<p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p>
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
<h1 id="tools" class="page-header">Tools</h1>
|
||||
|
||||
<h2 id="tools-bootlint">Bootlint</h2>
|
||||
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
|
||||
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="https://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="jquery-required">
|
||||
<h4>jQuery required</h4>
|
||||
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/master/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="whats-included-precompiled">Precompiled Bootstrap</h2>
|
||||
@@ -35,7 +35,7 @@ bootstrap/
|
||||
{% endhighlight %}
|
||||
<!-- NOTE: This info is intentionally duplicated in the README.
|
||||
Copy any changes made here over to the README too. -->
|
||||
<p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). CSS <a href="https://developer.chrome.com/devtools/docs/css-preprocessors">source maps</a> (<code>bootstrap.*.map</code>) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
|
||||
<p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). CSS <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">source maps</a> (<code>bootstrap.*.map</code>) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
|
||||
|
||||
<h2 id="whats-included-source">Bootstrap source code</h2>
|
||||
<p>The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. More specifically, it includes the following and more:</p>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
@@ -134,7 +134,7 @@
|
||||
<p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
|
||||
{% highlight html %}
|
||||
<div class="dropdown">
|
||||
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown trigger
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
|
||||
@@ -311,7 +311,7 @@ $('#myModal').on('shown.bs.modal', function () {
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="modals-related-target">Varying modal content based on trigger button</h2>
|
||||
<p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
|
||||
<p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
|
||||
<div class="bs-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
|
||||
@@ -439,7 +439,7 @@ $('#exampleModal').on('show.bs.modal', function (event) {
|
||||
<td>path</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p><strong class="text-danger">This option is deprecated since v3.3.0 and has been removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p>
|
||||
<p><strong class="text-danger">This option is deprecated since v3.3.0 and has been removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="https://api.jquery.com/load/">jQuery.load</a> yourself.</p>
|
||||
<p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
|
||||
{% highlight html %}
|
||||
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<div class="bs-callout bs-callout-danger" id="callout-overview-dependencies">
|
||||
<h4>Plugin dependencies</h4>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="{{ site.repo }}/blob/master/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="js-data-attrs">Data attributes</h2>
|
||||
|
||||
@@ -123,7 +123,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
<p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p>
|
||||
<div class="bs-callout bs-callout-danger" id="callout-popover-dismiss-click">
|
||||
<h4>Specific markup required for dismiss-on-next-click</h4>
|
||||
<p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></code> tag, and you also must include the <code>role="button"</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attributes.</p>
|
||||
<p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></code> tag, and you also must include the <code>role="button"</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><code>tabindex</code></a> attributes.</p>
|
||||
</div>
|
||||
<div class="bs-example bs-example-padded-bottom">
|
||||
<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-info" id="callout-scrollspy-invisible-targets">
|
||||
<h4>Non-<code>:visible</code> target elements ignored</h4>
|
||||
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
||||
<p>Target elements that are not <a href="https://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
||||
</div>
|
||||
|
||||
<h3>Requires relative positioning</h3>
|
||||
|
||||
@@ -33,11 +33,11 @@
|
||||
v{{ site.current_version }} <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="http://getbootstrap.com/docs/4.0/">Latest (4.x)</a></li>
|
||||
<li><a href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a></li>
|
||||
<li><a href="https://getbootstrap.com/">Latest (4.x)</a></li>
|
||||
<li><a href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="active"><a href="https://getbootstrap.com/{{ site.current_version }}/">v{{ site.current_version }}</a></li>
|
||||
<li><a href="https://getbootstrap.com/3.3/">v3.3.7</a></li>
|
||||
<li class="active"><a href="https://getbootstrap.com/docs/{{ site.current_version }}/">v{{ site.current_version }}</a></li>
|
||||
<li><a href="https://getbootstrap.com/docs/3.3/">v3.3.7</a></li>
|
||||
<li><a href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -1 +1 @@
|
||||
<a href="http://getbootstrap.com/" class="v4-tease">Looking for Bootstrap 4?</a>
|
||||
<a href="https://getbootstrap.com/" class="v4-tease">Looking for Bootstrap 4?</a>
|
||||
|
||||
Reference in New Issue
Block a user