mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-28 15:50:01 +02:00
Add v5.0.0-beta3 docs (#33440)
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.80.0">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.0">
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||||
@@ -289,6 +290,7 @@
|
||||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||||
@@ -396,34 +398,37 @@
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
<li><a href="#v500-beta3">v5.0.0-beta3</a>
|
||||
<ul>
|
||||
<li><a href="#components">Components</a></li>
|
||||
<li><a href="#javascript">JavaScript</a></li>
|
||||
<li><a href="#utilities">Utilities</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#v500-beta2">v5.0.0-beta2</a>
|
||||
<ul>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#utilities">Utilities</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#javascript">JavaScript</a></li>
|
||||
<li><a href="#utilities-1">Utilities</a></li>
|
||||
<li><a href="#javascript-1">JavaScript</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#v500-beta1">v5.0.0-beta1</a>
|
||||
<ul>
|
||||
<li><a href="#rtl">RTL</a>
|
||||
<ul>
|
||||
<li><a href="#sass-1">Sass</a>
|
||||
<li><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li><a href="#components">Components</a></li>
|
||||
<li><a href="#utilities-1">Utilities</a></li>
|
||||
<li><a href="#components-1">Components</a></li>
|
||||
<li><a href="#utilities-2">Utilities</a></li>
|
||||
<li><a href="#mixins">Mixins</a></li>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#javascript-1">JavaScript</a></li>
|
||||
<li><a href="#sass-2">Sass</a></li>
|
||||
<li><a href="#utilities-2">Utilities</a></li>
|
||||
<li><a href="#components-1">Components</a>
|
||||
<li><a href="#javascript-2">JavaScript</a></li>
|
||||
<li><a href="#sass-1">Sass</a></li>
|
||||
<li><a href="#utilities-3">Utilities</a></li>
|
||||
<li><a href="#components-2">Components</a>
|
||||
<ul>
|
||||
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||||
<li><a href="#toasts">Toasts</a></li>
|
||||
@@ -434,22 +439,22 @@
|
||||
<li><a href="#v500-alpha3">v5.0.0-alpha3</a>
|
||||
<ul>
|
||||
<li><a href="#browser-support">Browser support</a></li>
|
||||
<li><a href="#sass-3">Sass</a></li>
|
||||
<li><a href="#sass-2">Sass</a></li>
|
||||
<li><a href="#reboot">Reboot</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#utilities-3">Utilities</a></li>
|
||||
<li><a href="#utilities-4">Utilities</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#v500-alpha2">v5.0.0-alpha2</a>
|
||||
<ul>
|
||||
<li><a href="#sass-4">Sass</a></li>
|
||||
<li><a href="#sass-3">Sass</a></li>
|
||||
<li><a href="#docs">Docs</a></li>
|
||||
<li><a href="#layout">Layout</a></li>
|
||||
<li><a href="#reboot-1">Reboot</a></li>
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#forms-1">Forms</a></li>
|
||||
<li><a href="#components-2">Components</a>
|
||||
<li><a href="#components-3">Components</a>
|
||||
<ul>
|
||||
<li><a href="#badges">Badges</a></li>
|
||||
<li><a href="#buttons-1">Buttons</a></li>
|
||||
@@ -465,20 +470,20 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#helpers">Helpers</a></li>
|
||||
<li><a href="#utilities-4">Utilities</a></li>
|
||||
<li><a href="#utilities-5">Utilities</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#v500-alpha1">v5.0.0-alpha1</a>
|
||||
<ul>
|
||||
<li><a href="#browser-support-1">Browser support</a></li>
|
||||
<li><a href="#sass-5">Sass</a></li>
|
||||
<li><a href="#javascript-2">JavaScript</a></li>
|
||||
<li><a href="#sass-4">Sass</a></li>
|
||||
<li><a href="#javascript-3">JavaScript</a></li>
|
||||
<li><a href="#color-system">Color system</a></li>
|
||||
<li><a href="#grid-and-layout">Grid and layout</a></li>
|
||||
<li><a href="#content-reboot-etc">Content, Reboot, etc</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#forms-2">Forms</a></li>
|
||||
<li><a href="#components-3">Components</a>
|
||||
<li><a href="#components-4">Components</a>
|
||||
<ul>
|
||||
<li><a href="#disabled-states">Disabled states</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
@@ -493,7 +498,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#accessibility">Accessibility</a></li>
|
||||
<li><a href="#utilities-5">Utilities</a></li>
|
||||
<li><a href="#utilities-6">Utilities</a></li>
|
||||
<li><a href="#grid">Grid</a></li>
|
||||
<li><a href="#misc">Misc</a></li>
|
||||
<li><a href="#docs-1">Docs</a></li>
|
||||
@@ -508,16 +513,35 @@
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
<h2 id="v500-beta2">v5.0.0-beta2</h2>
|
||||
<h3 id="sass">Sass</h3>
|
||||
<h4 id="utilities">Utilities</h4>
|
||||
<h2 id="v500-beta3">v5.0.0-beta3</h2>
|
||||
<h3 id="components">Components</h3>
|
||||
<ul>
|
||||
<li>Added new <a href="/docs/5.0/components/list-group/#numbered"><code>.list-group-numbered</code> modifier</a> to list groups.</li>
|
||||
</ul>
|
||||
<h3 id="javascript">JavaScript</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<p>All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:</p>
|
||||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">modal</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Modal</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">)</span>
|
||||
<span class="kd">var</span> <span class="nx">dropdown</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Dropdown</span><span class="p">(</span><span class="s1">'[data-bs-toggle="dropdown"]'</span><span class="p">)</span>
|
||||
</code></pre></div></li>
|
||||
<li>
|
||||
<p>Dropped <code>flip</code> option for dropdown plugin in favor of native popper configuration. You can now disable the flipping behavior by passing an empty array for <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"><code>fallbackPlacements</code></a> option in <a href="https://popper.js.org/docs/v2/modifiers/flip/">flip</a> modifier.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="utilities">Utilities</h3>
|
||||
<ul>
|
||||
<li>Dropped the <code>0</code> entry in <code>$border-widths</code> map to remove the duplicated <code>.border-0</code> class.</li>
|
||||
</ul>
|
||||
<h2 id="v500-beta2">v5.0.0-beta2</h2>
|
||||
<h3 id="utilities-1">Utilities</h3>
|
||||
<ul>
|
||||
<li>Renamed <code>--aspect-ratio</code> to <code>--bs-aspect-ratio</code> to be consistent with other custom properties.</li>
|
||||
<li>Extended the <code>.visually-hidden-focusable</code> helper to also work on containers, using <code>:focus-within</code>.</li>
|
||||
<li><code>bootstrap-utilities.css</code> now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.</li>
|
||||
<li>Extended form validation states customization capabilities. Added three new optional parameters to the <code>form-validation-state</code> mixin: <code>tooltip-color</code>, <code>tooltip-bg-color</code>, <code>focus-box-shadow</code>. These parameters can be set in the <code>$form-validation-states</code> map. <a href="https://github.com/twbs/bootstrap/pull/31757">See #31757</a>.</li>
|
||||
</ul>
|
||||
<h3 id="javascript">JavaScript</h3>
|
||||
<h3 id="javascript-1">JavaScript</h3>
|
||||
<ul>
|
||||
<li>Restored <code>offset</code> option for Dropdown, Popover and Tooltip plugins.</li>
|
||||
<li>The default value for the <code>fallbackPlacements</code> is changed to <code>['top', 'right', 'bottom', 'left']</code> for better placement of popper elements.</li>
|
||||
@@ -528,9 +552,9 @@
|
||||
<h2 id="v500-beta1">v5.0.0-beta1</h2>
|
||||
<h3 id="rtl">RTL</h3>
|
||||
<p><strong>The RTL feature is still experimental and will probably evolve according to user feedback.</strong> Spotted something or have an improvement to suggest? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>, we’d love to get your insights.</p>
|
||||
<h4 id="sass-1">Sass</h4>
|
||||
<h4 id="sass">Sass</h4>
|
||||
<p>Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — <code>start</code> and <code>end</code> in lieu of <code>left</code> and <code>right</code>.</p>
|
||||
<h5 id="components">Components</h5>
|
||||
<h5 id="components-1">Components</h5>
|
||||
<ul>
|
||||
<li>Renamed <code>.dropleft</code> and <code>.dropright</code> to <code>.dropstart</code> and <code>.dropend</code>.</li>
|
||||
<li>Renamed <code>.dropdown-menu-*-left</code> and <code>.dropdown-menu-*-right</code> to <code>.dropdown-menu-*-start</code> and <code>.dropdown-menu-*-end</code>.</li>
|
||||
@@ -538,7 +562,7 @@
|
||||
<li>Renamed <code>.bs-tooltip-left</code> and <code>.bs-tooltip-right</code> to <code>.bs-tooltip-start</code> and <code>.bs-tooltip-end</code>.</li>
|
||||
<li>Renamed <code>.carousel-item-left</code> and <code>.carousel-item-right</code> to <code>.carousel-item-start</code> and <code>.carousel-item-end</code>.</li>
|
||||
</ul>
|
||||
<h5 id="utilities-1">Utilities</h5>
|
||||
<h5 id="utilities-2">Utilities</h5>
|
||||
<ul>
|
||||
<li>Renamed <code>.left-*</code> and <code>.right-*</code> to <code>.start-*</code> and <code>.end-*</code>.</li>
|
||||
<li>Renamed <code>.float-left</code> and <code>.float-right</code> to <code>.float-start</code> and <code>.float-end</code>.</li>
|
||||
@@ -565,7 +589,7 @@
|
||||
<li>Renamed <code>$form-check-inline-margin-right</code> to <code>$form-check-inline-margin-end</code>.</li>
|
||||
<li>Renamed <code>$form-select-feedback-icon-padding-right</code> to <code>$form-select-feedback-icon-padding-end</code>.</li>
|
||||
</ul>
|
||||
<h3 id="javascript-1">JavaScript</h3>
|
||||
<h3 id="javascript-2">JavaScript</h3>
|
||||
<ul>
|
||||
<li>Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use <code>data-bs-toggle</code> instead of <code>data-toggle</code>.</li>
|
||||
<li>Updated Popper to v2.x:
|
||||
@@ -575,15 +599,15 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="sass-2">Sass</h3>
|
||||
<h3 id="sass-1">Sass</h3>
|
||||
<ul>
|
||||
<li>Renamed <code>scale-color()</code> function to <code>shift-color()</code> to avoid collision with Sass’s own color scaling function.</li>
|
||||
</ul>
|
||||
<h3 id="utilities-2">Utilities</h3>
|
||||
<h3 id="utilities-3">Utilities</h3>
|
||||
<ul>
|
||||
<li>Added new <code>.translate-middle-x</code> & <code>.translate-middle-y</code> utilities to horizontally or vertically center absolute/fixed positioned elements.</li>
|
||||
</ul>
|
||||
<h3 id="components-1">Components</h3>
|
||||
<h3 id="components-2">Components</h3>
|
||||
<h4 id="breadcrumbs">Breadcrumbs</h4>
|
||||
<ul>
|
||||
<li>Simplified the default appearance of breadcrumbs by removing <code>padding</code>, <code>background-color</code>, and <code>border-radius</code>.</li>
|
||||
@@ -598,7 +622,7 @@
|
||||
<ul>
|
||||
<li>Dropped support for Microsoft Edge Legacy. See <a href="#browser-support-1">here</a> for the previous browser support changes.</li>
|
||||
</ul>
|
||||
<h3 id="sass-3">Sass</h3>
|
||||
<h3 id="sass-2">Sass</h3>
|
||||
<ul>
|
||||
<li>The color system which worked with <code>color-level()</code> and <code>$theme-color-interval</code> was removed in favor of a new color system. All <code>lighten()</code> and <code>darken()</code> functions in our codebase are replaced by <code>tint-color()</code> and <code>shade-color()</code>. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The <code>scale-color()</code> (changed to <code>shift-color()</code> in Beta 1) will either tint or shade a color depending on whether its weight parameter is positive or negative. <a href="https://github.com/twbs/bootstrap/pull/30622">See #30622</a> for more details.</li>
|
||||
<li>Spinners now honor <code>prefers-reduced-motion: reduce</code> by slowing down animations. <a href="https://github.com/twbs/bootstrap/pull/31882">See #31882</a>.</li>
|
||||
@@ -618,7 +642,7 @@
|
||||
<li>File inputs now use the <code>.form-control</code> class and don’t require JavaScript, additional HTML, or additional classes. <a href="https://github.com/twbs/bootstrap/pull/31955">See #31955</a>.</li>
|
||||
<li>Added <code>cursor:pointer</code> to <code>.form-control-color</code> color inputs.</li>
|
||||
</ul>
|
||||
<h3 id="utilities-3">Utilities</h3>
|
||||
<h3 id="utilities-4">Utilities</h3>
|
||||
<ul>
|
||||
<li><strong>Text utilities:</strong>
|
||||
<ul>
|
||||
@@ -632,7 +656,7 @@
|
||||
<li>Removed <code>.rounded-sm</code> and <code>rounded-lg</code>, and introduced <code>.rounded-0</code> to <code>.rounded-3</code>. <a href="https://github.com/twbs/bootstrap/pull/31687">See #31687</a>.</li>
|
||||
</ul>
|
||||
<h2 id="v500-alpha2">v5.0.0-alpha2</h2>
|
||||
<h3 id="sass-4">Sass</h3>
|
||||
<h3 id="sass-3">Sass</h3>
|
||||
<ul>
|
||||
<li>Added default parameters to each <code>border-radius</code> mixin. <a href="https://github.com/twbs/bootstrap/pull/31571">See #31571</a>.</li>
|
||||
<li>Updated the next breakpoint when targeting only the <code>xs</code> breakpoint. <a href="https://github.com/twbs/bootstrap/pull/31500">See #31500</a>.</li>
|
||||
@@ -668,7 +692,7 @@
|
||||
<ul>
|
||||
<li><a href="https://github.com/twbs/bootstrap/pull/31383">#31383</a>: Resized checks and radios to be <code>1em</code> instead of <code>1.25em</code> in an effort to make them scale better with custom <code>$font-size-base</code> values and more.</li>
|
||||
</ul>
|
||||
<h3 id="components-2">Components</h3>
|
||||
<h3 id="components-3">Components</h3>
|
||||
<h4 id="badges">Badges</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/twbs/bootstrap/pull/31132">#31132</a>: Increased default padding for badges from <code>.25em</code>/<code>.5em</code> to <code>.35em</code>/<code>.65em</code>.</li>
|
||||
@@ -741,7 +765,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="utilities-4">Utilities</h3>
|
||||
<h3 id="utilities-5">Utilities</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/twbs/bootstrap/pull/31280">#31280</a>: Added new <a href="/docs/5.0/utilities/position/#arrange-elements">position utilities</a> for <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. Values include <code>0</code>, <code>50%</code>, and <code>100%</code> for each property.
|
||||
<ul>
|
||||
@@ -768,7 +792,7 @@
|
||||
<li>Dropped support for Chrome < 60</li>
|
||||
<li>Dropped support for Android < 6</li>
|
||||
</ul>
|
||||
<h3 id="sass-5">Sass</h3>
|
||||
<h3 id="sass-4">Sass</h3>
|
||||
<p>Changes to our source Sass files and compiled CSS.</p>
|
||||
<ul>
|
||||
<li>Removed <code>hover</code>, <code>hover-focus</code>, <code>plain-hover-focus</code>, and <code>hover-focus-active</code> mixins. Use regular CSS syntax for these moving forward. <a href="https://github.com/twbs/bootstrap/pull/28267">See #28267</a>.</li>
|
||||
@@ -806,7 +830,7 @@
|
||||
<li>The <code>box-shadow()</code> mixin now better supports <code>none</code> and <code>null</code> with multiple arguments. Now you can pass multiple arguments with either value and get the expected output. <a href="https://github.com/twbs/bootstrap/pull/30394">See #30394</a>.</li>
|
||||
<li>Each <code>border-radius()</code> mixin now has a default value. You can now call these mixins without specifying a border radius value and the <code>$border-radius</code> variable will be used. <a href="https://github.com/twbs/bootstrap/pull/31571">See #31571</a></li>
|
||||
</ul>
|
||||
<h3 id="javascript-2">JavaScript</h3>
|
||||
<h3 id="javascript-3">JavaScript</h3>
|
||||
<p>Changes to our source and compiled JavaScript files.</p>
|
||||
<ul>
|
||||
<li>Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.</li>
|
||||
@@ -822,7 +846,7 @@
|
||||
<h3 id="grid-and-layout">Grid and layout</h3>
|
||||
<p>Changes to any layout tools and our grid system.</p>
|
||||
<ul>
|
||||
<li>Dropped the <code>.media</code> component as it can be built with utility classes. <a href="https://github.com/twbs/bootstrap/pull/28265">See #28265</a>.</li>
|
||||
<li>Dropped the <code>.media</code> component as it can be built with utility classes. <a href="https://github.com/twbs/bootstrap/pull/28265">See #28265</a> and the <a href="/docs/5.0/utilities/flex/#media-object">flex utilities page for an example</a>.</li>
|
||||
<li>Remove <code>position: relative</code> from grid columns.</li>
|
||||
<li>The horizontal padding is added to the direct children in a row instead of the columns themselves.
|
||||
<ul>
|
||||
@@ -833,6 +857,7 @@
|
||||
<li>The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions.</li>
|
||||
<li>The gutter width is now set in <code>rem</code> and decreased from <code>30px</code> to <code>1.5rem</code> (24px).</li>
|
||||
<li><code>bootstrap-grid.css</code> now only applies <code>box-sizing: border-box</code> to the column instead of resetting the global box-sizing. This way the grid system can be used, even if <code>box-sizing: border-box</code> is not applied to each element.</li>
|
||||
<li>Removed <code>.no-gutters</code> in favor of new gutter spacing classes. Use <code>.g-0</code> instead. <a href="/docs/5.0/layout/gutters/">Read the gutter docs for more details.</a></li>
|
||||
</ul>
|
||||
<h3 id="content-reboot-etc">Content, Reboot, etc</h3>
|
||||
<p>Changes to Reboot, typography, tables, and more.</p>
|
||||
@@ -896,7 +921,7 @@
|
||||
<li>Form labels now require the <code>.form-label</code> class. Sass variables are now available to style form labels to your needs. <a href="https://github.com/twbs/bootstrap/pull/30476">See #30476</a></li>
|
||||
<li><code>.form-text</code> no longer sets <code>display</code>, but does set <code>color</code> and <code>font-size</code>. So instead of <code><small class="form-text text-muted"></code> you should now use <code><div class="form-text"></code>.</li>
|
||||
</ul>
|
||||
<h3 id="components-3">Components</h3>
|
||||
<h3 id="components-4">Components</h3>
|
||||
<ul>
|
||||
<li>Unified <code>padding</code> values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our <code>$spacer</code> variable. <a href="https://github.com/twbs/bootstrap/pull/30564">See #30564</a>.</li>
|
||||
</ul>
|
||||
@@ -948,7 +973,7 @@
|
||||
<ul>
|
||||
<li>Unlike the old <code>.sr-only-focusable</code>, which only worked in combination with <code>.sr-only</code>, <code>.sr-only-focusable</code> can be used as a standalone class without <code>.sr-only</code>. <a href="https://github.com/twbs/bootstrap/pull/28720">See #28720</a>.</li>
|
||||
</ul>
|
||||
<h3 id="utilities-5">Utilities</h3>
|
||||
<h3 id="utilities-6">Utilities</h3>
|
||||
<h3 id="grid">Grid</h3>
|
||||
<ul>
|
||||
<li>Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is <code>.order-5</code> instead of <code>.order-12</code>. <a href="https://github.com/twbs/bootstrap/pull/28874">See #28874</a>.</li>
|
||||
@@ -983,11 +1008,11 @@
|
||||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
|
Reference in New Issue
Block a user