Карточка в Bootstrap 4 представляет собой прямоугольник с рамкой и некоторым отступом вокруг его содержимого. Он включает параметры верхних и нижних колонтитулов, содержимого, цветов и т. д.
John Doe
Пример текста Пример текста. Джон Доу — архитектор и инженер
См. профиль
Базовая карточка
Базовая карточка создается с помощью класса .card и содержимого внутри
карта имеет .card-body класс:
Базовая карта
Пример
Базовый
card
Попробуйте сами »
Если вы знакомы с Bootstrap 3, карточки заменят старые панели, колодцы и эскизы.
Верхний и нижний колонтитулы
Содержимое
Класс .card-header добавляет к карточке заголовок, а класс . card-footer добавляет к карточке нижний колонтитул:
Пример
Заголовок
Содержание
Нижний колонтитул
Попробуйте сами »
Контекстные карточки
.bg-success , .bg-info , .bg-warning ,
.bg-danger , .bg-secondary , .bg-dark и .bg-light .
Example
Basic card
Primary card
Success card
Info card
Warning card
Danger card
Secondary card
Dark card
Light card
Try это сам »
Заголовки, текст и ссылки
Название карты
Пример текста. Какой-то пример текста.
Ссылка на картуДругая ссылка
Используйте . card-title , чтобы добавить названия карт к любой
элемент заголовка.
Класс .card-text используется для удаления нижних полей для элемента
, если он
последний ребенок (или единственный) внутри .card-body . Класс .card-link добавляет синий
цвет любой ссылки и эффект наведения.
Пример текста Пример текста. Джон Доу — архитектор и инженер
См. профиль
Джейн Доу
Пример текста Пример текста. Джейн Доу — архитектор и инженер
См. профиль
Добавить .card-img-top или . card-img-bottom на , чтобы разместить изображение вверху или внизу внутри карточки. Примечание
что мы добавили изображение за пределами .card-body , чтобы охватить всю ширину:
Добавьте класс .stretched-link к ссылке внутри карточки, и это сделает всю карточку доступной для кликов и наведения (карта будет действовать как ссылка):
John Doe
Пример текста Пример текста. Джон Доу — архитектор и инженер
См. профиль
Джейн Доу
Пример текста Пример текста. Джейн Доу — архитектор и инженер
Класс . card-columns создает сетку из карточек, похожую на каменную кладку (как в pinterest). Макет будет автоматически корректироваться по мере того, как вы будете вставлять новые карты.
Примечание: Карточки отображаются вертикально на маленьких экранах (менее 576 пикселей):
Пример
Некоторые
текст внутри первой карточки
Некоторый текст внутри второго
карта
Некоторый текст внутри третьего
карта
Некоторый текст внутри четвертого
карта
<дел
>
Некоторый текст внутри пятого
карта
Некоторый текст внутри шестого
card
Попробуйте сами »
Колода карт
Некоторый текст внутри первой карточки
Еще немного текста для увеличения высоты 9003
Еще немного текста для увеличения высоты
Еще немного текста для увеличения высоты
Некоторый текст внутри второй карточки
Некоторый текст внутри третьей карточки
Некоторый текст внутри четвертой карточки
Класс . card-deck создает сетку карточек, которые равны по высоте и ширине . Макет будет автоматически корректироваться по мере того, как вы будете вставлять новые карты.
Примечание: Карточки отображаются вертикально на маленьких экранах (менее 576 пикселей):
Пример
<дел> <дел>
Некоторые
текст внутри первой карточки
Некоторый текст внутри второго
карта
Некоторый текст внутри третьего
карта
Некоторый текст внутри четвертого
card
Попробуйте сами »
Группа карточек
Некоторый текст внутри первой карточки
Еще немного текста для увеличения высоты
Еще немного текста для увеличения высоты
Еще немного текста для увеличения высоты
Немного текста внутри второй карточки
Немного текста внутри третьей карточки
Некоторый текст внутри четвертой карты
Класс . card-group аналогичен .card-deck . Единственное отличие состоит в том, что класс .card-group удаляет левое и правое поля между каждой карточкой.
Примечание: Карточки отображаются вертикально на небольших экранах (менее 576 пикселей), С верхним и нижним полем:
Пример
Некоторые
текст внутри первой карточки
Некоторый текст внутри второго
карта
Некоторый текст внутри третьего
карта
Некоторый текст внутри четвертого
карта
Попробуйте сами »
❮ Предыдущая
Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебное пособие по Python Учебное пособие по W3. CSS Учебное пособие по Bootstrap Учебное пособие по PHP Учебное пособие по Java Учебное пособие по C++
Учебное пособие по jQuery
900 Справочник
Ссылка HTML Справочник по CSS Справочник по JavaScript Справочник по SQL Справочник по Python Справочник по W3.CSS Справочник по Bootstrap Справочник по PHP Цвета HTML Справочник по Java Справочник по Angular Справочник по jQuery
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены. W3Schools работает на основе W3.CSS.
Учебное пособие по Bootstrap 4 — Изучите Bootstrap бесплатно
Разблокируйте курсНачните!
Присоединяйтесь к 24472 другим студентам
Войдите, чтобы получить
Доступ к 30+ бесплатным курсам
Интерактивный практический контент
Недели испытаний — код, чтобы выиграть!
Присоединяйтесь к дружному сообществу
Разблокируйте курс
Подпишитесь, чтобы получить доступ!Подпишитесь, чтобы получить доступ!
Подпишитесь, чтобы получить доступ к этому курсу и ВСЕМ другим курсам. Вы получаете 30-дневную гарантию возврата денег, без вопросов.
Подписка включает
Все курсы, буткемпы, пути
100s задач по кодированию
Сертификаты об окончании
Эксклюзивный чат для членов Pro
Подпишитесь прямо сейчас!
с
Нилом Роу
Noob = learn the basics of the topic
Intermediate = reach a professional level.
Advanced = level up your already existing knowledge of the topic»> Уровень курса: средний
В этом учебном пособии вы научите Bootstrap 4 через десять интерактивных скринкастов. Это дает вам быстрый и простой способ изучить новейшие функции Bootstrap, чтобы вы могли использовать их в своем следующем проекте.
Что находится внутри
Learn Bootstrap бесплатно
12 Уроки 55 мин
1. Введение курса — обучение начальной загрузке 4
3:21
2. Реактивные системы сетки
7:42
3.
1:58
4. Отзывчивые навигации
6:27
5. Модалы
5:33
6. Формы
6:18
7. Перечислите группы
5:44
8. Карты
5:08
9. Таблицы
3:18
10. Оповещения
2:51
11. Параметры навигации
4:45
12. Поздравляем!
2:30
You’ll learn
Bootstrap 4 classes
Responsive grid system
Columns and rows
Components
Responsive navbars
Margins
Modals, dialogs
Buttons
Forms
List группы
Значки, таблетки
Карточки
Таблицы
Оповещения
Опции навигации
Ссылки
Предварительные требования
Прежде чем приступить к этому курсу, вы должны иметь базовые знания HTML и CSS. Вот наш рекомендуемый ресурс, который поможет вам освоиться:
Познакомьтесь с вашим учителем
Почему этот курс крут
Bootstrap 4 представляет собой серьезную переработку библиотеки.
Под капотом не только много изменений, но и несколько новых концепций, которые вам нужно обдумать.
В этом учебном курсе вы узнаете все, что вам нужно знать для создания полноценных веб-сайтов с помощью Bootstrap v4.
Независимо от того, работали ли вы с Bootstrap раньше или совсем не знакомы с фреймворком, этот курс поможет вам быстро освоить новейшую версию.
И помните, это не обычный видеокурс, это курс Scrimba! Это означает, что вы можете взаимодействовать с кодом внутри учебных пособий в любое время, что делает обучение намного веселее!
Так что заявите о своем бесплатном месте на этом курсе уже сегодня!
Присоединяйтесь к чату сообщества Scrimba
Учиться в одиночку может быть одиноко. Нажмите здесь, чтобы присоединиться к нашему серверу Discord и общаться с другими учениками Scrimba!
от F до A до Q
Легко ли освоить Bootstrap?
Веб-дизайнеры и веб-разработчики любят Bootstrap, потому что с ним легко и удобно работать.
card-footer 
card-title 
card-img-bottom 
профиль
card-columns 
card-deck 
card-group 
CSS 
Noob = learn the basics of the topic
Intermediate = reach a professional level.
Advanced = level up your already existing knowledge of the topic»> Уровень курса: средний
Вот наш рекомендуемый ресурс, который поможет вам освоиться: