2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

v5: Forms update (#28450)

* Initial spike of consolidated form checks

* Stub out forms rearrangement

- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS

* Move input group Sass file to forms subdir

* Start to split and move the docs around

* Simpler imports

* Copyediting

* delete overview file

* Remove commented out code

* remove the custom-forms import

* rewrite flex-check as form-check, replace all custom properties

* Remove old forms doc

* stub out new subpage link section

* update migration guide

* Update nav, forms overview in page nav, and descriptions

* fix check bg position

* fix margin-top calculation

* rename .custom-select to .form-select

* Update validation styles for new checks

* add some vertical margin, fix inline checks

* fix docs examples

* better way to do this contents stuff, redo the toc while i'm at it

* page restyle for docs while here

* un-callout that, edit text

* redo padding on toc

* fix toc

* start to cleanup checks docs

* Rewrite Markdown tables into HTML

* Redesign tables, redo their docs

* Replace Open Iconic icons with custom Bootstrap icons

* Redesign the docs navbar, add a subheader, redo the sidebar

* Redesign docs homepage a bit

* Simplify table style overrides for docs tables

* Simplify docs typography for page titles and reading line length

* Stub out icons page

* Part of sidebar update, remove migration from nav.yml

* Move toc CSS to separate partial

* Change appearance of overview page

* fix sidebar arrow direction

* Add footer to docs layout

* Update descriptions

* Drop the .form-group class for margin utilities

* Remove lingering form-group-margin-bottom var

* improve footer spacing

* add headings to range page

* uncomment form range css

* Rename .custom-range to .form-range

* Drop unused docs var

* Uncomment the comment

* Remove unused variable

* Fix radio image sizing

* Reboot update: reset horizontal ul and ol padding

* de-dupe IDs

* tweak toc styles

* nvm, fix dropdown versions stuff

* remove sidebar nav toggle for now

* broken html

* fix more broken html, move css

* scss linting

* comment out broken helper docs

* scope styles

* scope styles

* Fixes #25540 and fixes #26407 for v5 only

* Update sidebar once more

* Match new sidenav order

* fix syntax error

* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696

* rename back

* fix size and alignment

* rename that back too
This commit is contained in:
Mark Otto
2019-07-12 16:52:33 -05:00
committed by GitHub
parent 50f97710eb
commit aaf03bdc9e
66 changed files with 3160 additions and 2916 deletions
@@ -24,10 +24,10 @@ 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 table-bordered table-striped">
<table class="table">
<thead>
<tr>
<td></td>
<th></th>
<th>Chrome</th>
<th>Firefox</th>
<th>Safari</th>
@@ -38,27 +38,27 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
<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>
<td>Supported</td>
<td>Supported</td>
<td class="text-muted">&mdash;</td>
<td>v5.0+</td>
<td>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>
<td>Supported</td>
<td>Supported</td>
<td>Supported</td>
<td class="text-muted">&mdash;</td>
<td>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>
<th scope="row" class="text-nowrap">Windows 10 Mobile</th>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td>Supported</td>
</tr>
</tbody>
</table>
@@ -67,10 +67,10 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
Similarly, the latest versions of most desktop browsers are supported.
<table class="table table-bordered table-striped">
<table class="table">
<thead>
<tr>
<td></td>
<th></th>
<th>Chrome</th>
<th>Firefox</th>
<th>Internet Explorer</th>
@@ -82,21 +82,21 @@ Similarly, the latest versions of most desktop browsers are supported.
<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>
<td>Supported</td>
<td>Supported</td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td>Supported</td>
<td>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, IE11</td>
<td class="text-success">Supported</td>
<td class="text-success">Supported</td>
<td class="text-danger">Not supported</td>
<td>Supported</td>
<td>Supported</td>
<td>IE11 only</td>
<td>Supported</td>
<td>Supported</td>
<td class="text-muted">&mdash;</td>
</tr>
</tbody>
</table>
@@ -19,15 +19,50 @@ When completed, you'll be able to run the various commands provided from the com
## Using npm scripts
Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes the following commands and tasks:
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:**
| Task | Description |
| --- | --- |
| `npm run dist` | `npm run dist` creates the `/dist/` directory with compiled files. **Uses [Sass](https://sass-lang.com/), [Autoprefixer][autoprefixer], and [terser](https://github.com/terser-js/terser).** |
| `npm test` | Same as `npm run dist` plus it runs tests locally |
| `npm run docs` | Builds and lints CSS and JavaScript for docs. You can then run the documentation locally via `npm run docs-serve`. |
Run `npm run` to see all the npm scripts.
<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-js/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</code>
</td>
<td>
Builds and lints CSS and JavaScript for docs. You can then run the documentation locally via <code>npm run docs-serve</code>.
</td>
</tr>
</tbody>
</table>
## Autoprefixer
@@ -48,7 +48,7 @@ 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 table-bordered">
<table class="table">
<thead>
<tr>
<th scope="col">CSS files</th>
@@ -64,30 +64,30 @@ Bootstrap includes a handful of options for including some or all of our compile
<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>
<td>Included</td>
<td>Included</td>
<td>Included</td>
<td>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="{{< docsref "/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="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td>
<td><a class="text-muted" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
<td><a class="text-muted" href="{{< docsref "/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="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
<td class="bg-light text-muted">Not included</td>
<td class="bg-light text-muted">Not included</td>
<td class="text-muted">&mdash;</td>
<td><a class="text-muted" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
<td class="text-muted">&mdash;</td>
<td class="text-muted">&mdash;</td>
</tr>
</tbody>
</table>
@@ -96,7 +96,7 @@ Bootstrap includes a handful of options for including some or all of our compile
Similarly, we have options for including some or all of our compiled JavaScript.
<table class="table table-bordered">
<table class="table">
<thead>
<tr>
<th scope="col">JS files</th>
@@ -109,14 +109,14 @@ Similarly, we have options for including some or all of our compiled JavaScript.
<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>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="text-muted">&mdash;</td>
</tr>
</tbody>
</table>