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

Tutorial di base Bootstrap

Plugin Bootstrap

面板 Bootstrap

Questo capitolo spiega i pannelli Bootstrap. I componenti dei pannelli sono utilizzati per inserire componenti DOM in una scatola. Creare un pannello di base richiede di aggiungere la classe a un elemento <div> .panel e class .panel-default 即可，如下面的示例所示：

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　è sufficiente, come mostrato negli esempi seguenti:
	<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">
　　　　　　　　Questo è un pannello di base
　　　　</ul>
</ul>
</div>
</body>
</html>

看看测试 ‹/›

<title>Bootstrap Esempio - Pannello Predefinito</title>

Titolo del pannello

  • Possiamo aggiungere un titolo al pannello in due modi: .panel-heading class puoi aggiungere facilmente un contenitore di titolo al pannello.

  • Usando .panel-title usando la classe <h1>-<h6> per aggiungere titoli predefiniti.

Ecco un esempio che dimostra questi due modi:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Titolo del pannello</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">
		Titolo del pannello senza title
	</ul>
	<div class="panel-body">
		Contenuto del pannello
	</ul>
</ul>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2 class="panel-title">
			Titolo del pannello con title
		</h2>
	</ul>
	<div class="panel-body">
		Contenuto del pannello
	</ul>
</ul>
</div>
</body>
</html>

看看测试 ‹/›

Piè di pagina del pannello

Puoi aggiungere un piè di pagina nel pannello semplicemente mettendo i pulsanti o il testo secondario all'interno di una classe .panel-footer all'interno del <div> è sufficiente. Ecco un esempio che dimostra questo:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Piè di pagina del pannello</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">
		Questo è un pannello di base
	</ul>
	<div class="panel-footer">Piè di pagina del pannello</div>
</ul>
</div>
</body>
</html>

看看测试 ‹/›

I piè di pagina del pannello non ereditano il colore e i bordi dai pannelli con colori di contesto perché non sono contenuti in primo piano.

Pannello con Colori di Contesto

Usa le classi di stato di contesto panel-primary, panel-success, panel-info, panel-warning, panel-dangerper impostare un pannello con colori di contesto, ecco un esempio:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Pannello con Colori di Contesto</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">Titolo del pannello</h2>
	</ul>
	<div class="panel-body">
		Questo è un pannello di base
	</ul>
</ul>
<div class="panel panel-success">
	<div class="panel-heading">
		<h2 class="panel-title">Titolo del pannello</h2>
	</ul>
	<div class="panel-body">
		Questo è un pannello di base
	</ul>
</ul>
<div class="panel panel-info">
	<div class="panel-heading">
		<h2 class="panel-title">Titolo del pannello</h2>
	</ul>
	<div class="panel-body">
		Questo è un pannello di base
	</ul>
</ul>
<div class="panel panel-warning">
	<div class="panel-heading">
		<h2 class="panel-title">Titolo del pannello</h2>
	</ul>
	<div class="panel-body">
		Questo è un pannello di base
	</ul>
</ul>
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2 class="panel-title">Titolo del pannello</h2>
	</ul>
	<div class="panel-body">
		Questo è un pannello di base
	</ul>
</ul>
</div>
</body>
</html>

看看测试 ‹/›

Pannello con Tabella

Per creare una tabella senza bordi nel pannello, possiamo utilizzare la classe .tableSupponiamo che ci sia un <div> contenente .panel-bodypuoi aggiungere un ulteriore bordo in alto alla tabella per separarla. Se non contiene .panel-body del <div>, il componente si muoverà senza interruzioni dal titolo del pannello alla tabella.

Ecco un esempio che dimostra questo:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Pannello con Tabella</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">Titolo del pannello</h2>
	</ul>
	<div class="panel-body">
		Questo è un pannello di base
	</ul>
	<table class="table">
		<th>Prodotto</th><th>Prezzo</th>
		<tr><td>Prodotto A</td><td>200</td></tr>
		<tr><td>Prodotto B</td><td>400</td></tr>
	</table>
</ul>
<div class="panel panel-default">
	<div class="panel-heading">Titolo del pannello</div>
	<table class="table">
		<th>Prodotto</th><th>Prezzo</th>
		<tr><td>Prodotto A</td><td>200</td></tr>
		<tr><td>Prodotto B</td><td>400</td></tr>
	</table>
</ul>
</div>
</body>
</html>

看看测试 ‹/›

Pannello con elenco di gruppi

Possiamo includere elenchi di gruppi in qualsiasi pannello aggiungendo .panel e .panel-default Le classi per creare pannelli e aggiungere elenchi di gruppi nei pannelli. Puoi usare Elenchi di gruppi Impara a creare elenchi di gruppi in un capitolo.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Pannello con elenco di gruppi</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">Titolo del pannello</div>
	<div class="panel-body">
		<p>Questo è un contenuto di pannello di base. Questo è un contenuto di pannello di base.</p>
			Questo è un contenuto di pannello di base. Questo è un contenuto di pannello di base.
			Questo è un contenuto di pannello di base. Questo è un contenuto di pannello di base.
			Questo è un contenuto di pannello di base. Questo è un contenuto di pannello di base.
		</p>
	</ul>
	<ul class="list-group">
		<li class="list-group-item">Registrazione dominio gratuita</li>
		<li class="list-group-item">Spazio di hosting gratuito 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组合列表 Bootstrap