mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00
Code Activity

v4 beta 3 docs

Browse Source
This commit is contained in:
Mark Otto
2017-12-28 09:55:44 -08:00
parent ed05e78a9b
commit b01323ae05
150 changed files with 12613 additions and 25343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/getting-started/accessibility/index.html
+92 -314
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Accessibility &middot; Bootstrap</title>
<title>Accessibility · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Accessibility">
<meta name="twitter:description" content="A brief overview of Bootstrap's features and limitations for the creation of accessible content.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Accessibility">
<meta name="twitter:description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/accessibility/">
<meta property="og:title" content="Accessibility">
<meta property="og:description" content="A brief overview of Bootstrap's features and limitations for the creation of accessible content.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/accessibility/">
<meta property="og:title" content="Accessibility">
<meta property="og:description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -597,7 +391,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Accessibility</h1>
<p class="bd-lead">A brief overview of Bootstrap's features and limitations for the creation of accessible content.</p>
<p class="bd-lead">A brief overview of Bootstrap’s features and limitations for the creation of accessible content.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.</p>
@@ -651,20 +445,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -684,10 +465,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/best-practices/index.html
+92 -314
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Best practices &middot; Bootstrap</title>
<title>Best practices · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Best practices">
<meta name="twitter:description" content="Learn about some of the best practices we've gathered from years of working on and using Bootstrap.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Best practices">
<meta name="twitter:description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/best-practices/">
<meta property="og:title" content="Best practices">
<meta property="og:description" content="Learn about some of the best practices we've gathered from years of working on and using Bootstrap.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/best-practices/">
<meta property="og:title" content="Best practices">
<meta property="og:description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -583,7 +377,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Best practices</h1>
<p class="bd-lead">Learn about some of the best practices we've gathered from years of working on and using Bootstrap.</p>
<p class="bd-lead">Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>We’ve designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we’ve gathered from years of working on and using it ourselves.</p>
@@ -609,20 +403,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -642,10 +423,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/browsers-devices/index.html
+95 -317
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Browsers and devices &middot; Bootstrap</title>
<title>Browsers and devices · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Browsers and devices">
<meta name="twitter:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Browsers and devices">
<meta name="twitter:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/">
<meta property="og:title" content="Browsers and devices">
<meta property="og:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/">
<meta property="og:title" content="Browsers and devices">
<meta property="og:description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -624,7 +418,7 @@
<p>Generally speaking, Bootstrap supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not supported.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td></td>
@@ -642,7 +436,7 @@
<td class="text-success">Supported</td>
<td class="text-muted">N/A</td>
<td class="text-success">Android v5.0+ supported</td>
<td class="text-muted">N/A</td>
<td class="text-success">Supported</td>
</tr>
<tr>
<th scope="row">iOS</th>
@@ -650,7 +444,7 @@
<td class="text-success">Supported</td>
<td class="text-success">Supported</td>
<td class="text-muted">N/A</td>
<td class="text-muted">N/A</td>
<td class="text-success">Supported</td>
</tr>
<tr>
<th scope="row">Windows 10 Mobile</th>
@@ -667,7 +461,7 @@
<p>Similarly, the latest versions of most desktop browsers are supported.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td></td>
@@ -784,20 +578,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -817,10 +598,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/build-tools/index.html
+96 -318
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Build tools &middot; Bootstrap</title>
<title>Build tools · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Build tools">
<meta name="twitter:description" content="Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Build tools">
<meta name="twitter:description" content="Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/build-tools/">
<meta property="og:title" content="Build tools">
<meta property="og:description" content="Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/build-tools/">
<meta property="og:title" content="Build tools">
<meta property="og:description" content="Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -593,18 +387,18 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Build tools</h1>
<p class="bd-lead">Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more.</p>
<p class="bd-lead">Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="tooling-setup">Tooling setup</h2>
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts">NPM scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts">NPM scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
<p>To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:</p>
<ol>
<li><a href="https://nodejs.org/download/">Download and install Node.js</a>, which we use to manage our dependencies.</li>
<li>Navigate to the root <code class="highlighter-rouge">/bootstrap</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/package.json">package.json</a>.</li>
<li>Navigate to the root <code class="highlighter-rouge">/bootstrap</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">package.json</a>.</li>
<li><a href="https://www.ruby-lang.org/en/documentation/installation/">Install Ruby</a>, install <a href="https://bundler.io/">Bundler</a> with <code class="highlighter-rouge">gem install bundler</code>, and finally run <code class="highlighter-rouge">bundle install</code>. This will install all Ruby dependencies, such as Jekyll and plugins.
<ul>
<li><strong>Windows users:</strong> Read <a href="https://jekyllrb.com/docs/windows/">this guide</a> to get Jekyll up and running without problems.</li>
@@ -616,7 +410,7 @@
<h2 id="using-npm-scripts">Using NPM scripts</h2>
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/package.json">package.json</a> includes the following commands and tasks:</p>
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">package.json</a> includes the following commands and tasks:</p>
<table>
<thead>
@@ -647,7 +441,7 @@
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.</p>
<p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/package.json">/package.json</a> for details.</p>
<p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">/package.json</a> for details.</p>
<h2 id="local-documentation">Local documentation</h2>
@@ -673,20 +467,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -706,10 +487,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/contents/index.html
+154 -344
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Contents &middot; Bootstrap</title>
<title>Contents · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Contents">
<meta name="twitter:description" content="Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Contents">
<meta name="twitter:description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/contents/">
<meta property="og:title" content="Contents">
<meta property="og:description" content="Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/contents/">
<meta property="og:title" content="Contents">
<meta property="og:description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -582,11 +376,9 @@
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a>
<ul>
<li class="toc-entry toc-h3"><a href="#comparison-of-css-files">Comparison of CSS files</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#precompiled-bootstrap">Precompiled Bootstrap</a></li>
<li class="toc-entry toc-h2"><a href="#css-files">CSS files</a></li>
<li class="toc-entry toc-h2"><a href="#js-files">JS files</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-source-code">Bootstrap source code</a></li>
</ul>
</div>
@@ -594,7 +386,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Contents</h1>
<p class="bd-lead">Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.</p>
<p class="bd-lead">Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>
@@ -623,50 +415,84 @@
├── bootstrap.js
└── bootstrap.min.js</code></pre></figure>
<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 class="highlighter-rouge">bootstrap.*</code>), as well as compiled and minified CSS and JS (<code class="highlighter-rouge">bootstrap.min.*</code>). CSS <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">source maps</a> (<code class="highlighter-rouge">bootstrap.*.map</code>) are available for use with certain browsers’ developer tools.</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 class="highlighter-rouge">bootstrap.*</code>), as well as compiled and minified CSS and JS (<code class="highlighter-rouge">bootstrap.min.*</code>). CSS <a href="https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps">source maps</a> (<code class="highlighter-rouge">bootstrap.*.map</code>) are available for use with certain browsers’ developer tools. Bundled JS files (<code class="highlighter-rouge">bootstrap.bundle.js</code> and minified <code class="highlighter-rouge">bootstrap.bundle.min.js</code>) include <a href="https://popper.js.org/">Popper</a>, but not <a href="https://jquery.com/">jQuery</a>.</p>
<h3 id="comparison-of-css-files">Comparison of CSS files</h3>
<h2 id="css-files">CSS files</h2>
<table class="table table-bordered table-responsive">
<p>Bootstrap includes a handful of options for including some or all of our compiled CSS.</p>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">CSS files</th>
<th scope="col" class="text-center">Layout</th>
<th scope="col" class="text-center">Content</th>
<th scope="col" class="text-center">Components</th>
<th scope="col" class="text-center">Utilities</th>
<th scope="col">Layout</th>
<th scope="col">Content</th>
<th scope="col">Components</th>
<th scope="col">Utilities</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div><code class="text-nowrap">bootstrap.css</code></div>
<div><code class="text-nowrap">bootstrap.min.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.min.css</code></div>
</th>
<td class="table-success text-center align-middle">All</td>
<td class="table-success text-center align-middle">All</td>
<td class="table-success text-center align-middle">All</td>
<td class="table-success text-center align-middle">All</td>
<td class="text-success">Included</td>
<td class="text-success">Included</td>
<td class="text-success">Included</td>
<td class="text-success">Included</td>
</tr>
<tr>
<th scope="row">
<div><code class="text-nowrap">bootstrap-grid.css</code></div>
<div><code class="text-nowrap">bootstrap-grid.min.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
</th>
<td class="table-warning text-center align-middle">Only <a href="/docs/4.0/layout/grid/">grid</a> system</td>
<td class="table-danger text-center align-middle">No</td>
<td class="table-danger text-center align-middle">No</td>
<td class="table-warning text-center align-middle">Only <a href="/docs/4.0/utilities/flex/">flex</a> utilities</td>
<td><a class="text-warning" href="/docs/4.0/layout/grid/">Only grid system</a></td>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
<td><a class="text-warning" href="/docs/4.0/utilities/flex/">Only flex utilities</a></td>
</tr>
<tr>
<th scope="row">
<div><code class="text-nowrap">bootstrap-reboot.css</code></div>
<div><code class="text-nowrap">bootstrap-reboot.min.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.css</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
</th>
<td class="table-danger text-center align-middle">No</td>
<td class="table-warning text-center align-middle">Only <a href="/docs/4.0/content/reboot/">Reboot</a></td>
<td class="table-danger text-center align-middle">No</td>
<td class="table-danger text-center align-middle">No</td>
<td class="bg-light text-muted">Not included</td>
<td><a class="text-warning" href="/docs/4.0/content/reboot/">Only Reboot</a></td>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
</tbody>
</table>
<h2 id="js-files">JS files</h2>
<p>Similarly, we have options for including some or all of our compiled JavaScript.</p>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">JS files</th>
<th scope="col">Popper</th>
<th scope="col">jQuery</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.js</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
</th>
<td class="text-success">Included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
<tr>
<th scope="row">
<div><code class="font-weight-normal text-nowrap">bootstrap.js</code></div>
<div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
</th>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
</tr>
</tbody>
</table>
@@ -693,20 +519,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -726,10 +539,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/download/index.html
+104 -326
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Download &middot; Bootstrap</title>
<title>Download · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Download">
<meta name="twitter:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Download">
<meta name="twitter:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/download/">
<meta property="og:title" content="Download">
<meta property="og:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/download/">
<meta property="og:title" content="Download">
<meta property="og:description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -584,7 +378,7 @@
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#compiled-css-and-js">Compiled CSS and JS</a></li>
<li class="toc-entry toc-h2"><a href="#source-files">Source files</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrap-cdn">Bootstrap CDN</a></li>
<li class="toc-entry toc-h2"><a href="#bootstrapcdn">BootstrapCDN</a></li>
<li class="toc-entry toc-h2"><a href="#package-managers">Package managers</a>
<ul>
<li class="toc-entry toc-h3"><a href="#npm">npm</a></li>
@@ -604,7 +398,7 @@
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.0.0-beta.2</strong> to easily drop into your project, which includes:</p>
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.0.0-beta.3</strong> to easily drop into your project, which includes:</p>
<ul>
<li>Compiled and minified CSS bundles (see <a href="/docs/4.0/getting-started/contents/#comparison-of-css-files">CSS files comparison</a>)</li>
@@ -613,7 +407,7 @@
<p>This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).</p>
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta.2/bootstrap-4.0.0-beta.2-dist.zip" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta.3/bootstrap-4.0.0-beta.3-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
<h2 id="source-files">Source files</h2>
@@ -626,19 +420,19 @@
<p>Should you require <a href="/docs/4.0/getting-started/build-tools/#tooling-setup">build tools</a>, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.</p>
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
<h2 id="bootstrap-cdn">Bootstrap CDN</h2>
<h2 id="bootstrapcdn">BootstrapCDN</h2>
<p>Skip the download with the Bootstrap CDN to deliver cached version of Bootstrap’s compiled CSS and JS to your project.</p>
<p>Skip the download with <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a> to deliver cached version of Bootstrap’s compiled CSS and JS to your project.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
<p>If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
<h2 id="package-managers">Package managers</h2>
@@ -648,7 +442,7 @@
<p>Install Bootstrap in your Node.js powered apps with <a href="https://www.npmjs.com/package/bootstrap">the npm package</a>:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm install bootstrap@4.0.0-beta.2</code></pre></figure>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm install bootstrap@4.0.0-beta.3</code></pre></figure>
<p><code class="highlighter-rouge">require('bootstrap')</code> will load all of Bootstrap’s jQuery plugins onto the jQuery object. The <code class="highlighter-rouge">bootstrap</code> module itself does not export anything. You can manually load Bootstrap’s jQuery plugins individually by loading the <code class="highlighter-rouge">/js/*.js</code> files under the package’s top-level directory.</p>
@@ -663,11 +457,11 @@
<p>Install Bootstrap in your Ruby apps using <a href="https://bundler.io/">Bundler</a> (<strong>recommended</strong>) and <a href="https://rubygems.org/">RubyGems</a> by adding the following line to your <a href="https://bundler.io/gemfile.html"><code class="highlighter-rouge">Gemfile</code></a>:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~&gt; 4.0.0.beta2'</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~&gt; 4.0.0.beta3'</span></code></pre></figure>
<p>Alternatively, if you’re not using Bundler, you can install the gem by running this command:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem install bootstrap <span class="nt">-v</span> 4.0.0.beta2</code></pre></figure>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem install bootstrap <span class="nt">-v</span> 4.0.0.beta3</code></pre></figure>
<p><a href="https://github.com/twbs/bootstrap-rubygem/blob/master/README.md">See the gem’s README</a> for further details.</p>
@@ -675,7 +469,7 @@
<p>You can also install and manage Bootstrap’s Sass and JavaScript using <a href="https://getcomposer.org/">Composer</a>:</p>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.0.0-beta.2</code></pre></figure>
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.0.0-beta.3</code></pre></figure>
<h3 id="nuget">NuGet</h3>
@@ -694,20 +488,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -727,10 +508,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/index.html
+3 -2
View File
@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap - Content moved</title>
<title>Bootstrap · Content moved</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta name="robots" content="noindex">
<style>
html {
display: flex;
@@ -30,7 +31,7 @@
</style>
</head>
<body>
<h1>Redirecting…</h1>
<h1>Redirecting&hellip;</h1>
<a href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">Click here if you are not redirected</a>
<script>window.location="https://getbootstrap.com/docs/4.0/getting-started/introduction/";</script>
</body>
docs/4.0/getting-started/introduction/index.html
+102 -323
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Introduction &middot; Bootstrap</title>
<title>Introduction · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -604,18 +398,18 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Introduction</h1>
<p class="bd-lead">Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.</p>
<p class="bd-lead">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="quick-start">Quick start</h2>
<p>Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? <a href="/docs/4.0/getting-started/download/">Head to the downloads page.</a></p>
<p>Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? <a href="/docs/4.0/getting-started/download/">Head to the downloads page.</a></p>
<h3 id="css">CSS</h3>
<p>Copy-paste the stylesheet <code class="highlighter-rouge">&lt;link&gt;</code> into your <code class="highlighter-rouge">&lt;head&gt;</code> before all other stylesheets to load our CSS.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span></code></pre></figure>
<h3 id="js">JS</h3>
@@ -624,8 +418,8 @@
<p>We use <a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery’s slim build</a>, but the full version is also supported.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
<p>Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.</p>
@@ -653,13 +447,14 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!doctype html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello, world!<span class="nt">&lt;/title&gt;</span>
<span class="c">&lt;!-- Required meta tags --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Bootstrap CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello, world!<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;h1&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
@@ -667,8 +462,8 @@
<span class="c">&lt;!-- Optional JavaScript --&gt;</span>
<span class="c">&lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre></figure>
@@ -701,7 +496,7 @@
<p>On the rare occasion you need to override it, use something like the following:</p>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.selector-for-some-widget</span> <span class="p">{</span>
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.selector-for-some-widget</span> <span class="p">{</span>
<span class="nl">box-sizing</span><span class="p">:</span> <span class="n">content-box</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
@@ -735,20 +530,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -768,10 +550,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/javascript/index.html
+96 -322
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>JavaScript &middot; Bootstrap</title>
<title>JavaScript · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript">
<meta name="twitter:description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="JavaScript">
<meta name="twitter:description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/javascript/">
<meta property="og:title" content="JavaScript">
<meta property="og:description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/javascript/">
<meta property="og:title" content="JavaScript">
<meta property="og:description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -594,11 +388,7 @@
</li>
<li class="toc-entry toc-h2"><a href="#no-conflict">No conflict</a></li>
<li class="toc-entry toc-h2"><a href="#version-numbers">Version numbers</a></li>
<li class="toc-entry toc-h2"><a href="#no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</a>
<ul>
<li class="toc-entry toc-h4"><a href="#third-party-libraries">Third-party libraries</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</a></li>
<li class="toc-entry toc-h2"><a href="#util">Util</a></li>
</ul>
</div>
@@ -615,7 +405,7 @@
<h2 id="dependencies">Dependencies</h2>
<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 <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/package.json">Consult our <code class="highlighter-rouge">package.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 <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">Consult our <code class="highlighter-rouge">package.json</code></a> to see which versions of jQuery are supported.</p>
<p>Our dropdowns, popovers and tooltips also depend on <a href="https://popper.js.org/">Popper.js</a>.</p>
@@ -691,21 +481,21 @@
<p>The version of each of Bootstrap’s jQuery plugins can be accessed via the <code class="highlighter-rouge">VERSION</code> property of the plugin’s constructor. For example, for the tooltip plugin:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// =&gt; "4.0.0-beta.2"</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// =&gt; "4.0.0-beta.3"</span></code></pre></figure>
<h2 id="no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</h2>
<p>Bootstrap’s plugins don’t fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code class="highlighter-rouge">&lt;noscript&gt;</code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
<div class="bd-callout bd-callout-warning">
<h4 id="third-party-libraries">Third-party libraries</h4>
<h5 id="third-party-libraries">Third-party libraries</h5>
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code class="highlighter-rouge">.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
</div>
<h2 id="util">Util</h2>
<p>All Bootstrap’s JavaScript files depend on <code class="highlighter-rouge">util.js</code> and it has to be included alongside the other JS files. If you’re using the compiled (or minified) <code class="highlighter-rouge">bootstrap.js</code>, there is no need to include this—it’s already there.</p>
<p>All Bootstrap’s JavaScript files depend on <code class="highlighter-rouge">util.js</code> and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) <code class="highlighter-rouge">bootstrap.js</code>, there is no need to include this—it’s already there.</p>
<p><code class="highlighter-rouge">util.js</code> includes utility functions and a basic helper for <code class="highlighter-rouge">transitionEnd</code> events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
@@ -716,20 +506,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -749,10 +526,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/options/index.html
+3 -2
View File
@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap - Content moved</title>
<title>Bootstrap · Content moved</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/getting-started/theming/">
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/getting-started/theming/">
<meta name="robots" content="noindex">
<style>
html {
display: flex;
@@ -30,7 +31,7 @@
</style>
</head>
<body>
<h1>Redirecting…</h1>
<h1>Redirecting&hellip;</h1>
<a href="https://getbootstrap.com/docs/4.0/getting-started/theming/">Click here if you are not redirected</a>
<script>window.location="https://getbootstrap.com/docs/4.0/getting-started/theming/";</script>
</body>
docs/4.0/getting-started/theming/index.html
+101 -314
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Theming Bootstrap &middot; Bootstrap</title>
<title>Theming Bootstrap · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Theming Bootstrap">
<meta name="twitter:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Theming Bootstrap">
<meta name="twitter:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/theming/">
<meta property="og:title" content="Theming Bootstrap">
<meta property="og:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/theming/">
<meta property="og:title" content="Theming Bootstrap">
<meta property="og:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -627,7 +421,7 @@
<h3 id="file-structure">File structure</h3>
<p>Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’ve downloaded our source files or are using a package manager, you’ll have a file structure that looks like this:</p>
<p>Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:</p>
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">your-project/
├── scss
@@ -637,6 +431,15 @@
├── js
└── scss</code></pre></figure>
<p>If you’ve downloaded our source files and aren’t using a package manager, you’ll want to manually setup something similar to that structure, keeping Bootstrap’s source files separate from your own.</p>
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss</code></pre></figure>
<p>In your <code class="highlighter-rouge">custom.scss</code>, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.</p>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss
@@ -1048,20 +851,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1081,10 +871,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
docs/4.0/getting-started/webpack/index.html
+109 -332
View File
@@ -3,18 +3,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<meta name="description" content="Learn how to include Bootstrap in your project using Webpack 3.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Webpack &middot; Bootstrap</title>
<title>Webpack · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Webpack">
<meta name="twitter:description" content="Learn how to include Bootstrap in your project using Webpack 2.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Webpack">
<meta name="twitter:description" content="Learn how to include Bootstrap in your project using Webpack 3.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/webpack/">
<meta property="og:title" content="Webpack">
<meta property="og:description" content="Learn how to include Bootstrap in your project using Webpack 2.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/webpack/">
<meta property="og:title" content="Webpack">
<meta property="og:description" content="Learn how to include Bootstrap in your project using Webpack 3.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a>
</li><li class="active bd-sidenav-active">
</a></li><li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a>
</li></ul>
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/">
History
</a>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a>
</li><li>
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a>
</li></ul>
</a></li></ul>
</div></nav>
</div>
@@ -596,7 +390,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Webpack</h1>
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack 2.</p>
<p class="bd-lead">Learn how to include Bootstrap in your project using Webpack 3.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="installing-bootstrap">Installing Bootstrap</h2>
@@ -615,22 +409,9 @@
<span class="k">import</span> <span class="s1">'bootstrap/js/dist/dropdown'</span><span class="p">;</span>
<span class="p">...</span></code></pre></figure>
<p>Bootstrap is dependent on <a href="https://jquery.com/">jQuery</a> and <a href="https://popper.js.org/">Popper</a>, so npm will install them for you if needed. But they must be explicitly provided by webpack. Add the following code to the <code class="highlighter-rouge">plugins</code> section in your webpack config file:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"> <span class="nx">plugins</span><span class="p">:</span> <span class="p">[</span>
<span class="p">...</span>
<span class="k">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">ProvidePlugin</span><span class="p">({</span>
<span class="na">$</span><span class="p">:</span> <span class="s1">'jquery'</span><span class="p">,</span>
<span class="na">jQuery</span><span class="p">:</span> <span class="s1">'jquery'</span><span class="p">,</span>
<span class="s1">'window.jQuery'</span><span class="p">:</span> <span class="s1">'jquery'</span><span class="p">,</span>
<span class="na">Popper</span><span class="p">:</span> <span class="p">[</span><span class="s1">'popper.js'</span><span class="p">,</span> <span class="s1">'default'</span><span class="p">],</span>
<span class="c1">// In case you imported plugins individually, you must also require them here:</span>
<span class="na">Util</span><span class="p">:</span> <span class="s2">"exports-loader?Util!bootstrap/js/dist/util"</span><span class="p">,</span>
<span class="na">Dropdown</span><span class="p">:</span> <span class="s2">"exports-loader?Dropdown!bootstrap/js/dist/dropdown"</span><span class="p">,</span>
<span class="p">...</span>
<span class="p">})</span>
<span class="p">...</span>
<span class="p">]</span></code></pre></figure>
<p>Bootstrap is dependent on <a href="https://jquery.com/">jQuery</a> and <a href="https://popper.js.org/">Popper</a>,
these are defined as <code class="highlighter-rouge">peerDependencies</code>, this means that you will have to make sure to add both of them
to your <code class="highlighter-rouge">package.json</code> using <code class="highlighter-rouge">npm install --save jquery popper.js</code>.</p>
<div class="bd-callout bd-callout-warning">
<p>Notice that if you chose to <strong>import plugins individually</strong>, you must also install <a href="https://github.com/webpack-contrib/exports-loader">exports-loader</a></p>
@@ -667,7 +448,7 @@
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="p">{</span>
<span class="na">loader</span><span class="p">:</span> <span class="s1">'sass-loader'</span> <span class="c1">// compiles SASS to CSS</span>
<span class="na">loader</span><span class="p">:</span> <span class="s1">'sass-loader'</span> <span class="c1">// compiles Sass to CSS</span>
<span class="p">}]</span>
<span class="p">},</span>
<span class="p">...</span></code></pre></figure>
@@ -678,7 +459,19 @@
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">import</span> <span class="s1">'bootstrap/dist/css/bootstrap.min.css'</span><span class="p">;</span></code></pre></figure>
<p>In this case you may use your existing rule for <code class="highlighter-rouge">css</code> without any special modifications to webpack config.</p>
<p>In this case you may use your existing rule for <code class="highlighter-rouge">css</code> without any special modifications to webpack config except you don’t need <code class="highlighter-rouge">sass-loader</code> just <a href="https://github.com/webpack-contrib/style-loader">style-loader</a> and <a href="https://github.com/webpack-contrib/css-loader">css-loader</a>.</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"> <span class="p">...</span>
<span class="nx">module</span><span class="p">:</span> <span class="p">{</span>
<span class="nl">rules</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="na">test</span><span class="p">:</span> <span class="sr">/</span><span class="se">\.</span><span class="sr">css$/</span><span class="p">,</span>
<span class="na">use</span><span class="p">:</span> <span class="p">[</span><span class="s1">'style-loader'</span><span class="p">,</span> <span class="s1">'css-loader'</span><span class="p">]</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="p">...</span></code></pre></figure>
</main>
</div>
@@ -687,20 +480,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -720,10 +500,7 @@
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
<script>
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',