Классы подхода Bootstrap 5

Bootstrap 5 – это популярный интерфейсный фреймворк, используемый веб-разработчиками для создания адаптивных и ориентированных на мобильные устройства веб-сайтов. Одной из самых полезных функций Bootstrap 5 являются классы подхода. Bootstrap 5 Approach Classes — это новый набор классов, представленный в Bootstrap 5, который позволяет разработчикам стилизовать компоненты более гибким и настраиваемым способом. Эти классы предназначены для предоставления простого и интуитивно понятного способа изменения различных свойств компонентов, таких как отступы, поля, выравнивание текста, цвет фона и многое другое.

Классы подхода — это набор утилит Bootstrap, которые можно использовать для добавления пользовательских стилей к элементам без необходимости написания собственного CSS. Эти классы можно использовать для изменения отступов, полей, границ и других стилей.

Синтаксис:

<div class="bootstrap-approach-class-names"> 
    Content... 
</div>

Ниже приведены несколько примеров, демонстрирующих Bootstrap 5, классы подхода.

Пример 1: В этом примере мы изменим цвет фона.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>

    <link href=

"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

        rel="stylesheet"

        integrity=

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

        crossorigin="anonymous">

</head>

<body>

    <div class="text-center">

        <h1 class="text-info">

            GeeksforGeeks

        </h1>



        <div class="bg-primary p-3">

            Primary with contrasting color

        </div>

        <div class="bg-secondary p-3">

            Secondary with contrasting color

        </div>

        <div class="bg-success p-3">

            Success with contrasting color

        </div>

        <div class="bg-danger p-3">

            Danger with contrasting color

        </div>

        <div class="bg-warning p-3">

            Warning with contrasting color

        </div>

        <div class="bg-info p-3">

            Info with contrasting color

        </div>

        <div class="bg-light p-3">

            Light with contrasting color

        </div>

        <div class="bg-dark p-3">

            Dark with contrasting color

        </div>

    </div>

</body>

</html>

Выход:

Пример 2. В этом примере мы увидим, что когда мы применили CSS к элементу div, а также применили классы Bootstrap к этому элементу. CSS не переопределяет классы Bootstrap.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>

    <link href=

"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

          rel="stylesheet"

          integrity=

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

          crossorigin="anonymous">

        <style>

            #mydiv{

                background-color: aquamarine;

            }

        </style>

</head>

<body>

    <div class="mx-auto mt-3 p-4 bg-dark"

         style="width: 350px;"

         id="mydiv">

        <h1 class="text-success">

            GeeksforGeeks

        </h1>

    </div>

</body>

</html>

Выход: