Các thành phần trong bootstrap 4

Các thành phần trong bootstrap 4 thì rất nhiều, bạn dùng chúng để tạo giao diện cho trang. Sau đây là các components thường dùng trong bootstrap 4

1. Alert

Alert là hiện ra 1 thông báo cho user xem. Thông báo có thể ở những mức độ thông tin khác nhau như success, warning, danger…Các class có thể dùng : alert-success , alert-info, alert-warning , alert-danger , alert-primary , alert-secondary , alert-light , alert-dark

a. Xem demo và lấy code mẫu

Vào https://getbootstrap.com/components/  => Alert

b. Ví dụ

<div class="alert alert-success" >
    <strong>Lưu đơn hàng thành công!</strong> Cảm ơn bạn đã mua hàng.
</div>
<div class="alert alert-info">
    <strong>Thông tin!</strong> Đơn hàng của bạn có số tiền quá nhỏ.
</div>
<div class="alert alert-warning">
    <b>Báo động!</b> Việc chỉnh quyền, phải thoát ra vào lại mới có tác dụng.
</div>
<div class="alert alert-danger">
    <strong>Nguy hiểm!</strong> Nếu xóa loại tin, các tin trong đó sẽ mất hết.
</div>

 c. Thêm nội dung

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

2. Badges

Thường dùng để thông tin một trạng thái, một điều gì đó. Badges thay thế label trong bootstrap 3.

a. Xem demo và lấy code mẫu

Vào https://getbootstrap.com/components/  => Badge

b. Code html

<h4><span class="badge badge-default">Default Badge</span>
<span class="badge badge-primary">Tin nổi bật</span>
<span class="badge badge-success">Tin đang hiện</span>
<span class="badge badge-info">Còn hàng</span>
<span class="badge badge-warning">Sản phẩm bị ẩn</span>
<span class="badge badge-danger">Hết hàng</span>
</h4>
badges

Badge có thể được dùng bên trong các link hoặc buttons để tạo các số đếm.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

3. Button

Button là các nút bạn bày ra trong trang để user nhắp vào. Nút được tạo ra với class btn và class quy định màu của nút.

a. Xem demo button và lấy code mẫu

Vào https://getbootstrap.com/components/ => Nhắp Buttons

code-mau-button

b. Các dạng nút thường dùng

bt4-button
  • .btn: định dạng nút   ,   .btn-<status> :  màu của nút
  • .btn-default: mặc định
  • .btn-primary: nút chính
  • .btn-success: thành công
  • .btn-info: thông báo
  • .btn-warning: cảnh báo
  • .btn-danger: nguy hiểm
  • .btn-link: liên kết

c. Dropdown Button

bt4-dropdown-button
<div class="btn-group" role="group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
    Hành động          
  </button>
  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" href="#">Chi tiết</a>
    <a class="dropdown-item" href="#">Xóa </a>
    <a class="dropdown-item" href="#">Sửa </a>
  </div>
</div>

d. Button Group

Button group là 1 nhóm các nút có cùng 1 ý nghĩa và được đặt chung trong 1 hàng.

bt4-button-group
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

e. Button toolbar

Một tập hợp các button group gọi là 1 button toolbar

bt4-button-toolbar
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

4. Images

Bootstrap có các class css để định dạng hình ảnh.

a. Xem mẫu:

bt4-images

b. Các class css để định dạng hình

rounded Bo tròn góc nhọn của hình
rounded-circle Bo tròn để hình thành dạng elip
img-thumbnail Thêm border nhạt cho hình
float-right Cho hình dạt qua phải
float-left Cho hình dạt qua trái
img-fluid Hình tự động được chỉnh kích thước để fit với cỡ của màn hình.
mx-auto .d-block Cho hình canh giữa, nếu hình nằm trong class row thì phải thêm class d-block mới có tác dụng

c. Ví dụ:

<img src="images/h.jpg" class="rounded-circle">
<img src="images/h.jpg" class="mx-auto d-block">    
<img src="images/h.jpg" class="img-fluid">

5. Icons

Icon là những biểu tượng nhỏ để minh họa cho text, như các icon phone, email… Bootstrap 3 có 1 thư viện icon riêng của nó là glyphicons, nhưng bootstrap 4 không có glyphicon nữa. Lý do là để thư viện bootstrap nhẹ bớt và đã có nhiều thư viện font icon rất hay như font Awesome, Google Material Design Icons.

a. Nhúng font Awesome vào trang

Thêm code sau vào trang web của bạn:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >

https://www.w3schools.com/bootstrap4/bootstrap_icons.asp

bt4-icons

b. Thêm tên của icon class vào các tag html

(như <i> hoặc <span> …):

 <i class="fas fa-cloud"></i>
 <i class="fas fa-coffee"></i>
 <i class="fas fa-car"></i>
 <i class="fas fa-file"></i>
 <i class="fas fa-bars"></i>
bt4 icons

c. Tra cứu các tên icon

Vào https://fontawesome.com/icons  => sẽ thấy các icon và tên của nó 

bt4-icons3

d. Sử dụng icon

Tạo trang bt-icons.html

<!doctype html> <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >
    <title>Contact: </title>
    <style>
        html {font-size: 20px;}
        #lienhe { font-size: 1.2rem;}
        #lienhe .fas,  #lienhe .fab { font-size: 1.2rem; margin-right:10px;  }
        #lienhe .fa-envelope { color:chartreuse;}
        #lienhe .fa-phone { color:hotpink;}
        #lienhe .fa-facebook-f  { color:orange;}
    </style>
  </head>
  <body>
    <div class="container">
      <div id="lienhe" class="col-8 bg-secondary text-white  m-auto p-4">
         <p><i class="fas fa-envelope"></i> admin@longnv.name.vn</p>
         <p><i class="fas fa-phone"></i> 0918 656666</p>
         <p><span class="fab fa-facebook-f"></span> facebook.com/thaylongweb</p>
      </div>
   </div>
  </body>

https://longnv.name.vn/bt/bt-icons.html

e. Ứng dụng vào trang thực tế

Save as file bt-navbar.html thành bt-navbarIcons.html , bổ sung code nhúng font awesome và các icon để được như sau:

bt4-icons4

(https://longnv.name.vn/bt/bt-navbarIcons.html)

6. List group

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

7. Card

Là thành phần hiển thị các box thông tin rất hay. Mỗi card là 1 box có header, footer, body. Trong các box này là nơi bạn hiển thị 1 sản phẩm, 1 tin, 1 khách hàng…. Các card có thể đặt cạnh nhau tạo thành 1 khối nhiều hàng nhiều cột rất dễ dàng.

a. Code html dùng cho 1 card:

<div class="card">
  <div class="card-header">Cung oán ngân khúc</div>
  <div class="card-body">
    Chìm đáy nước cá lừ đừ lặn, <br/>
    Lửng lưng trời nhạn ngẩn ngơ sa, <br/>
    Hương trời đắm nguyệt say hoa, <br/>
    Tây Thi mất vía, Hằng Nga giật mình<br/>
  </div>
  <div class="card-footer">
  Trích đoạn bài thơ của rất nổi tiếng của Nguyễn Gia Thiều (1741-1798)
  </div>
</div>

b.Kết quả hiện 1 card trong trang:

bt4-card

c . Chú ý khi dùng card

  • Nếu không cần, có thể bỏ heading, footer của card
  • Có thể thêm các class sau để chỉ định màu nền.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark , .bg-light
  • Class .card-columns dùng để tạo 1 grid cards. layout sẽ tự động điều chỉnh khi có nhiều card. Grid sẽ hiển thị dạng dọc trên màn hình small (<=576px):
  • Dùng class .card-deck để các card = nhau width và height, có một khoảng cách giữa các card
  • Dùng class .card-group để các card = nhau width và height, không có 1 khoảng cách giữa các card

d. Sử dụng card-columns

Card columns là 1 nhóm card đặt cạnh nhau để tạo thành 1 khối nhiều card.

<h2>Cards Columns</h2>
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Some text inside the first card</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Some text inside the second card</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Some text inside the third card</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Some text inside the fourth card</p>
      </div>
    </div>  
    <div class="card bg-light">
      <div class="card-body text-center">
        <p class="card-text">Some text inside the fifth card</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">Some text inside the sixth card</p>
      </div>
    </div>
 </div>
bt4 card columns

e. Card và Panel:

Card là thành phần mới trong bootstrap 4. Card chính là thành phần thay thế cho Panel trong bootstrap 3. Trong boostrap 4 không có thành phần Panel đâu nhé. Và nếu bạn còn lưu luyến với panel trong bootstrap 3 thì xem Panel nó như thế này:

– Code html tạo 1 panel trong bootstrap 3:

  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>

– Kết quả hiện panel trong trang:

8. Navbar

Là thành phần  giúp tạo thanh menu.

Vào http://getbootstrap.com/components/  => Navbar => Copy

bt4-navbar

Cấu trúc mã của navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>              
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

Hiệu chỉnh mã theo hướng dẫn sau

  • Mỗi item nằm trong tag li có class nav-item và a, bạn có thể chỉnh text và xóa bớt/bổ sung thoải mái. Các giá trị href của a thoải mái chỉnh lại cho phù hợp.
  • Xóa các tag button, form nếu không cần.
  • Tag a có class là navbar-brand là logo, xóa đi nếu không cần.

Ví dụ:

Save as file bt-layout1.html thành bt-navbar.html rồi Paste code mẫu vào thanh menu. Sau đó chỉnh sửa để được như sau:

bt4-layouta

https://longnv.name.vn/bt/bt-navbar.html

9. Carousel

Carousel là thành phần dùng để tạo các hiệu ứng trình diễn tuần tự (slideshow). Trong carousel có nhiều slide hiện thông tin.

a. Xem demo và lấy code mẫu:

Vào https://getbootstrap.com/components/  => Carousel => Copy

bt4-carousel

b. Code html

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

10. Collapse

Collapse là thành phần giúp ẩn hiện 1 khối nội dung khi user nhắp vào 1 nút hoặc link.

a. Xem demo và lấy code mẫu:

Vào https://getbootstrap.com/components/  => Collapse => Accordion example => Copy

bt4-collape

Nếu dùng tag a thì href là id của nội dung được ẩn hiện. Nếu dùng button thì chỉ định trong thuộc tính data-target (xem code bên dưới)

b. Code html

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

c. Accordion

Accordion gồm nhiều mục, mỗi mục có 2 phần: tiêu đề và nội dung. Hoạt động gần như tab: nghĩa là khi user nhắp tiêu đề sẽ hiển thị nội dung tương ứng

Accordion có thể được tạo bằng cách phối hợp Collapse với Card

Xem demo và code mẫu:  https://getbootstrap.com/docs/4.3/components/collapse/ => cuộn xuống mục Accordion example =>Copy

bt4-accordion

Code html

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

11. Tooltip

Tooltip là 1 popup nhỏ hiện ra chú thích khi user đưa chuột vào 1 tag.

Xem demo và lấy code mẫu: Vào https://getbootstrap.com/components/  => Tooltips

bt4-tooltip

.data-placement có các giá trị: left, right, top, bottom hoặc auto để chỉ định vị trí hiển thị.

Chú ý: Để dùng tooptip thì chèn thêm popper nữa nhé (trước jquery)

<script  src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">   </script>
bt4-tooltip2.png

12. Flex

Bootstrap 4 hỗ trợ flex – kỹ thuật làm layout tốt nhất hiện nay.

a. Xem demo và lấy code mẫu

Vào https://getbootstrap.com/components/  => Flex

Xem hướng dẫn thêm:  https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

b.Ví dụ

– Tạo flex với class d-flex

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
bt4-flex1

– Tạo flex với class d-inline-flex

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
bt4-flex2

– Flex horizontal: Dùng class .flex-row (mặc định) hoặc .flex-row-reverse

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
<hr>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
bt4-flex3

– Flex vertical: Dùng class .flex-column  hoặc .flex-column-reverse

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
<hr>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>
bt4-flex4

– Flex fill/equal width: Dùng class  .flex-fill

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
bt4-flex5

– Flex grow: Dùng class  .flex-grow-1 trong 1 item để nó chiếm không gian còn lại

<div class="d-flex">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
bt4-flex6

– Flex order: Dùng class  .order để sắp xếp các item

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex item 1</div>
  <div class="p-2 bg-warning order-1">Flex item 2</div>
  <div class="p-2 bg-primary order-2">Flex item 3</div>
</div>
bt4-flex7.png

13. Pagination

Pagination là thanh phân trang, thường hiện trong trang để user nhắp chuyển sang trang khác.

a. Xem demo và lấy code mẫu:

Vào https://getbootstrap.com/components/  => Pagination => Copy

bt4-pagination

b. Ghi chú

  • tag nav aria-label : có thể bỏ qua nếu không cần dùng, nó có tác dụng giải thích thông tin cho người khuyết tật
  • tag ul phải có class là pagination
  • Trong tag ul, thêm class justify-content-center để canh giữa thanh phân trang
  • Trong tag ul, thêm class justify-content-end để canh phải thanh phân trang
  • Các tag li phải có class page-item (bootstrap 3 không cần gán chỗ này, bootstrap 4 thì cần)

c. Code html

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

14. Jumbotron

Jumbotron là grey box nằm ở đầu trang hiển thị tiêu đề và thông tin quan trọng của trang.

https://getbootstrap.com/components/     => Jumbotron

bt4-jumbotron1
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>