Mục lục

Hướng dẫn sử dụng Bootstrap Jumbotron

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- Bootstrap Jumbotron

Jumbotron là một thành phần giao diện trong Bootstrap, nó được sử dụng để tạo ra một vùng hiển thị một nội dung quan trọng nhất của trang, nó giúp thu hút sự chú ý của người dùng.
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>
Xem ví dụ đầy đủ:
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>

Xem thêm các chuyên mục: