0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/content/docs/5.1/getting-started/contents.md
2021-08-04 18:41:51 +03:00

181 lines
6.9 KiB
Markdown

---
layout: docs
title: Contents
description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
group: getting-started
toc: true
---
## Precompiled Bootstrap
Once downloaded, unzip the compressed folder and you'll see something like this:
<!-- 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. -->
```text
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
```
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 (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
## CSS files
Bootstrap includes a handful of options for including some or all of our compiled CSS.
<table class="table">
<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="fw-normal text-nowrap">bootstrap.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.rtl.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.rtl.min.css</code></div>
</th>
<td>Included</td>
<td>Included</td>
<td>Included</td>
<td>Included</td>
</tr>
<tr>
<th scope="row">
<div><code class="fw-normal text-nowrap">bootstrap-grid.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-grid.rtl.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-grid.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-grid.rtl.min.css</code></div>
</th>
<td><a class="link-secondary" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td><a class="link-secondary" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td>
</tr>
<tr>
<th scope="row">
<div><code class="fw-normal text-nowrap">bootstrap-utilities.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-utilities.rtl.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-utilities.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-utilities.rtl.min.css</code></div>
</th>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td>Included</td>
</tr>
<tr>
<th scope="row">
<div><code class="fw-normal text-nowrap">bootstrap-reboot.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-reboot.rtl.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-reboot.min.css</code></div>
<div><code class="fw-normal text-nowrap">bootstrap-reboot.rtl.min.css</code></div>
</th>
<td class="text-muted">&mdash;</td>
<td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
</tr>
</tbody>
</table>
## JS files
Similarly, we have options for including some or all of our compiled JavaScript.
<table class="table">
<thead>
<tr>
<th scope="col">JS files</th>
<th scope="col">Popper</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<div><code class="fw-normal text-nowrap">bootstrap.bundle.js</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.bundle.min.js</code></div>
</th>
<td>Included</td>
</tr>
<tr>
<th scope="row">
<div><code class="fw-normal text-nowrap">bootstrap.js</code></div>
<div><code class="fw-normal text-nowrap">bootstrap.min.js</code></div>
</th>
<td class="text-muted">&mdash;</td>
</tr>
</tbody>
</table>
## Bootstrap source code
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:
```text
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──content/
│ └── docs/
│ └── 5.1/
│ └── examples/
├── js/
└── scss/
```
The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.