English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap

Bootstrap плагины

Панели Bootstrap

Эта глава расскажет о Bootstrap панели (Panels). Компонент панели используется для вставки DOM компонента в коробку. Создание базовой панели требует только добавления класса к элементу <div> .panel и class .panel-default Таким образом, как показано в следующем примере:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Bootstrap 示епль - панель по умолчанию</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="panel　panel-default">
　　　　<div　class="panel-body">
　　　　　　　　Это базовая панель
　　　　</div>
</div>
</body>
</html>
Проверьте это ‹/›

Результаты представлены следующим образом:

Заголовок панели

Таким образом, как показано в следующем примере:

  • Заголовок панели Можем добавить заголовок панели двумя способами: Класс

  • Использование .panel-title Добавить заголовки с предопределенным стилем с помощью класса <h1>-<h6>.

Примеры ниже демонстрируют два способа:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 示епль - заголовок панели</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="panel　panel-default">
	<div　class="panel-heading">
		Без заголовка title
	</div>
	<div　class="panel-body">
		Содержимое панели
	</div>
</div>
<div　class="panel　panel-default">
	<div　class="panel-heading">
		<h2 class="panel-title">
			Панель с заголовком title
		</h2>
	</div>
	<div　class="panel-body">
		Содержимое панели
	</div>
</div>
</body>
</html>
Проверьте это ‹/›

Результаты представлены следующим образом:

Подножка панели

Мы можем добавить подножку в панель, просто поместив кнопку или дополнительный текст в класс .panel-footer В <div>.

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 示епль - подножка панели</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="panel　panel-default">
	<div　class="panel-body">
		Это базовая панель
	</div>
	<div class="panel-footer">Подножка панели</div>
</div>
</body>
</html>
Проверьте это ‹/›

Результаты представлены следующим образом:

Ниже панель не наследует цвет и рамку от панели с контекстным цветом, так как это не контент на переднем плане.

Панель с контекстным цветом

Использование контекстных классов panel-primary, panel-success, panel-info, panel-warning, panel-dangerДля создания панели с контекстным цветом используется, примеры приведены ниже:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 示епль - панель с контекстным цветом</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
	<div　class="panel-heading">
		<h2　class="panel-title">Заголовок панели</h2>
	</div>
	<div　class="panel-body">
		Это базовая панель
	</div>
</div>
<div class="panel panel-success">
	<div　class="panel-heading">
		<h2　class="panel-title">Заголовок панели</h2>
	</div>
	<div　class="panel-body">
		Это базовая панель
	</div>
</div>
<div class="panel panel-info">
	<div　class="panel-heading">
		<h2　class="panel-title">Заголовок панели</h2>
	</div>
	<div　class="panel-body">
		Это базовая панель
	</div>
</div>
<div class="panel panel-warning">
	<div　class="panel-heading">
		<h2　class="panel-title">Заголовок панели</h2>
	</div>
	<div　class="panel-body">
		Это базовая панель
	</div>
</div>
<div class="panel panel-danger">
	<div　class="panel-heading">
		<h2　class="panel-title">Заголовок панели</h2>
	</div>
	<div　class="panel-body">
		Это базовая панель
	</div>
</div>
</body>
</html>
Проверьте это ‹/›

Результаты представлены следующим образом:

Панель с таблицей

Чтобы создать безрамочную таблицу в панели, мы можем использовать класс .tableПредположим, что у нас есть <div> содержащий .panel-bodyМы можем добавить дополнительную рамку в верхнюю часть таблицы для разделения. Если не включить .panel-body Если <div> находится в <div>.

Пример ниже демонстрирует это:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 示епль - панель с таблицей</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="panel　panel-default">
	<div　class="panel-heading">
		<h2　class="panel-title">Заголовок панели</h2>
	</div>
	<div　class="panel-body">
		Это базовая панель
	</div>
	<table　class="table">
		<th>Продукт</th><th>Цена　</th>
		<tr><td>Продукт A</td><td>200</td></tr>
		<tr><td>Продукт B</td><td>400</td></tr>
	</table>
</div>
<div　class="panel　panel-default">
	<div　class="panel-heading">Заголовок панели</div>
	<table　class="table">
		<th>Продукт</th><th>Цена　</th>
		<tr><td>Продукт A</td><td>200</td></tr>
		<tr><td>Продукт B</td><td>400</td></tr>
	</table>
</div>
</body>
</html>
Проверьте это ‹/›

Результаты представлены следующим образом:

Панель с списком

Мы можем включать списки в любую панель, добавляя в элемент <div> .panel и .panel-default Используйте классы для создания панели и добавления в нее списка. Вы можете использовать Список Узнайте, как создать список, в этой главе.

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Панель с списком</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="panel　panel-default">
	<div　class="panel-heading">Заголовок панели</div>
	<div　class="panel-body">
		<p>Это базовое содержимое панели. Это базовое содержимое панели.
			Это базовое содержимое панели. Это базовое содержимое панели.
			Это базовое содержимое панели. Это базовое содержимое панели.
			Это базовое содержимое панели. Это базовое содержимое панели.
		</p>
	</div>
	<ul　class="list-group">
		<li　class="list-group-item">Бесплатная регистрация доменного имени</li>
		<li　class="list-group-item">Бесплатное хранение пространства Windows</li>
		<li class="list-group-item">Количество изображений</li>
		<li class="list-group-item">Поддержка 24*7</li>
		<li class="list-group-item">Стоимость обновления每年</li>
	</ul>
</div>
</body>
</html>
Проверьте это ‹/›

Результаты представлены следующим образом:

Bootstrap WellГруппы списков Bootstrap