mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-30 15:24:08 +03:00
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
This commit is contained in:
@@ -1018,6 +1018,46 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
|
||||
</select>
|
||||
{% endexample %}
|
||||
|
||||
You may also choose from small and large custom selects to match our similarly sized text inputs.
|
||||
|
||||
{% example html %}
|
||||
<select class="custom-select custom-select-lg">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<select class="custom-select custom-select-sm">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
{% endexample %}
|
||||
|
||||
The `multiple` attribute is also supported:
|
||||
|
||||
{% example html %}
|
||||
<select class="custom-select" multiple>
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
{% endexample %}
|
||||
|
||||
As is the `size` attribute:
|
||||
|
||||
{% example html %}
|
||||
<select class="custom-select" size="3">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
{% endexample %}
|
||||
|
||||
### File browser
|
||||
|
||||
The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
|
||||
|
||||
@@ -210,7 +210,7 @@ When modals become too long for the user's viewport or device, they scroll indep
|
||||
|
||||
### Vertically centered
|
||||
|
||||
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
|
||||
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
||||
|
||||
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
|
||||
@@ -586,7 +586,7 @@ Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `
|
||||
|
||||
## Captions
|
||||
|
||||
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||||
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
|
||||
|
||||
{% example html %}
|
||||
<table class="table">
|
||||
|
||||
@@ -11,6 +11,8 @@ toc: true
|
||||
While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.
|
||||
|
||||
- Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code.
|
||||
- Changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-indicator` for the fill and gradient and `.custom-control-indicator::before` handles the icon.
|
||||
- The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the `node_modules` folder, you should adapt your workflow.
|
||||
- Updated selector for input-based button groups. Instead of `[data-toggle="buttons"] { }` for style and behavior, we use the `data` attribute just for JS behaviors and rely on a new `.btn-group-toggle` class for styling.
|
||||
|
||||
## Beta 2 changes
|
||||
|
||||
Reference in New Issue
Block a user