What are the new features of bootstrap 5

Time:2022-1-25

Bootstrap is one of the most popular CSS libraries. It allows developers to easily use beautiful styles and components and create responsive websites. Using bootstrap can save developers time, especially for components used in almost every project.

Bootstrap 5 (the current major version, released in May 2021) has brought a lot of changes and improvements, including adding new components, new classes, new styles of old components, updated browser support, deleting some old components, and more.

What are the new features of bootstrap 5

In this article, we will introduce the changes, deletions, and the most exciting new content in bootstrap 5.

When to use bootstrap (when not)
Bootstrap advertises itself as “the most popular framework for building responsive and mobile priority sites in the world” and has 152k stars on GitHub. I don’t think this is too much. Especially for beginners, bootstrap is a good way to start creating modern and clean websites. It can easily implement complex, mobile first designs and provide many components you may need in multiple projects.

Bootstrap’s learning curve is very low, which is very suitable for static websites that do not need to build steps, because you can directly reference the library from bootstrap’s CDN. This is in sharp contrast to some other popular CSS frameworks that may be optimized for the use of bundles or task runners.

However, you should also know that bootstrap is not a silver bullet. For inexperienced people, bootstrap can easily produce chaotic and complex tags. In terms of kilobytes, it is also a relatively heavy Library (although it is improving every release), so if you use only one or two of its functions, it may not be the best choice. Like any abstraction, if you have a good grasp of the underlying technology and can make informed decisions about when to use it, it will be very helpful.

Upgrade from bootstrap 4 to 5
Upgrading from bootstrap 4 to 5 is generally easy. Most of the components in bootstrap 4, their classes and utility classes are still available in bootstrap 5. When migrating, the main thing you should pay attention to is whether the class or component you are using has been deleted. If they are deleted, you can replace them with utility classes or use other methods to achieve the same results. The second thing you should focus on is the conversion from data attributes to data BS – in components that require JavaScript as part of their functionality. (we will cover this in detail in the next section.)

If you use the sass file of bootstrap, some variables and mixins are renamed. Bootstrap 5 has an extensive and detailed section, all about customization, as well as detailed information about sass variables and mixins of each component, on their respective document pages.

Content of change
Bootstrap 5 brings core changes to bootstrap as a library, including changes in required dependencies, browser support, etc. It also makes changes to the components and classes that we have been using in previous versions.

JQuery is no longer a dependency
Compared with previous versions, jQuery is no longer a dependency of bootstrap. Now, you can make full use of bootstrap without it, but you still need Popper js。 This change makes it easier to use bootstrap in projects that do not need or use jQuery — for example, when using bootstrap with react.

If bootstrap is part of your website, you can still use jQuery. If bootstrap detects jQuery in the window object, it will automatically add all components to the jQuery plug-in system. Therefore, if you migrate from V4 to V5, you don’t need to worry about this change, and you can still use jQuery and bootstrap if necessary.

But what if you use jQuery in your website, but you don’t want bootstrap to use jQuery? You can do this by adding the attribute data BS no jQuery to the body element of the document:

<body data-bs-no-jquery=”true”>
</body>
How does bootstrap work without jQuery? For example, in V4, you can use the following code in JavaScript to create a toast element.

$(‘.toast’).toast()
In bootstrap 5, if your website already uses jQuery, you can use the same code to create a toast element. If there is no jQuery, you need to create a toast element using code like the following:

const toastElList = […document.querySelectorAll(‘.toast’)]
const toastList = toastElList.map((toastEl) => {
returnnew bootstrap.Toast(toastEl)
})
This is just using native JavaScript to query the documents with The element of the toast class, and then use new bootstrap Toast () initializes a toast component on the element.

Browser support changes
Before V4, bootstrap supported Internet Explorer (ie) 10 and 11. Starting from bootstrap 5, ie support has been completely cancelled. Therefore, if your website needs to support ie, you may need to be careful when migrating to V5.

Other changes supported by the browser include:

Firefox and chrome are now supported from version 60

Safari and IOS support now starts with version 12

Android browser and WebView support now starts with version 6

Changes to data properties
Bootstrap 5 changes the way data attributes are named, which are usually used by components that use JavaScript as part of their functionality. Previously, the data attributes of most components that rely on some JavaScript functions began with data -. For example, to create a tooltip component in bootstrap 4:

<button
type=”button”
class=”btn btn-secondary”
data-toggle=”tooltip”
data-placement=”top”

Tooltip
</button>
Note the usage of data toggle and data placement. In bootstrap 5, the data attributes of these components now start with data BS to facilitate the naming of bootstrap attributes. For example, to create a tooltip component in bootstrap 5:

<button
type=”button”
class=”btn btn-secondary”
data-bs-toggle=”tooltip”
data-bs-placement=”top”

Tooltip
</button>
Instead of using data toggle and data placement, we use data BS toggle and data BS placement. If you use JavaScript to create components in bootstrap, you may not need to make any changes. However, if your component only relies on data attributes to operate, you need to change all data attributes starting with data to data BS.

Fixed some bugs
In the document under “browsers and devices” in bootstrap 4, some bugs on browsers are listed. These bugs are no longer listed in the same list of bootstrap 5. The list includes the following:

On IOS, the mouse over style is applied to elements of touch events, which is not desirable because it is considered an unexpected behavior.

Used in Safari 8 and above Container causes the font to become smaller when printing.

Border radius is covered by validation feedback (but can be solved by adding an additional. Has validation class).

The list of bugs and problems in the bootstrap 4 document also details the bugs that appear in browser versions that are no longer supported.

Other changes
There are more changes, either small or not causing drastic and noteworthy changes. These changes are:

Bootstrap 5 now uses Popper v2. Make sure to upgrade your Popper version. Popper V1 will no longer work because bootstrap 5 requires @ popperjs / core instead of the previous Popper js。

Now, bootstrap 5 can be used in the browser as a module, using the bootstrap version built as an ECMAScript module.

Since libsass and node sass (used in bootstrap 4) are now deprecated, bootstrap 5 uses dart sass to compile the source sass file into CSS.

In the past, in order to hide an element, but let the auxiliary technology find it, it can be used SR only class. Now this class is replaced with visually-hidden。

In the past, in order to hide an interactive element but let assistive technology find it, you needed to use it at the same time SR only and SR only focusable class. In bootstrap 5, you only need to use Visually hidden focusable without visually-hidden。

Blockquotes with named sources are now wrapped by < figure > elements. The following is the current example of blockquotes in bootstrap 5:

What are the new features of bootstrap 5

In previous versions, table styles were inherited. This means that if one table is nested in another table, the nested table inherits the parent table. In bootstrap 5, table styles are independent of each other, even if they are nested.

Border utilities now supports tables. This means that you can now use the border color tool to change the border color of the table. The following is an example of using table border utilities in bootstrap 5.

What are the new features of bootstrap 5

The default style for breadcrumbs has been changed to remove the default gray background, fill, and border radius in previous releases. The following is an example of the breadcrumb style in bootstrap 5:

What are the new features of bootstrap 5

The naming of classes that use left and right to refer to locations that use start and end has changed. For example, in the drop-down list Dropleft and Replace dropright with Dropstart and dropend 。

Similar to the previous point, utility classes that use L for left and R for right now use s for start and E for end, respectively. For example mr-Now it is me-

For range input The form control range class is now form-range。

Gutters is now set to REM instead of PX.

. no gutters has been renamed G-0, as part of the newly added gutters class (more on it in later chapters).

Links are now underlined by default, even if there is no hover.

The name of the custom form element class has been changed from Custom – * becomes part of the form component class. For example Custom check is Replaced by form check Custom select is Replaced by form select, and so on.

Now you need to add the tag form-label。

Alert, breadcrumbs, cards, drop-down menus, list groups, modes, pop ups, and tooltips now use the same fill values, using the $spacer variable.

The default padding in the badge element is now changed from. 25em /. 5em to. 35em /. 65em.

The wrapper of the toggle button is used for check boxes and radio buttons. Now the tag has also been simplified. In bootstrap 4, the check box of the toggle button is realized by the following marks:

<div class=”btn-group-toggle” data-toggle=”buttons”>
<label class=”btn btn-secondary active”>

<input type="checkbox" checked> Checked

</label>
</div>
In bootstrap 5, it can be done in a simpler way:

<input type=”checkbox” class=”btn-check” id=”btn-check” autocomplete=”off”>
<label class=”btn btn-primary” for=”btn-check”>Checked</label>
The active and hover states of the buttons add contrast in color.

The close button class is now available from Rename close to BTN close and use the SVG icon instead of & times.

The drop-down split line is now darker for better contrast.

Navbar content should now be wrapped in container elements. For example, in bootstrap 4:

<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
Navbar

</nav>
In bootstrap 5, it becomes:

<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<div class=”container-fluid”>

<a class="navbar-brand" href="#">Navbar</a>
...

</div>
</nav>
In the Popover component The arrow class is now Popover arrow replacement, in the tooltip component The arrow class is now Tooltip arrow replacement.

The default toast duration is changed to 5 seconds.

The default value of fallbackplacements in tooltips, drop-down menus and pop-up components has been changed to array [‘top ‘,’ right ‘,’ bottom ‘,’ left ‘].

. text monospace renamed to font-monospace。

.font-weight-Renamed to fw-,.font-style-Renamed to fst-

. rounded SM and Rounded LG has now been rounded by a series of classes from 0 to 3 Replaced by rounded – *.

What’s new?
Finally, in version 5, bootstrap added many exciting new features to its library. Some of these changes include new features, new supported concepts, new components, new utility classes, and so on.

Responsive font size is now enabled by default
Responsive font size (RFs) has appeared in previous bootstrap versions, but is disabled by default. Bootstrap 5 enables RFs by default, making the fonts in bootstrap more responsive. RFs is an auxiliary project created by bootstrap. It was originally designed to scale and resize fonts in response. Now, it can do the same for attributes such as margin, padding and box shadow.

What it does is basically calculate the most appropriate values according to the size of the browser, which are translated into calculation functions at compile time. Using RFs also abandons the previous practice of using PX and uses REM because it helps to achieve better responsiveness.

If you use sass files in bootstrap, you can now use mixins made by RFs, including font size, margins, padding, etc., which allows you to ensure that your components and styles are responsive.

Right to left support
Bootstrap 5 uses rtlcss to increase left to right (RTL) support. Since bootstrap is used worldwide, providing RTL support out of the box is an important step. For this reason, bootstrap 5 abandoned specific direction naming (for example, left and right) and used start and end instead. This makes bootstrap flexible enough to handle both left to right (LTR) and RTL websites. For example Dropleft is now dropstart,. ml-Now it is ms-, wait.

In order for bootstrap to recognize and apply RTL style on your website, you need to set dir of < HTML > to RTL and add a lang attribute with website RTL language. For example, lang = “ar”.

Finally, you need to include the RTL CSS file of bootstrap:

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css” integrity=”sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N” crossorigin=”anonymous”>
In this way, your website can support RTL.

New component
Bootstrap 5 brings some new components to the library. Some of these components are part of other components and are now stand-alone components.

Accordion accordion
Previously, accordion was part of the collapsible component, not its own component. In bootstrap 5, accordion is a new component. Accordion has a new class, namely Accordion, which contains a list of accordion projects. In addition, accordion has a new style compared with the previous style in bootstrap 4.

Offcanvas overlay sidebar
Another new component is offcanvas, which allows you to create an overlapping sidebar. This sidebar is usually used to display menus on small devices. You can use it in LTR Off canvas start stands for left Off canvas top stands for above Offcanvas end stands for the right side in LTR, and Off canvas bottom stands for the bottom and places it on either side of the page. You can also specify whether offcanvas should have a background.

Floating label
Floating label is a new component of form component. It allows you to create an input whose label looks like a placeholder at first, and then when the input receives focus, the label will float to the top of the input, higher than the value. It also applies to < Select > elements and < textarea > elements.

key word:Front end training Web front end training

Recommended Today

Building the basic static page of Vue chat room

design sketch HTML: <template>     <view>         <view>             <scroll-view scroll-y=”true”>                 <div> <!– Message notification — >                     <div>                         <div>2021-12-28 16:50:00</div> < div > XXX processed this work order < / div >                     </div> <!– Left — >                     <!– <div></div> –> <!– Right — >                     <!– <div></div> –>               </div>               <div>                 <div>                     <image src=”../../static/logo.png”>                     <div>                         <div>2021-12-28 16:50:00</div> < […]