ブートストラップ4-ジャンボトロン

説明

Jumbotronコンポーネントは、見出しのサイズを増やし、ランディングページのコンテンツに多くのマージンを追加します。デフォルトでは、ジャンボトロンは重要な情報を表示する明るい灰色のボックスで表示されます。

基本的なジャンボトロン

以下の例に示すように、_。jumbotron_クラスを<div>要素に追加して、ジャンボトロンを作成します-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Jumbotron</h2>
         <div class = "jumbotron">
            <h2>Welcome To Tutorials Point!</h2>
            <p class = "lead">
               Our mission is to deliver Simply Easy Learning with clear, crisp, and
               to-the-point content on a wide range of technical and non-technical
               subjects without any preconditions and impediments.
            </p>

            <hr class = "my-4">
            <p>20 million readers read 50 million pages every month.</p>
            <a class = "btn btn-info btn-sm" href = "#" role = "button">Read more</a>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

流体ジャンボトロン

次の例に示すように、。jumbotron-fluid_クラスを使用して角のない全幅のジャンボトロンを作成し、ジャンボトロン内に.container_または_.container-fluid_クラスを追加します-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "jumbotron jumbotron-fluid">
         <div class = "container">
            <h2>Fluid jumbotron</h2>
            <p class = "lead">This occupies the entire horizontal space.</p>
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

Bootstrap4-jumbotron

目次

ブートストラップ4-ジャンボトロン

説明

基本的なジャンボトロン

例

出力

流体ジャンボトロン

例

出力