mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-11 08:04:59 +02:00
update to 4.2.1
This commit is contained in:
Mark Otto
535
docs/4.2/getting-started/accessibility/index.html
Normal file
535
docs/4.2/getting-started/accessibility/index.html
Normal file
@@ -0,0 +1,535 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>Accessibility · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#overview-and-limitations">Overview and Limitations</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#structural-markup">Structural markup</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#interactive-components">Interactive components</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#color-contrast">Color contrast</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#visually-hidden-content">Visually hidden content</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#reduced-motion">Reduced motion</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#additional-resources">Additional resources</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&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>
|
||||
|
||||
<h2 id="overview-and-limitations">Overview and Limitations</h2>
|
||||
|
||||
<p>The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill <a href="https://www.w3.org/TR/WCAG20/"><abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.0</a> (A/AA/AAA), <a href="https://www.section508.gov/">Section 508</a> and similar accessibility standards and requirements.</p>
|
||||
|
||||
<h3 id="structural-markup">Structural markup</h3>
|
||||
|
||||
<p>Bootstrap’s styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.</p>
|
||||
|
||||
<h3 id="interactive-components">Interactive components</h3>
|
||||
|
||||
<p>Bootstrap’s interactive components—such as modal dialogs, dropdown menus and custom tooltips—are designed to work for touch, mouse and keyboard users. Through the use of relevant <a href="https://www.w3.org/WAI/standards-guidelines/aria/"><abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr title="Accessible Rich Internet Applications">ARIA</abbr></a> roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers).</p>
|
||||
|
||||
<p>Because Bootstrap’s components are purposely designed to be fairly generic, authors may need to include further <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation.</p>
|
||||
|
||||
<h3 id="color-contrast">Color contrast</h3>
|
||||
|
||||
<p>Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to <em>insufficient</em> color contrast (below the recommended <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG 2.0 color contrast ratio of 4.5:1</a>) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.</p>
|
||||
|
||||
<h3 id="visually-hidden-content">Visually hidden content</h3>
|
||||
|
||||
<p>Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the <code class="highlighter-rouge">.sr-only</code> class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Danger: <span class="nt"></span></span>
|
||||
This action is not reversible
|
||||
<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>For visually hidden interactive controls, such as traditional “skip” links, <code class="highlighter-rouge">.sr-only</code> can be combined with the <code class="highlighter-rouge">.sr-only-focusable</code> class. This will ensure that the control becomes visible once focused (for sighted keyboard users).</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">></span>Skip to main content<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<h3 id="reduced-motion">Reduced motion</h3>
|
||||
|
||||
<p>Bootstrap includes support for the <a href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion"><code class="highlighter-rouge">prefers-reduced-motion</code> media feature</a>. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled.</p>
|
||||
|
||||
<h2 id="additional-resources">Additional resources</h2>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a></li>
|
||||
<li><a href="https://a11yproject.com/">The A11Y Project</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
|
||||
<li><a href="https://tenon.io/">Tenon.io Accessibility Checker</a></li>
|
||||
<li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser (CCA)</a></li>
|
||||
<li><a href="https://github.com/squizlabs/HTML_CodeSniffer">“HTML Codesniffer” bookmarklet for identifying accessibility issues</a></li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
488
docs/4.2/getting-started/best-practices/index.html
Normal file
488
docs/4.2/getting-started/best-practices/index.html
Normal file
@@ -0,0 +1,488 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>Best practices · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&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>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p><strong>Heads up!</strong> This copy is a work in progress.</p>
|
||||
</div>
|
||||
|
||||
<h3 id="general-outline">General outline</h3>
|
||||
|
||||
<ul>
|
||||
<li>Working with CSS</li>
|
||||
<li>Working with Sass files</li>
|
||||
<li>Building new CSS components</li>
|
||||
<li>Working with flexbox</li>
|
||||
<li>Ask in <a href="https://bootstrap-slack.herokuapp.com/">Slack</a></li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
680
docs/4.2/getting-started/browsers-devices/index.html
Normal file
680
docs/4.2/getting-started/browsers-devices/index.html
Normal file
@@ -0,0 +1,680 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>Browsers and devices · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#supported-browsers">Supported browsers</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#mobile-devices">Mobile devices</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#desktop-browsers">Desktop browsers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#internet-explorer">Internet Explorer</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#modals-and-dropdowns-on-mobile">Modals and dropdowns on mobile</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#overflow-and-scrolling">Overflow and scrolling</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#ios-text-fields-and-scrolling">iOS text fields and scrolling</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#navbar-dropdowns">Navbar Dropdowns</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#browser-zooming">Browser zooming</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sticky-hoverfocus-on-ios">Sticky :hover/:focus on iOS</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#printing">Printing</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#android-stock-browser">Android stock browser</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#select-menu">Select menu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#validators">Validators</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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">Browsers and devices</h1>
|
||||
<p class="bd-lead">Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="supported-browsers">Supported browsers</h2>
|
||||
|
||||
<p>Bootstrap supports the <strong>latest, stable releases</strong> of all major browsers and platforms. On Windows, <strong>we support Internet Explorer 10-11 / Microsoft Edge</strong>.</p>
|
||||
|
||||
<p>Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.</p>
|
||||
|
||||
<p>You can find our supported range of browsers and their versions <a href="https://github.com/twbs/bootstrap/blob/v4.2.1/.browserslistrc">in our <code class="highlighter-rouge">.browserslistrc file</code></a>:</p>
|
||||
|
||||
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code># https://github.com/browserslist/browserslist#readme
|
||||
|
||||
>= 1%
|
||||
last 1 major version
|
||||
not dead
|
||||
Chrome >= 45
|
||||
Firefox >= 38
|
||||
Edge >= 12
|
||||
Explorer >= 10
|
||||
iOS >= 9
|
||||
Safari >= 9
|
||||
Android >= 4.4
|
||||
Opera >= 30
|
||||
</code></pre></div></div>
|
||||
|
||||
<p>We use <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> to handle intended browser support via CSS prefixes, which uses <a href="https://github.com/browserslist/browserslist">Browserslist</a> to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.</p>
|
||||
|
||||
<h3 id="mobile-devices">Mobile devices</h3>
|
||||
|
||||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Safari</th>
|
||||
<th>Android Browser & WebView</th>
|
||||
<th>Microsoft Edge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Android</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<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-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">iOS</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows 10 Mobile</th>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="desktop-browsers">Desktop browsers</h3>
|
||||
|
||||
<p>Similarly, the latest versions of most desktop browsers are supported.</p>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Internet Explorer</th>
|
||||
<th>Microsoft Edge</th>
|
||||
<th>Opera</th>
|
||||
<th>Safari</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Mac</th>
|
||||
<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>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported, IE10+</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-danger">Not supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>For Firefox, in addition to the latest normal stable release, we also support the latest <a href="https://www.mozilla.org/en-US/firefox/organizations/#faq">Extended Support Release (ESR)</a> version of Firefox.</p>
|
||||
|
||||
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.</p>
|
||||
|
||||
<p>For a list of some of the browser bugs that Bootstrap has to grapple with, see our <a href="/docs/4.2/browser-bugs/">Wall of browser bugs</a>.</p>
|
||||
|
||||
<h2 id="internet-explorer">Internet Explorer</h2>
|
||||
|
||||
<p>Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit <a href="https://caniuse.com/">Can I use…</a> for details on browser support of CSS3 and HTML5 features. <strong>If you require IE8-9 support, use Bootstrap 3.</strong></p>
|
||||
|
||||
<h2 id="modals-and-dropdowns-on-mobile">Modals and dropdowns on mobile</h2>
|
||||
|
||||
<h3 id="overflow-and-scrolling">Overflow and scrolling</h3>
|
||||
|
||||
<p>Support for <code class="highlighter-rouge">overflow: hidden;</code> on the <code class="highlighter-rouge"><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices’ browsers, the <code class="highlighter-rouge"><body></code> content will begin to scroll. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=175502">Chrome bug #175502</a> (fixed in Chrome v40) and <a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>.</p>
|
||||
|
||||
<h3 id="ios-text-fields-and-scrolling">iOS text fields and scrolling</h3>
|
||||
|
||||
<p>As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <code class="highlighter-rouge"><input></code> or a <code class="highlighter-rouge"><textarea></code>, the <code class="highlighter-rouge"><body></code> content underneath the modal will be scrolled instead of the modal itself. See <a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>.</p>
|
||||
|
||||
<h3 id="navbar-dropdowns">Navbar Dropdowns</h3>
|
||||
|
||||
<p>The <code class="highlighter-rouge">.dropdown-backdrop</code> element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile">any other element which will fire a click event in iOS</a>).</p>
|
||||
|
||||
<h2 id="browser-zooming">Browser zooming</h2>
|
||||
|
||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
||||
|
||||
<h2 id="sticky-hoverfocus-on-ios">Sticky <code class="highlighter-rouge">:hover</code>/<code class="highlighter-rouge">:focus</code> on iOS</h2>
|
||||
|
||||
<p>While <code class="highlighter-rouge">:hover</code> isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element. This behavior is considered largely undesirable and appears to not be an issue on Android or Windows devices.</p>
|
||||
|
||||
<p>Throughout our v4 alpha and beta releases, we included incomplete and commented out code for opting into a media query shim that would disable hover styles in touch device browsers that emulate hovering. This work was never fully completed or enabled, but to avoid complete breakage, we’ve opted to deprecate <a href="https://github.com/twbs/mq4-hover-shim">this shim</a> and keep the mixins as shortcuts for the pseudo-classes.</p>
|
||||
|
||||
<h2 id="printing">Printing</h2>
|
||||
|
||||
<p>Even in some modern browsers, printing can be quirky.</p>
|
||||
|
||||
<p>As of Safari v8.0, use of the fixed-width <code class="highlighter-rouge">.container</code> class can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">issue #14868</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a> for more details. One potential workaround is the following CSS:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="k">@media</span> <span class="n">print</span> <span class="p">{</span>
|
||||
<span class="nc">.container</span> <span class="p">{</span>
|
||||
<span class="nl">width</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<h2 id="android-stock-browser">Android stock browser</h2>
|
||||
|
||||
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
|
||||
|
||||
<h4 id="select-menu">Select menu</h4>
|
||||
|
||||
<p>On <code class="highlighter-rouge"><select></code> elements, the Android stock browser will not display the side controls if there is a <code class="highlighter-rouge">border-radius</code> and/or <code class="highlighter-rouge">border</code> applied. (See <a href="https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code class="highlighter-rouge"><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script></span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">nua</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">userAgent</span>
|
||||
<span class="kd">var</span> <span class="nx">isAndroid</span> <span class="o">=</span> <span class="p">(</span><span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Mozilla/5.0'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Android '</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'AppleWebKit'</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">nua</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'Chrome'</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">isAndroid</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'select.form-control'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">'form-control'</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">'width'</span><span class="p">,</span> <span class="s1">'100%'</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">})</span>
|
||||
<span class="nt"></script></span></code></pre></figure>
|
||||
|
||||
<p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo</a>.</p>
|
||||
|
||||
<h2 id="validators">Validators</h2>
|
||||
|
||||
<p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com/">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.</p>
|
||||
|
||||
<p>These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p>
|
||||
|
||||
<p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
552
docs/4.2/getting-started/build-tools/index.html
Normal file
552
docs/4.2/getting-started/build-tools/index.html
Normal file
@@ -0,0 +1,552 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>Build tools · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#using-npm-scripts">Using NPM scripts</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#autoprefixer">Autoprefixer</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#local-documentation">Local documentation</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&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.2.1/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/en/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.2.1/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>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>When completed, you’ll be able to run the various commands provided from the command line.</p>
|
||||
|
||||
<h2 id="using-npm-scripts">Using NPM scripts</h2>
|
||||
|
||||
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v4.2.1/package.json">package.json</a> includes the following commands and tasks:</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">npm run dist</code></td>
|
||||
<td><code class="highlighter-rouge">npm run dist</code> creates the <code class="highlighter-rouge">/dist</code> directory with compiled files. <strong>Uses <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/mishoo/UglifyJS2">UglifyJS</a>.</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">npm test</code></td>
|
||||
<td>Same as <code class="highlighter-rouge">npm run dist</code> plus it runs tests locally</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">npm run docs</code></td>
|
||||
<td>Builds and lints CSS and JavaScript for docs. You can then run the documentation locally via <code class="highlighter-rouge">npm run docs-serve</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Run <code class="highlighter-rouge">npm run</code> to see all the npm scripts.</p>
|
||||
|
||||
<h2 id="autoprefixer">Autoprefixer</h2>
|
||||
|
||||
<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.2.1/.browserslistrc">/.browserslistrc</a> for details.</p>
|
||||
|
||||
<h2 id="local-documentation">Local documentation</h2>
|
||||
|
||||
<p>Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here’s how to get it started:</p>
|
||||
|
||||
<ol>
|
||||
<li>Run through the <a href="#tooling-setup">tooling setup</a> above to install Jekyll (the site builder) and other Ruby dependencies with <code class="highlighter-rouge">bundle install</code>.</li>
|
||||
<li>From the root <code class="highlighter-rouge">/bootstrap</code> directory, run <code class="highlighter-rouge">npm run docs-serve</code> in the command line.</li>
|
||||
<li>Open <code class="highlighter-rouge">http://localhost:9001</code> in your browser, and voilà.</li>
|
||||
</ol>
|
||||
|
||||
<p>Learn more about using Jekyll by reading its <a href="https://jekyllrb.com/docs/">documentation</a>.</p>
|
||||
|
||||
<h2 id="troubleshooting">Troubleshooting</h2>
|
||||
|
||||
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class="highlighter-rouge">npm install</code>.</p>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
610
docs/4.2/getting-started/contents/index.html
Normal file
610
docs/4.2/getting-started/contents/index.html
Normal file
@@ -0,0 +1,610 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>Contents · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<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></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>
|
||||
|
||||
|
||||
<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>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="precompiled-bootstrap">Precompiled Bootstrap</h2>
|
||||
|
||||
<p>Once downloaded, unzip the compressed folder and you’ll see something like this:</p>
|
||||
|
||||
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
|
||||
|
||||
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap-grid.css
|
||||
│ ├── bootstrap-grid.css.map
|
||||
│ ├── bootstrap-grid.min.css
|
||||
│ ├── bootstrap-grid.min.css.map
|
||||
│ ├── bootstrap-reboot.css
|
||||
│ ├── bootstrap-reboot.css.map
|
||||
│ ├── bootstrap-reboot.min.css
|
||||
│ ├── bootstrap-reboot.min.css.map
|
||||
│ ├── bootstrap.css
|
||||
│ ├── bootstrap.css.map
|
||||
│ ├── bootstrap.min.css
|
||||
│ └── bootstrap.min.css.map
|
||||
└── js/
|
||||
├── bootstrap.bundle.js
|
||||
├── bootstrap.bundle.js.map
|
||||
├── bootstrap.bundle.min.js
|
||||
├── bootstrap.bundle.min.js.map
|
||||
├── bootstrap.js
|
||||
├── bootstrap.js.map
|
||||
├── bootstrap.min.js
|
||||
└── bootstrap.min.js.map</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>). <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>
|
||||
|
||||
<h2 id="css-files">CSS files</h2>
|
||||
|
||||
<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">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="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="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="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><a class="text-warning" href="/docs/4.2/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.2/utilities/flex/">Only flex utilities</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<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="bg-light text-muted">Not included</td>
|
||||
<td><a class="text-warning" href="/docs/4.2/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>
|
||||
|
||||
<h2 id="bootstrap-source-code">Bootstrap source code</h2>
|
||||
|
||||
<p>The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">bootstrap/
|
||||
├── dist/
|
||||
│ ├── css/
|
||||
│ └── js/
|
||||
├── site/
|
||||
│ └──docs/
|
||||
│ └── 4.2/
|
||||
│ └── examples/
|
||||
├── js/
|
||||
└── scss/</code></pre></figure>
|
||||
|
||||
<p>The <code class="highlighter-rouge">scss/</code> and <code class="highlighter-rouge">js/</code> are the source code for our CSS and JavaScript. The <code class="highlighter-rouge">dist/</code> folder includes everything listed in the precompiled download section above. The <code class="highlighter-rouge">site/docs/</code> folder includes the source code for our documentation, and <code class="highlighter-rouge">examples/</code> of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
579
docs/4.2/getting-started/download/index.html
Normal file
579
docs/4.2/getting-started/download/index.html
Normal file
@@ -0,0 +1,579 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>Download · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<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="#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>
|
||||
<li class="toc-entry toc-h3"><a href="#yarn">yarn</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#rubygems">RubyGems</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#composer">Composer</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#nuget">NuGet</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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">Download</h1>
|
||||
<p class="bd-lead">Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
|
||||
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.2.1</strong> to easily drop into your project, which includes:</p>
|
||||
|
||||
<ul>
|
||||
<li>Compiled and minified CSS bundles (see <a href="/docs/4.2/getting-started/contents/#css-files">CSS files comparison</a>)</li>
|
||||
<li>Compiled and minified JavaScript plugins</li>
|
||||
</ul>
|
||||
|
||||
<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.2.1/bootstrap-4.2.1-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>
|
||||
|
||||
<p>Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:</p>
|
||||
|
||||
<ul>
|
||||
<li>Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.</li>
|
||||
<li><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> for CSS vendor prefixing</li>
|
||||
</ul>
|
||||
|
||||
<p>Should you require <a href="/docs/4.2/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.2.1.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
|
||||
<h2 id="bootstrapcdn">BootstrapCDN</h2>
|
||||
|
||||
<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"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></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"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.3.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
|
||||
<h2 id="package-managers">Package managers</h2>
|
||||
|
||||
<p>Pull in Bootstrap’s <strong>source files</strong> into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will <strong>require a Sass compiler and <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a></strong> for a setup that matches our official compiled versions.</p>
|
||||
|
||||
<h3 id="npm">npm</h3>
|
||||
|
||||
<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 <span class="nb">install </span>bootstrap</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>
|
||||
|
||||
<p>Bootstrap’s <code class="highlighter-rouge">package.json</code> contains some additional metadata under the following keys:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">sass</code> - path to Bootstrap’s main <a href="https://sass-lang.com/">Sass</a> source file</li>
|
||||
<li><code class="highlighter-rouge">style</code> - path to Bootstrap’s non-minified CSS that’s been precompiled using the default settings (no customization)</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="yarn">yarn</h3>
|
||||
|
||||
<p>Install Bootstrap in your Node.js powered apps with <a href="https://yarnpkg.com/en/package/yarn">the yarn package</a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">yarn add bootstrap</code></pre></figure>
|
||||
|
||||
<h3 id="rubygems">RubyGems</h3>
|
||||
|
||||
<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">'~> 4.2.1'</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 <span class="nb">install </span>bootstrap <span class="nt">-v</span> 4.2.1</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>
|
||||
|
||||
<h3 id="composer">Composer</h3>
|
||||
|
||||
<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.2.1</code></pre></figure>
|
||||
|
||||
<h3 id="nuget">NuGet</h3>
|
||||
|
||||
<p>If you develop in .NET, you can also install and manage Bootstrap’s <a href="https://www.nuget.org/packages/bootstrap/">CSS</a> or <a href="https://www.nuget.org/packages/bootstrap.sass/">Sass</a> and JavaScript using <a href="https://www.nuget.org/">NuGet</a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap</code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap.sass</code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
docs/4.2/getting-started/index.html
Normal file
11
docs/4.2/getting-started/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.2/getting-started/introduction/">
|
||||
<script>location="https://getbootstrap.com/docs/4.2/getting-started/introduction/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.2/getting-started/introduction/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.2/getting-started/introduction/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
618
docs/4.2/getting-started/introduction/index.html
Normal file
618
docs/4.2/getting-started/introduction/index.html
Normal file
@@ -0,0 +1,618 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>Introduction · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#quick-start">Quick start</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#css">CSS</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#js">JS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#starter-template">Starter template</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#important-globals">Important globals</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#html5-doctype">HTML5 doctype</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#responsive-meta-tag">Responsive meta tag</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#box-sizing">Box-sizing</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#reboot">Reboot</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#community">Community</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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 BootstrapCDN and a template starter page.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="quick-start">Quick start</h2>
|
||||
|
||||
<p>Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? <a href="/docs/4.2/getting-started/download/">Head to the downloads page</a>.</p>
|
||||
|
||||
<h3 id="css">CSS</h3>
|
||||
|
||||
<p>Copy-paste the stylesheet <code class="highlighter-rouge"><link></code> into your <code class="highlighter-rouge"><head></code> before all other stylesheets to load our CSS.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h3 id="js">JS</h3>
|
||||
|
||||
<p>Many of our components require the use of JavaScript to function. Specifically, they require <a href="https://jquery.com">jQuery</a>, <a href="https://popper.js.org/">Popper.js</a>, and our own JavaScript plugins. Place the following <code class="highlighter-rouge"><script></code>s near the end of your pages, right before the closing <code class="highlighter-rouge"></body></code> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.</p>
|
||||
|
||||
<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"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.3.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></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>
|
||||
|
||||
<p>Our <code class="highlighter-rouge">bootstrap.bundle.js</code> and <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>. For more information about what’s included in Bootstrap, please see our <a href="/docs/4.2/getting-started/contents/#precompiled-bootstrap">contents</a> section.</p>
|
||||
|
||||
<details>
|
||||
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
|
||||
|
||||
|
||||
<ul>
|
||||
<li>Alerts for dismissing</li>
|
||||
<li>Buttons for toggling states and checkbox/radio functionality</li>
|
||||
<li>Carousel for all slide behaviors, controls, and indicators</li>
|
||||
<li>Collapse for toggling visibility of content</li>
|
||||
<li>Dropdowns for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
|
||||
<li>Modals for displaying, positioning, and scroll behavior</li>
|
||||
<li>Navbar for extending our Collapse plugin to implement responsive behavior</li>
|
||||
<li>Tooltips and popovers for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
|
||||
<li>Scrollspy for scroll behavior and navigation updates</li>
|
||||
</ul>
|
||||
|
||||
</details>
|
||||
|
||||
<h2 id="starter-template">Starter template</h2>
|
||||
|
||||
<p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!doctype html></span>
|
||||
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="c"><!-- Required meta tags --></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>
|
||||
|
||||
<span class="c"><!-- Bootstrap CSS --></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
|
||||
<span class="nt"><title></span>Hello, world!<span class="nt"></title></span>
|
||||
<span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><h1></span>Hello, world!<span class="nt"></h1></span>
|
||||
|
||||
<span class="c"><!-- Optional JavaScript --></span>
|
||||
<span class="c"><!-- jQuery first, then Popper.js, then Bootstrap JS --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.3.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span></code></pre></figure>
|
||||
|
||||
<p>That’s all you need for overall page requirements. Visit the <a href="/docs/4.2/layout/overview/">Layout docs</a> or <a href="/docs/4.2/examples/">our official examples</a> to start laying out your site’s content and components.</p>
|
||||
|
||||
<h2 id="important-globals">Important globals</h2>
|
||||
|
||||
<p>Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the <em>normalization</em> of cross browser styles. Let’s dive in.</p>
|
||||
|
||||
<h3 id="html5-doctype">HTML5 doctype</h3>
|
||||
|
||||
<p>Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!doctype html></span>
|
||||
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></html></span></code></pre></figure>
|
||||
|
||||
<h3 id="responsive-meta-tag">Responsive meta tag</h3>
|
||||
|
||||
<p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, <strong>add the responsive viewport meta tag</strong> to your <code class="highlighter-rouge"><head></code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><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">></span></code></pre></figure>
|
||||
|
||||
<p>You can see an example of this in action in the <a href="#starter-template">starter template</a>.</p>
|
||||
|
||||
<h3 id="box-sizing">Box-sizing</h3>
|
||||
|
||||
<p>For more straightforward sizing in CSS, we switch the global <code class="highlighter-rouge">box-sizing</code> value from <code class="highlighter-rouge">content-box</code> to <code class="highlighter-rouge">border-box</code>. This ensures <code class="highlighter-rouge">padding</code> does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.</p>
|
||||
|
||||
<p>On the rare occasion you need to override it, use something like the following:</p>
|
||||
|
||||
<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>
|
||||
|
||||
<p>With the above snippet, nested elements—including generated content via <code class="highlighter-rouge">::before</code> and <code class="highlighter-rouge">::after</code>—will all inherit the specified <code class="highlighter-rouge">box-sizing</code> for that <code class="highlighter-rouge">.selector-for-some-widget</code>.</p>
|
||||
|
||||
<p>Learn more about <a href="https://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
|
||||
|
||||
<h3 id="reboot">Reboot</h3>
|
||||
|
||||
<p>For improved cross-browser rendering, we use <a href="/docs/4.2/content/reboot/">Reboot</a> to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.</p>
|
||||
|
||||
<h2 id="community">Community</h2>
|
||||
|
||||
<p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
|
||||
|
||||
<ul>
|
||||
<li>Follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a>.</li>
|
||||
<li>Read and subscribe to <a href="https://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||
<li>Join <a href="https://bootstrap-slack.herokuapp.com/">the official Slack room</a>.</li>
|
||||
<li>Chat with fellow Bootstrappers in IRC. On the <code class="highlighter-rouge">irc.freenode.net</code> server, in the <code class="highlighter-rouge">##bootstrap</code> channel.</li>
|
||||
<li>Implementation help may be found at Stack Overflow (tagged <a href="https://stackoverflow.com/questions/tagged/bootstrap-4"><code class="highlighter-rouge">bootstrap-4</code></a>).</li>
|
||||
<li>Developers should use the keyword <code class="highlighter-rouge">bootstrap</code> on packages which modify or add to the functionality of Bootstrap when distributing through <a href="https://www.npmjs.com/search?q=keywords:bootstrap">npm</a> or similar delivery mechanisms for maximum discoverability.</li>
|
||||
</ul>
|
||||
|
||||
<p>You can also follow <a href="https://twitter.com/getbootstrap">@getbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
600
docs/4.2/getting-started/javascript/index.html
Normal file
600
docs/4.2/getting-started/javascript/index.html
Normal file
@@ -0,0 +1,600 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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.8.5">
|
||||
|
||||
<title>JavaScript · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<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/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/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/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#individual-or-compiled">Individual or compiled</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#dependencies">Dependencies</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#data-attributes">Data attributes</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#events">Events</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#programmatic-api">Programmatic API</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#asynchronous-functions-and-transitions">Asynchronous functions and transitions</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#default-settings">Default settings</a></li>
|
||||
</ul>
|
||||
</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></li>
|
||||
<li class="toc-entry toc-h2"><a href="#util">Util</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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">JavaScript</h1>
|
||||
<p class="bd-lead">Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="individual-or-compiled">Individual or compiled</h2>
|
||||
|
||||
<p>Plugins can be included individually (using Bootstrap’s individual <code class="highlighter-rouge">js/dist/*.js</code>), or all at once using <code class="highlighter-rouge">bootstrap.js</code> or the minified <code class="highlighter-rouge">bootstrap.min.js</code> (don’t include both).</p>
|
||||
|
||||
<p>If you use a bundler (Webpack, Rollup…), you can use <code class="highlighter-rouge">/js/dist/*.js</code> files which are UMD ready.</p>
|
||||
|
||||
<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.2.1/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>
|
||||
|
||||
<h2 id="data-attributes">Data attributes</h2>
|
||||
|
||||
<p>Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to <strong>only use one set of data attributes on a single element</strong> (e.g., you cannot trigger a tooltip and modal from the same button.)</p>
|
||||
|
||||
<p>However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with <code class="highlighter-rouge">data-api</code> like so:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.data-api'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<p>Alternatively, to target a specific plugin, just include the plugin’s name as a namespace along with the data-api namespace like this:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.alert.data-api'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h2 id="selectors">Selectors</h2>
|
||||
|
||||
<p>Currently to query DOM elements we use the native methods <code class="highlighter-rouge">querySelector</code> and <code class="highlighter-rouge">querySelectorAll</code> for performance reasons, so you have to use <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">valid selectors</a>.
|
||||
If you use special selectors, for example: <code class="highlighter-rouge">collapse:Example</code> be sure to escape them.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="events">Events</h2>
|
||||
|
||||
<p>Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code class="highlighter-rouge">show</code>) is triggered at the start of an event, and its past participle form (ex. <code class="highlighter-rouge">shown</code>) is triggered on the completion of an action.</p>
|
||||
|
||||
<p>All infinitive events provide <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code class="highlighter-rouge">preventDefault()</code></a> functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call <code class="highlighter-rouge">preventDefault()</code>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops modal from being shown</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<h2 id="programmatic-api">Programmatic API</h2>
|
||||
|
||||
<p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn.danger'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'fat'</span><span class="p">)</span></code></pre></figure>
|
||||
|
||||
<p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">()</span> <span class="c1">// initialized with defaults</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="na">keyboard</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// initialized with no keyboard</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// initializes and invokes show immediately</span></code></pre></figure>
|
||||
|
||||
<p>Each plugin also exposes its raw constructor on a <code class="highlighter-rouge">Constructor</code> property: <code class="highlighter-rouge">$.fn.popover.Constructor</code>. If you’d like to get a particular plugin instance, retrieve it directly from an element: <code class="highlighter-rouge">$('[rel="popover"]').data('popover')</code>.</p>
|
||||
|
||||
<h3 id="asynchronous-functions-and-transitions">Asynchronous functions and transitions</h3>
|
||||
|
||||
<p>All programmatic API methods are <strong>asynchronous</strong> and return to the caller once the transition is started but <strong>before it ends</strong>.</p>
|
||||
|
||||
<p>In order to execute an action once the transition is complete, you can listen to the corresponding event.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapse'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.collapse'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Action to execute once the collapsible area is expanded</span>
|
||||
<span class="p">})</span></code></pre></figure>
|
||||
|
||||
<p>In addition a method call on a <strong>transitioning component will be ignored</strong>.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'slid.bs.carousel'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// Will slide to the slide 2 as soon as the transition to slide 1 is finished</span>
|
||||
<span class="p">})</span>
|
||||
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'1'</span><span class="p">)</span> <span class="c1">// Will start sliding to the slide 1 and returns to the caller</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">(</span><span class="s1">'2'</span><span class="p">)</span> <span class="c1">// !! Will be ignored, as the transition to the slide 1 is not finished !!</span></code></pre></figure>
|
||||
|
||||
<h3 id="default-settings">Default settings</h3>
|
||||
|
||||
<p>You can change the default settings for a plugin by modifying the plugin’s <code class="highlighter-rouge">Constructor.Default</code> object:</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">modal</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">Default</span><span class="p">.</span><span class="nx">keyboard</span> <span class="o">=</span> <span class="kc">false</span> <span class="c1">// changes default for the modal plugin's `keyboard` option to false</span></code></pre></figure>
|
||||
|
||||
<h2 id="no-conflict">No conflict</h2>
|
||||
|
||||
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code class="highlighter-rouge">.noConflict</code> on the plugin you wish to revert the value of.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></figure>
|
||||
|
||||
<h2 id="version-numbers">Version numbers</h2>
|
||||
|
||||
<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">// => "4.2.1"</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"><noscript></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">
|
||||
<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 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>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1063
docs/4.2/getting-started/theming/index.html
Normal file
1063
docs/4.2/getting-started/theming/index.html
Normal file
File diff suppressed because it is too large
Load Diff
560
docs/4.2/getting-started/webpack/index.html
Normal file
560
docs/4.2/getting-started/webpack/index.html
Normal file
@@ -0,0 +1,560 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn how to include Bootstrap in your project using Webpack.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Webpack · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Webpack">
|
||||
<meta name="twitter:description" content="Learn how to include Bootstrap in your project using Webpack.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/getting-started/webpack/">
|
||||
<meta property="og:title" content="Webpack">
|
||||
<meta property="og:description" content="Learn how to include Bootstrap in your project using Webpack.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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" role="img"><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">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</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" role="img"><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" role="img"><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" role="img"><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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-xl-nowrap">
|
||||
<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" data-docs-version="4.2">
|
||||
<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" role="img"><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">
|
||||
<a class="bd-toc-link" href="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#installing-bootstrap">Installing Bootstrap</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#importing-javascript">Importing JavaScript</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#importing-styles">Importing Styles</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#importing-precompiled-sass">Importing Precompiled Sass</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#importing-compiled-css">Importing Compiled CSS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<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.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="installing-bootstrap">Installing Bootstrap</h2>
|
||||
|
||||
<p><a href="/docs/4.2/getting-started/download/#npm">Install bootstrap</a> as a Node.js module using npm.</p>
|
||||
|
||||
<h2 id="importing-javascript">Importing JavaScript</h2>
|
||||
|
||||
<p>Import <a href="/docs/4.2/getting-started/javascript/">Bootstrap’s JavaScript</a> by adding this line to your app’s entry point (usually <code class="highlighter-rouge">index.js</code> or <code class="highlighter-rouge">app.js</code>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">import</span> <span class="s1">'bootstrap'</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>Alternatively, you may <strong>import plugins individually</strong> as needed:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">import</span> <span class="s1">'bootstrap/js/dist/util'</span><span class="p">;</span>
|
||||
<span class="k">import</span> <span class="s1">'bootstrap/js/dist/alert'</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>
|
||||
|
||||
<h2 id="importing-styles">Importing Styles</h2>
|
||||
|
||||
<h3 id="importing-precompiled-sass">Importing Precompiled Sass</h3>
|
||||
|
||||
<p>To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.</p>
|
||||
|
||||
<p>First, create your own <code class="highlighter-rouge">_custom.scss</code> and use it to override the <a href="/docs/4.2/getting-started/theming/">built-in custom variables</a>. Then, use your main Sass file to import your custom variables, followed by Bootstrap:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@import</span> <span class="s2">"custom"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"~bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>For Bootstrap to compile, make sure you install and use the required loaders: <a href="https://github.com/webpack-contrib/sass-loader">sass-loader</a>, <a href="https://github.com/postcss/postcss-loader">postcss-loader</a> with <a href="https://github.com/postcss/autoprefixer#webpack">Autoprefixer</a>. With minimal setup, your webpack config should include this rule or similar:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="p">...</span>
|
||||
<span class="p">{</span>
|
||||
<span class="nl">test</span><span class="p">:</span> <span class="sr">/</span><span class="se">\.(</span><span class="sr">scss</span><span class="se">)</span><span class="sr">$/</span><span class="p">,</span>
|
||||
<span class="nx">use</span><span class="p">:</span> <span class="p">[{</span>
|
||||
<span class="na">loader</span><span class="p">:</span> <span class="s1">'style-loader'</span><span class="p">,</span> <span class="c1">// inject CSS to page</span>
|
||||
<span class="p">},</span> <span class="p">{</span>
|
||||
<span class="na">loader</span><span class="p">:</span> <span class="s1">'css-loader'</span><span class="p">,</span> <span class="c1">// translates CSS into CommonJS modules</span>
|
||||
<span class="p">},</span> <span class="p">{</span>
|
||||
<span class="na">loader</span><span class="p">:</span> <span class="s1">'postcss-loader'</span><span class="p">,</span> <span class="c1">// Run postcss actions</span>
|
||||
<span class="na">options</span><span class="p">:</span> <span class="p">{</span>
|
||||
<span class="na">plugins</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// postcss plugins, can be exported to postcss.config.js</span>
|
||||
<span class="k">return</span> <span class="p">[</span>
|
||||
<span class="nx">require</span><span class="p">(</span><span class="s1">'autoprefixer'</span><span class="p">)</span>
|
||||
<span class="p">];</span>
|
||||
<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="p">}]</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span></code></pre></figure>
|
||||
|
||||
<h3 id="importing-compiled-css">Importing Compiled CSS</h3>
|
||||
|
||||
<p>Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:</p>
|
||||
|
||||
<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, 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>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user