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

Что нового в 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>

Выход:

В этом примере мы увидим, что когда мы примен

Оцените статью
bestprogrammer.ru
Добавить комментарий