Bootstrap-Jumbotron

A Jumbotron ist eine leichte Komponente, die die Größe der Überschriften und die Breite des Ansichtsfensters vergrößert, um den wichtigsten Inhalt oder die wichtigsten Informationen auf der Website anzuzeigen oder um Highlights der Webseite anzuzeigen. Wir können Jumbotron erstellen, indem wir verwenden .Jumbotron Klasse innerhalb des div-Containers.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Wir können ein Jumbotron erstellen, wie im folgenden Beispiel gezeigt. Wenn Sie Fragen zu Bootstrap Jumbotron haben, schreiben Sie diese bitte in den Kommentarbereich.

Bootstrap-Jumbotron-Beispiel

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Bootstrap Jumbotron</h2>
<div  >
<h2>Welcome to Bootstrap</h2>
<p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
<p><a href="https://javabeat.net/bootstrap-environment-setup/" target="_blank"  >Get More Details</a></p>
</div>
</div>
</body>
</html>
  • Führen Sie die Bootstrap-Jumbotron-Beispieldemo aus

Beispiel für eine Bootstrap-Jumbotron-Demo

Wir können ein Jumbotron ohne abgerundete Ecken erstellen und ein Jumbotron mit voller Breite erstellen .Jumbotron Klasse außerhalb der .Container Klasse wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<div  >
<h2>Welcome to Bootstrap</h2>
<p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
<p><a href="https://javabeat.net/bootstrap-environment-setup/" target="_blank"  >Get More Details</a></p>
</div>
</div>
</body>
</html>
  • Führen Sie die Bootstrap-Jumbotron-Beispieldemo aus

Beispiel für Bootstrap Jumbotron demo1

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen