mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
Rewrite docs tables in Markdown with table shortcode (#31337)
Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
@@ -26,68 +26,23 @@ We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intende
|
||||
|
||||
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.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">Chrome</th>
|
||||
<th scope="col">Firefox</th>
|
||||
<th scope="col">Safari</th>
|
||||
<th scope="col">Android Browser & WebView</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Android</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td class="text-muted">—</td>
|
||||
<td>v6.0+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">iOS</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td class="text-muted">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< bs-table "table" >}}
|
||||
| | Chrome | Firefox | Safari | Android Browser & WebView |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| **Android** | Supported | Supported | <span class="text-muted">—</span> | v6.0+ |
|
||||
| **Windows** | Supported | Supported | Supported | <span class="text-muted">—</span> |
|
||||
{{< /bs-table >}}
|
||||
|
||||
### Desktop browsers
|
||||
|
||||
Similarly, the latest versions of most desktop browsers are supported.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">Chrome</th>
|
||||
<th scope="col">Firefox</th>
|
||||
<th scope="col">Microsoft Edge</th>
|
||||
<th scope="col">Opera</th>
|
||||
<th scope="col">Safari</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Mac</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows</th>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td>Supported</td>
|
||||
<td class="text-muted">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< bs-table "table" >}}
|
||||
| | Chrome | Firefox | Microsoft Edge | Opera | Safari |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| **Mac** | Supported | Supported | Supported | Supported | Supported |
|
||||
| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">—</span> |
|
||||
{{< /bs-table >}}
|
||||
|
||||
For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox.
|
||||
|
||||
|
||||
@@ -68,96 +68,25 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us
|
||||
|
||||
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">—</td>
|
||||
<td class="text-muted">—</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">—</td>
|
||||
<td class="text-muted">—</td>
|
||||
<td class="text-muted">—</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">—</td>
|
||||
<td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
|
||||
<td class="text-muted">—</td>
|
||||
<td class="text-muted">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< bs-table "table" >}}
|
||||
| CSS files | Layout | Content | Components | Utilities |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `bootstrap.css`<br> `bootstrap.min.css`<br> `bootstrap.rtl.css`<br> `bootstrap.rtl.min.css` | Included | Included | Included | Included |
|
||||
| `bootstrap-grid.css`<br> `bootstrap-grid.rtl.css`<br> `bootstrap-grid.min.css`<br> `bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
|
||||
| `bootstrap-utilities.css`<br> `bootstrap-utilities.rtl.css`<br> `bootstrap-utilities.min.css`<br> `bootstrap-utilities.rtl.min.css` | — | — | — | Included |
|
||||
| `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
|
||||
{{< /bs-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">—</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< bs-table "table" >}}
|
||||
| JS Files | Popper |
|
||||
| --- | --- |
|
||||
| `bootstrap.bundle.js`<br> `bootstrap.bundle.min.js`<br> | Included |
|
||||
| `bootstrap.js`<br> `bootstrap.min.js`<br> | – |
|
||||
{{< /bs-table >}}
|
||||
|
||||
## Bootstrap source code
|
||||
|
||||
|
||||
@@ -23,48 +23,14 @@ When completed, you'll be able to run the various commands provided from the com
|
||||
|
||||
Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm start</code>
|
||||
</td>
|
||||
<td>
|
||||
Compiles CSS and JavaScript, builds the documentation, and starts a local server.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm run dist</code>
|
||||
</td>
|
||||
<td>
|
||||
Creates the <code>dist/</code> directory with compiled files. Requires <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm test</code>
|
||||
</td>
|
||||
<td>
|
||||
Runs tests locally after running <code>npm run dist</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>npm run docs-serve</code>
|
||||
</td>
|
||||
<td>
|
||||
Builds and runs the documentation locally.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{{< bs-table >}}
|
||||
| Task | Description |
|
||||
| --- | --- |
|
||||
| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
|
||||
| `npm run dist` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). |
|
||||
| `npm test` | Runs tests locally after running `npm run dist` |
|
||||
| `npm run docs-serve` | Builds and runs the documentation locally. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-npm-starter.md" >}}
|
||||
@@ -78,7 +44,7 @@ Dart Sass uses a rounding precision of 10 and for efficiency reasons does not al
|
||||
|
||||
## Autoprefixer
|
||||
|
||||
Bootstrap uses [Autoprefixer][autoprefixer] (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.
|
||||
Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (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.
|
||||
|
||||
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details.
|
||||
|
||||
@@ -99,5 +65,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
|
||||
## Troubleshooting
|
||||
|
||||
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
|
||||
|
||||
[autoprefixer]: https://github.com/postcss/autoprefixer
|
||||
|
||||
Reference in New Issue
Block a user