codestory

Die Anleitung zu Bootstrap Jumbotron

  1. Bootstrap Jumbotron

1. Bootstrap Jumbotron

Jumbotron ist eine Interface-Element im Bootstrap. Es wird benutzt um einen Raum für die meist wichtige Inhalt der Seite zu machen. Es hilft , die Aufmerksamkeit des Benutzer zu gewinnen.
Bootstrap Jumbotron
<div class="jumbotron">
   <h1>Bootstrap Tutorials</h1>
   <p>
      Bootstrap is a free, open-source and is the most popular HTML, CSS,
      and JavaScript framework developed by twitter for creating
      responsive web applications.
   </p>
   <p>
      <a class="btn btn-lg btn-primary" href="#">
      Get started
      </a>
   </p>
</div>
Das volle Beispiel sehen
jumbotron-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Jumbotron</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4>o7planning</h4>

         <div class="jumbotron">
            <h1>Bootstrap Tutorials</h1>
            <p>
               Bootstrap is a free, open-source and is the most popular HTML, CSS,
               and JavaScript framework developed by twitter for creating
               responsive web applications.
            </p>
            <p>
               <a class="btn btn-lg btn-primary" href="#">
               Get started
               </a>
            </p>
         </div>

      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>