Введение в панели начальной загрузки
Содержание данных должно быть чистым, аккуратным и подходящим. Наличие пространства в содержимом, красочный верхний и нижний колонтитулы, а также границы для содержимого выглядят привлекательно. Привлекательный контент легко читается и понимается. Панель Bootstrap работает точно так же по содержанию. Он используется для рамки для контента с определенными отступами. Он работает для контента, верхнего колонтитула, а также в другом цвете. Базовая панель начальной загрузки работает с использованием класса .panel в элементе div, при этом также необходим этот класс .panel-default.
Пример:
THIS IS A DEFAULT PANEL
Выход:
Типы панелей начальной загрузки
Группы делятся на различные категории и цели, а именно: Содержимое имеет заголовок, тело и нижнюю часть. Чтобы создать элегантный контент и стиль с целью, на панели появляются следующие категории:
1. Панель с заголовком
В заголовке панели поле рамки окружено заголовком контента и телом контента с отступом формата. Панель заголовка add class = «panel-heading» и тело содержимого add class = «panel-body».
Код:
Content Heading
Content Body
Выход:
Вы можете добавить class = «panel-title», чтобы изменить заголовок контента отдельно. Этот класс используется редко, потому что класс заголовка панели изменяет все стили самостоятельно.
2. Панель с нижним колонтитулом
В нижнем колонтитуле панели - рамка, окруженная нижним колонтитулом и телом контента с отступом формата. Панель нижнего колонтитула add class = «panel-footer» и тело содержимого add class = «panel-body».
Код:
Content Body
Content Footer
Выход:
3. Группа Группа
Эта панель используется для привязки множества панелей одновременно. Удаляет поля нижней панели и создает группу панелей.
Код:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
Выход:
4. Панели с контекстными классами
Чтобы получить более содержательный контекст, загрузочные панели проектируют разные классы для контекста. Каждый контекстный заголовок класса имеет свой цвет, чтобы показать влияние контекста. Эти классы панели ниже с их примерами и выходами,
- .panel-default: это панель по умолчанию, используемая для контекста.
Код:
Content Heading
Content Body
Выход:
- .panel-primary: этот класс, используемый для основного контекста, означает основной контекст.
Код:
Content Heading with panel-primary class /div>
Content Body2
Выход:
- .panel-success: этот класс используется, когда некоторый контекст имеет значение успеха.
Код:
Content Heading with panel-success class
Content Body3
Выход:
- .panel-info: Этот класс используется, когда некоторый контекст имеет информативный характер.
Код:
Content Heading with panel-info class
Content Body4
Выход:
- .panel-warning: Этот класс используется, когда в некотором контексте есть значение предупреждающего знака.
Код:
Content Heading with panel-warning class
Content Body5
Выход:
- .panel-danger: Этот класс используется, когда некоторый контекст имеет значение опасности и хочет указать.
Код:
Content Heading with panel-danger class
Content Body6
Выход:
Примеры панелей начальной загрузки
Ниже приведены примеры панели начальной загрузки, подробно объясненные
Пример № 1: Простая панель начальной загрузки
Это простой пример панели начальной загрузки по умолчанию, в котором размещены заголовок панели, нижний колонтитул панели и тело описания.
Код:
Content Heading
Content Body
Panel body for context
Content Footer
Выход:
Пример №2: Панель начальной загрузки с таблицей
- В этом примере получим вывод таблицы с помощью панели начальной загрузки. Стол может быть изменен, чтобы выглядеть элегантно. В следующем примере и выводе приводится таблица с использованием панели начальной загрузки.
- В этом примере нужен класс таблицы для создания таблицы. Это делает основной и класс заголовка панели сохраняет имя таблицы.
- Класс таблицы имеет класс тела панели. В этой таблице размещены заголовок таблицы и данные таблицы.
Код:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
