2
0
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:
Mark Otto
2022-03-14 00:38:04 -07:00
committed by GitHub
parent 8fe82c7176
commit a9a89debc7
22 changed files with 468 additions and 1956 deletions
@@ -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 &amp; WebView</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Android</th>
<td>Supported</td>
<td>Supported</td>
<td class="text-muted">&mdash;</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">&mdash;</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| | Chrome | Firefox | Safari | Android Browser &amp; WebView |
| --- | --- | --- | --- | --- |
| **Android** | Supported | Supported | <span class="text-muted">&mdash;</span> | v6.0+ |
| **Windows** | Supported | Supported | Supported | <span class="text-muted">&mdash;</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">&mdash;</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">&mdash;</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">&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>
{{< 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">&mdash;</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