Tutorial di base Bootstrap

Plugin Bootstrap

Bootstrap 超大屏幕

Questo capitolo spiega un'altra caratteristica supportata da Bootstrap, lo schermo gigante (Jumbotron). Come suggerisce il nome, questo componente può aumentare la dimensione del titolo e aggiungere più margine (margin) al contenuto della pagina di login. Ecco come utilizzare lo schermo gigante (Jumbotron):

Creare un contenitore con la classe .jumbotron. del contenitore <div>.
Oltre al maggiore <h1>, la spessore del carattere font-weight ridotto a 200.

L'esempio seguente dimostra questo:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap esempio - Schermo gigante (Jumbotron)</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="container">
	<div class="jumbotron">
		<h1>歡迎登錄頁面！</h1>
		<p>這是一個超大屏幕(Jumbotron)的示例。</p>
		<p><a　class="btn　btn-primary　btn-lg"　role="button">
			學習更多</a>
		</p>
	</div>
</div>
</body>
</html>

測試看看 ‹/›

結果如下所示：

Per ottenere uno schermo gigante che occupa tutta la larghezza e senza angoli arrotondati, è necessario applicare a tutti i .container class esterna .jumbotron La classe, come nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Schermo gigante (Jumbotron)</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="jumbotron">
	<div class="container">
		<h1>歡迎登錄頁面！</h1>
		<p>這是一個超大屏幕(Jumbotron)的示例。</p>
		<p><a　class="btn　btn-primary　btn-lg"　role="button">
			學習更多</a>
		</p>
	</div>
</div>
</body>
</html>

測試看看 ‹/›

結果如下所示：

Bootstrap 页面标题 Bootstrap 徽章