141 lines
5.5 KiB
Markdown
141 lines
5.5 KiB
Markdown
---
|
|
layout: docs
|
|
title: Contents
|
|
description: Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.
|
|
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. -->
|
|
|
|
{% highlight 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
|
|
{% endhighlight %}
|
|
|
|
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/), but not [jQuery](https://jquery.com/).
|
|
|
|
## CSS files
|
|
|
|
Bootstrap includes a handful of options for including some or all of our compiled CSS.
|
|
|
|
<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="{{ site.baseurl }}/docs/{{ site.docs_version }}/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="{{ site.baseurl }}/docs/{{ site.docs_version }}/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="{{ site.baseurl }}/docs/{{ site.docs_version }}/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>
|
|
|
|
## JS files
|
|
|
|
Similarly, we have options for including some or all of our compiled JavaScript.
|
|
|
|
<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>
|
|
|
|
## 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:
|
|
|
|
{% highlight plaintext %}
|
|
bootstrap/
|
|
├── dist/
|
|
│ ├── css/
|
|
│ └── js/
|
|
├── site/
|
|
│ └──docs/
|
|
│ └── 4.5/
|
|
│ └── examples/
|
|
├── js/
|
|
└── scss/
|
|
{% endhighlight %}
|
|
|
|
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.
|