Это 21-й день моего участия в Gengwen Challenge, смотрите подробности мероприятия:Обновить вызов

"Bootstrap5 Zero Basic to Proficient" Я Лао Лю оригинал, и стремиться обновлять раздел каждый день.

21.1 Введение в загрузочные карты

Карточки Bootstrap представляют собой гибкий, расширяемый контейнер содержимого с множеством вариантов и опций. Карточки спроектированы таким образом, чтобы использовать как можно меньше меток и стилей, их легче выравнивать и они хорошо сочетаются с другими компонентами Bootstrap. По умолчанию у него нет полей, поэтому его можно добавить в общую категорию интервалов по мере необходимости.

Ниже приведен пример базовой карточки со смешанным содержимым и фиксированной шириной. Карточки, не имеющие фиксированной ширины, естественным образом заполняют всю ширину своего родительского элемента. Это можно легко настроить с помощью различных параметров масштабирования. Ниже приведен простой пример.

<div class="card" style="width: 18rem;">
            <img src="../pic/5.jpg" class="card-img-top" alt="卡片的图片宽度会自动设置">
            <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素</p>
            <a href="#" class="btn btn-primary">这是一个按钮</a>
            </div>
</div>

21.2 Структура карты

21.2.1 Пример полной структуры карты

В общем, мы можем хорошо использовать компонент карты без полной структуры карты.Как показано в приведенном выше примере, полная карта включает в себя верхние и нижние колонтитулы и изображения (здесь ссылается на изображение под заголовком, которое совпадает с карточка имеет одинаковую ширину), основное тело и группу списка из пяти частей, где основное тело может содержать заголовок и текст. Ниже приведен полный пример.На самом деле, в общем случае достаточно использовать один или два элемента карты по мере необходимости.Следующий пример является только демонстрацией, и мы объясним каждую часть функции одну за другой.

 <div class="card" style="width: 18rem;">
        <div class="card-header">
           卡片页眉
        </div>
        <img src="../pic/5.jpg" class="card-img-top" alt="卡片的图片宽度会自动设置">
        <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素
          <img src="../pic/7.jpg" class="card-img-top" alt="卡片主体内的图片">
        </p>
        <a href="#" class="btn btn-primary">这是一个按钮</a>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">列表元素</li>
          <li class="list-group-item">列表元素</li>
          <li class="list-group-item">列表元素</li>
        </ul>
        <div class="card-footer text-muted">
            卡片页脚
        </div>
    </div>

21.2.1 Верхние и нижние колонтитулы карточек

Верхний и нижний колонтитулы не обязательны, текст верхнего и нижнего колонтитула светлее по цвету и немного меньше по размеру шрифта по сравнению с другим содержимым. Кроме того, выравнивание можно настроить через общий класс, а гибкое использование позволяет добиться множества специальных эффектов.

21.2.1.1 Простые карты

<div class="card">
        <h5 class="card-header">通知</h5>
        <div class="card-body">
        <h5 class="card-title">中秋节放假通知</h5>
        <p class="card-text">下周中秋节放假7天，给大家乐活以下.........</p>
        <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>

21.2.1.2 Использование кавычек для известных цитат

      <div class="card">
        <div class="card-header">
        名言
        </div>
        <div class="card-body">
        <blockquote class="blockquote mb-0">
        <p>只有诗人同圣徒才会坚信，在沥青路面上辛勤浇水会培植出百合花来。</p>
        <footer class="blockquote-footer">威廉· 萨默赛特·毛姆的 <cite title="Source Title">《月亮和六便士》</cite></footer>
        </blockquote>
        </div>
        </div>

21.2.1.3 Совместное использование верхних и нижних колонтитулов

      <div class="card text-center">
        <div class="card-header">
        名著推荐
        </div>
        <div class="card-body">
        <h5 class="card-title">《红楼梦》</h5>
        <p class="card-text">
            《红楼梦》是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作，
        中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景，
        以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线，
        刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。
        通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机。
    </p>
        <a href="#" class="btn btn-primary">马上阅读</a>
        </div>
        <div class="card-footer text-muted">
        2 days ago
        </div>
        </div>

21.2.2 Использование изображений

21.2.2.1 Изображение сверху или снизу

Картинка выводится вверху или внизу карточки через класс card-img-top или card-img-bottom, а внизу две карточки, одна картинка сверху и одна картинка снизу.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="card mb-2">
        <img src="../pic/5.jpg" class="card-img-top" alt="...">
        <div class="card-body">
        <h5 class="card-title">软发布 Win11 </h5>
        <p class="card-text">T
          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        
        <div class="card">
        <div class="card-body">
        <h5 class="card-title">飞利浦推出4K显示器</h5>
        <p class="card-text">飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
        </p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <img src="../pic/7.jpg" class="card-img-bottom" alt="...">
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

21.2.2.2 Изображение в качестве фона карты

Преобразуйте изображение в фон карты и наложите текст карты. В зависимости от изображения вы можете выбрать дополнительные стили или общие категории.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="card card bg-dark text-white">
        <img src="../pic/7.jpg" class="card-img" alt="...">
        <div class="card-body card-img-overlay">
        <h5 class="card-title">微软发布 Win11 </h5>
        <p class="card-text">
          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Обратите внимание, что мы добавили черный фон на карточку с помощью bg-dark, text-white установили белый шрифт, а card-img-overlay установили цвет фона в card-body. Вы также можете использовать card-img-overlay напрямую без тела карты, как указано выше.

21.2.2.3 Изображение слева

Использование сеток в сочетании с универсальными классами позволяет отображать карты горизонтально. В приведенном ниже примере мы используем g-0 для удаления пробелов в сетке и используемcol-md-*Категория делает карту горизонтальной после точки останова md. В зависимости от содержимого карты могут потребоваться некоторые дополнительные настройки.

<div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
        <div class="col-md-4">
        <img src="../pic/3.jpg" alt="..." class="w-100">
        </div>
        <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">春夏秋冬皆自然</h5>
          <p class="card-text">
            春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简...
          </p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        </div>
        </div>

Конечно, лучше настроиться на ширину изображения, иначе оно склонно к переполнению.

21.2.3 Тело карты

21.2.3.1 Заголовок и подзаголовок

Строительный блок карты — это .card-body. Используйте его, когда вам нужно заполнить карту.

• существует<h*>добавить меткуcard-titleиспользовать название карты.
• существует<h*>добавить в тегcard-subtitleиспользовать субтитры.

Если элементы card-title и card-subtitle размещены внутри тела карточки, они будут хорошо выровнены.

21.2.3.2 Текстовое содержимое и ссылки

Текстовое содержимое может размещать любые html-элементы и компоненты начальной загрузки, такие как кнопки и т. д., в теге a.card-linkИ сделать соединения рядом друг с другом.

      <div class="card" style="width: 18rem;">
        <div class="card-body">
        <h5 class="card-title">微软发布 Win11</h5>
        <h6 class="card-subtitle mb-2 text-muted">科技动态</h6>
        <p class="card-text">
          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <a href="#" class="card-link">了解详情</a>
        <a href="#" class="card-link">下载试用</a>
        </div>
        </div>

21.2.4 Группы списка

Группы списков очень просты в использовании

<div class="card" style="width: 18rem;">
        <div class="card-header text-center">
        晚会活动
        </div>
        <ul class="list-group list-group-flush">
        <li class="list-group-item">歌舞</li>
        <li class="list-group-item">男生独唱</li>
        <li class="list-group-item">小品</li>
        </ul>
        </div>

21.2.5 Смешанные стили

Смешивайте и сочетайте несколько форматов контента, чтобы создавать карточки, которые вам нужны. В следующем примере стили изображений, блоки, стили текста и группы списков помещаются в одну карточку фиксированной ширины.

<div class="card" style="width: 18rem;">
<img src="../pic/cap.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

21.3 Разметка и ширина карт

Предустановки карточек не имеют определенной начальной ширины, если не указано иное, они будут иметь ширину 100%.

21.3.1 Работа с сетками

Используйте сетки, чтобы упаковать карты в столбцы и строки по мере необходимости. Следует отметить, что карточка по умолчанию — это одна строка каждой карточки.Чтобы отображать несколько карточек подряд, несколько карточек должны быть помещены в DIV-контейнер, а общая ширина карточки в каждой строке не может превышать ширину экрана. Сеткаrow-cols-*То же самое касается карт. Кроме того, карта по умолчанию имеет одинаковую ширину, а высота автоматически регулируется в соответствии с содержимым, но если у карты есть нижний колонтитул, высота будет автоматически настроена на то же самое. Полный пример приведен ниже.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="row">
        <div class="col-sm-6">
        <div class="card">
        <div class="card-body">
          <h5 class="card-title">微软发布 Win11</h5>
          <p class="card-text">
            软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>

        <div class="col-sm-6">
        <div class="card">
        <div class="card-body">
          <h5 class="card-title">飞利浦推出4K显示器</h5>
          <p class="card-text">
            飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

21.3.2 Использование универсальных классов

Используйте универсальный класс с изменяемым размером, чтобы быстро установить ширину карты.

使用网格 
使用网格，根据需要在列和行中包装卡片。<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="card w-75">
        <div class="card-body">
            <h5 class="card-title">微软发布 Win11</h5>
            <p class="card-text">
              软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        
        <div class="card w-50">
        <div class="card-body">
            <h5 class="card-title">飞利浦推出4K显示器</h5>
            <p class="card-text">
              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Следует отметить, что значение ширины здесь должно быть задано заранее, а пресет содержит 25%, 50%, 75%, 100% и авто, а не пишется произвольно. Дополнительные сведения см. в разделе «Общий размер класса (размер)» китайского руководства по Bootstrap5.

21.3.3 Использование пользовательского CSS

Используйте пользовательский CSS в таблице стилей или используйте встроенные стили для установки ширины, которая является более гибкой и может использовать rem, px и процент.

使用网格 
使用网格，根据需要在列和行中包装卡片。<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="card" style="width: 30rem;">
        <div class="card-body">
            <h5 class="card-title">微软发布 Win11</h5>
            <p class="card-text">
              软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        
        <div class="card" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">飞利浦推出4K显示器</h5>
            <p class="card-text">
              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

21.3.4 Вызов карт

Выравнивание текста любой карточки можно изменить для всей или отдельных частей карточки с помощью категории «Выравнивание текста». По умолчанию все они выровнены по левому краю (начало текста), и вы можете использовать общие классы card-text, text-end, чтобы выровнять их по центру или по правому краю. Общий класс можно использовать в контейнере карточек или отдельно в любой части, например в заголовке, верхнем и нижнем колонтитулах, теле и т. д. При одновременном использовании он будет охватывать все содержимое.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="row">
        <div class="col-sm-4">
        <div class="card text-center">
        <div class="card-header">
                整体居中
        </div>    
        <div class="card-body">
          <h5 class="card-title">微软发布 Win11</h5>
          <p class="card-text">
            软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>

        <div class="col-sm-4">
            <div class="card">
            <div class="card-header text-center"">
                    页眉、标题居中
            </div>    
            <div class="card-body">
              <h5 class="card-title  text-center">微软发布 Win11</h5>
              <p class="card-text">
                软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
              </p>
              <a href="#" class="btn btn-primary">了解详情</a>
            </div>
            </div>
            </div>
            
            <div class="col-sm-4">
                <div class="card text-center">
                <div class="card-header">
                        整体居中中标题居左
                </div>    
                <div class="card-body">
                  <h5 class="card-title text-start">微软发布 Win11</h5>
                  <p class="card-text">
                    软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
                  </p>
                  <a href="#" class="btn btn-primary">了解详情</a>
                </div>
                </div>
                </div>
        
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

21.4 Карточки с вкладками

Используйте компонент навигации Bootstrap, чтобы добавить некоторую навигацию в заголовок (или блок) вашей карты для эффекта вкладок.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="card text-center">
        <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link" aria-current="true" href="#" data-bs-toggle="tab" data-bs-target="#nav-hot">热门新闻</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#nav-home">国内新闻</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">国外新闻</a>
        </li>
        </ul>
        </div>
           <div class="tab-content">
                <div class="card-body tab-pane  fade" id="nav-hot">
                <h5 class="card-title">热点新闻</h5>
                <p class="card-text">热点新闻</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                
                <div class="card-body tab-pane  fade show active" id="nav-home">
                        <h5 class="card-title">国内新闻</h5>
                        <p class="card-text">国内热点新闻</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>    
            </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Для приведенного выше кода его можно заменить капсульной навигацией всего двумя заменами.

 <ul class="nav nav-tabs card-header-tabs">

заменить

 <ul class="nav nav-pills card-header-pills">

все

data-bs-toggle="tab"

заменить

data-bs-toggle="pill"

21.5 Стили карт

Карточки содержат множество параметров для настройки фона, границ и цветов.

21.5.1 Фон и цвета

Используйте общие категории текста и фона, чтобы изменить внешний вид ваших карточек.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="d-flex">  
      <div class="card text-white bg-primary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Primary</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-secondary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Secondary</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-success" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Success</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-danger" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Danger</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
      </div>
    </div>
        <div class="d-flex">
        
        <div class="card text-dark bg-warning" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Warning</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-info" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Info</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-light" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Light</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-dark" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Dark</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
      </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

21.5.2 Границы и цвета

<div class="d-flex">
      <div class="card border-primary mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-primary">
        <h5 class="card-title">Primary 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-secondary mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-secondary">
        <h5 class="card-title">Secondary 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-success">
        <h5 class="card-title">Success 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-danger mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-danger">
        <h5 class="card-title">Danger 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        
    </div>
    <div class="d-flex">
        <div class="card border-warning mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h5 class="card-title">Warning 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-info mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h5 class="card-title">Info 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-light mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h5 class="card-title">Light 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-dark mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body text-dark">
            <h5 class="card-title">Dark 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
    </div>

Из-за нехватки места показана только передняя часть изображения в рамке.

21.5.2 Общий класс Mixin

Вы также можете изменить границы верхнего и нижнего колонтитула карты по мере необходимости и использовать bg-transparent для удаления их фонового цвета.

 <div class="card border-success mb-3" style="max-width: 26rem;">
        <div class="card-header bg-transparent border-success">页眉</div>
        <div class="card-body text-success">
        <h5 class="card-title">Success卡片标题</h5>
        <p class="card-text">
            注意card-body使用了 text-success"，页脚使用了bg-transparent border-success
        </p>
        </div>
        <div class="card-footer bg-transparent border-success">页脚</div>
        </div>
       

Сегодняшний курс здесь, пожалуйста, следуйте за мной и изучите использование компонента карусели изображений Bootstrap5 Carousel в разделе 22 «Bootstrap5 Zero Basic to Mastery», первоначально написанного Лао Лю.

Если эта статья оказалась для вас полезной, не забудьте поставить лайк!