FRONT-END FRAMEWORKS

ThS. Nguyễn Đình Hoàng

Mail:hoangnd@itc.edu.vn
FRONT-END FRAMEWORKS
BÀI 1: GIỚI THIỆU BOOTSTRAP
 MỤC TIÊU

Hiểu Bootstrap
Nắm vững tổ chức hệ thống lưới Grid
Biết cách tổ chức layout
Sử dụng navbar để xây xây dựng menu
Sử dụng Icons
Sử dụng List Group
Sử dụng Card
 NỘI DUNG

Nhúng Bootstrap vào website

Grid System
Xây dựng layout
Navs menu
Icons
List Group
Card
 TỔNG QUAN VỀ BOOTSTRAP

❑Bootstrap là một framework cho phép những

nhà phát triển thiết kế một trang web reponsive
nhanh chóng dễ dàng
❑Bootstrap được xây dựng dựa trên nền tảng
HTML templates, CSS templates và Javascript cơ
bản để hình thành nên những mẫu giao diện
thiết kế có sẵn
❑Bootstrap được Mark Otto và Jacob Thornton
cùng nhau phát triển lên tại Twitter
❑Bootstrap góp phần thúc đẩy công việc của
những nhà phát triển và lập trình được nhanh
hơn, tiện lợi và đồng bộ hơn
 ƯU ĐIỂM CỦA BOOTSTRAP
❑ Bootstrap giúp các nhà thiết kế website có thể giảm
bớt được thời gian trong việc thiết kế website. Khi sử
dụng Bootstrap, bạn có thể hạn chế được thời gian
bỏ ra để viết code cho giao diện vì trong thư viện
của nó đã có sẵn những đoạn mã có thể chèn vào
trong website.
❑ Khi sử dụng Bootstrap bạn hoàn toàn có thể tùy
biến được giao diện theo ý muốn của mình với hệ
thống Grid System mặc định bao gồm 12 cột cùng
với độ rộng 940px được tích hợp sẵn trong
Bootstrap.
❑ Ngày nay, khi mà xu hướng phát triển website tương
thích với mọi thiết bị thì Bootstrap nổi lên như 1
Framework cung cấp sẵn reponsive css phù hợp với
mọi thiết bị như SmartPhone, tablets, desktop…..
 NHÚNG BOOTSTRAP VÀO WEBSITE

❑Vào website: http://getbootstrap.com/getting-

started/ và nhấp vào nút [Download Boostrap]
 NHÚNG BOOTSTRAP VÀO WEBSITE

❑Giải nén
 NHÚNG BOOTSTRAP VÀO WEBSITE

❑Tạo trang index.html và chép nội dung HTML

của phần Basic Template như hình dưới vào
trang index.html
 NHÚNG BOOTSTRAP VÀO WEBSITE

❑Mã HTML của trang index.html

 NHÚNG BOOTSTRAP VÀO WEBSITE

❑Không xét IE 9- và download

jquery về local thì mã của trang
index.html đơn giản như sau
 ÁP DỤNG BOOTSTRAP CSS

❑Hãy sửa nội dung trang web index.html như sau,

chạy và phân tích kết quả

container, alert-info, btn

và btn-default là gì?
 DEMO
Download Bootstrap, nhúng và
tái hiện ví dụ slide trước
 BOOTSTRAP CLASS SELECTOR

❑Qua ví dụ trên, chúng ta thấy Bootstrap cung

cấp danh sách CSS class selector. Chúng ta chỉ
việc nghiên cứu và áp dụng nó vào các thẻ phù
hợp để tạo giao diện mong muốn.
❑Trong ví dụ trên chúng ta sử dụng các class
selector sau
❖.container: định dạng khung chứa
❖.alert-info: làm nổi bật văn bản thông báo
❖.btn: định dạng nút
❖.btn-default: định dạng hình thức nút
❑Hàng trăm class selector với công dụng khác
nhau đang đợi chúng ta khai thác
 GRID SYSTEM

❑Bootstrap cung cấp các class selector giúp tổ

chức giao diện dưới dạng hệ thống lưới tương
thích với hầu hết các thiết bị di động.
❑Hệ thống này được chia thành 12 cột tương
thích với mọi kích thước khung nhìn của các thiết
bị
 GRID SYSTEM

❑Bootstrap cung cấp các class selector giúp tổ

chức giao diện dưới dạng hệ thống lưới tương
thích với hầu hết các thiết bị di động.
❑Hệ thống này được chia thành 12 cột tương
thích với mọi kích thước khung nhìn của các thiết
bị Ô .col-md-8 Ô .col-md-4
chứa 4 cột
chứa 8 cột
 GRID SYSTEM

❑.row được sử dụng để nhóm các ô theo hàng

ngang.
❑.col-md-n được sử dụng để tạo ô chứa n cột (tối
đa 12).
❑Để tương thích cho từng loại thiết bị khác nhau,
Bootstrap cung cấp các class selector chia cột
khác nhau
❖.col-xs-n: áp dụng cho các thiết bị có độ rộng màn hình =<576px
❖ .col-sm-n: áp dụng cho các thiết bị có độ rộng màn hình >=576
❖ .col-md-n: áp dụng cho các thiết bị có độ rộng màn hình >=768px
❖ .col-lg-n: áp dụng cho các thiết bị có độ rộng màn hình >=992px
❖ .col-xl-n: áp dụng cho các thiết bị có độ rộng màn hình >=1200px
 GRID SYSTEM

View với máy tính

View với mobile

 GRID SYSTEM
Cấu trúc cơ bản của Bootstrap 4 Grid như sau:

1 <!—Ví dụ 1: Thiết lập chiều rộng cho cột (column) theo từng thiết bị -->
2 <div class="row">
3 <div class="col-*-*">col 1</div>
4 <div class="col-*-*">col 2 </div>
5 <div class="col-*-*">col 3</div>
6 </div>
7
8 <!-- Tự động bố trí theo Bootstrap -->
9 <div class="row">
10 <div class="col">col1</div>
11 <div class="col">col2</div>
12 <div class="col">col3</div>
13 </div>

Ví dụ 1: Tạo một dòng (<div class = "row">). Sau đó, thêm số cột mong
muốn (các thẻ có các lớp .col - * - * thích hợp). Dấu sao đầu tiên (*) đại
diện cho: sm, md, lg hoặc xl, trong khi dấu sao thứ hai đại diện cho một
số(tối đa 12).
 GRID SYSTEM
Cấu trúc cơ bản của Bootstrap 4 Grid như sau:

1 <!—Ví dụ 1: Thiết lập chiều rộng cho cột (column) theo từng thiết bị -->
2 <div class="row">
3 <div class="col-*-*">col 1</div>
4 <div class="col-*-*">col 2 </div>
5 <div class="col-*-*">col 3</div>
6 </div>
7
8 <!—Ví dụ 2: Tự động bố trí theo Bootstrap -->
9 <div class="row">
10 <div class="col">col1</div>
11 <div class="col">col2</div>
12 <div class="col">col3</div>
13 </div>

Ví dụ 2: Thay vì thêm một số vào mỗi cột, hãy để bootstrap xử lý bố cục, để

tạo các cột có chiều rộng bằng nhau: Nếu hai cols "col" = 50% chiều rộng
cho mỗi cột. Nếu 3 cols = 33,33% chiều rộng cho mỗi cột. Nếu 4 cols = 25%
chiều rộng,... Bạn cũng có thể sử dụng .col-sm | md | lg | xl để làm cho các
cột đáp ứng.
 GRID SYSTEM
1. Grid XSmall
Đối với các thiết bị có độ rộng màn hình < 576px, chúng ta sử dụng class .col- cho các
column cần thiết lập.
Ví dụ: để thiết lập 2 column với độ rộng màn hình lần lượt là 25% và 75% ta làm như
sau:
1 <div class="container-fluid">
2 <div class="row">
3
4 <!-- class col-3 ứng với column có độ rộng 25% -->
5 <div class="col-3 bg-success">
6 <p>col -...</p>
7 </div>
8
9 <!-- class col-9 ứng với column có độ rộng 75% -->
10 <div class="col-9 bg-warning">
11 <p>col-9...</p>
12 </div>
13
14 </div>
15 </div>
 GRID SYSTEM
Ngoài ra chúng ta cũng có thể để Bootstrap tự động chia độ rộng cho column
bằng cách, với mỗi row tuỳ thuộc vào mục đích mà chúng ta sẽ chia ra bao
nhiêu column, ví dụ chúng ta chia ra làm 2 column trong 1 row thì chỉ cần có
2 div với class .col, và các column này sẽ có width bằng nhau.
<div class="container-fluid">
<!-- khối này sẽ có 2 column với width bằng nhau và = 50% -->
<div class="row">
<div class="col">col-1</div>
<div class="col">col-2</div>
</div>

<!-- khối này sẽ có 4 column với width bằng nhau và = 25% -->
<div class="row">
<div class="col">col-3</div>
<div class="col">col-4</div>
<div class="col">col-5</div>
<div class="col">col-6</div>
</div>
</div>
 GRID SYSTEM
2 Grid Small
Các thiết bị với độ rộng màn hình 576 – 767px chúng ta sử dụng class .col-sm-* cho
việc chia column

1 <div class="container">
2 <div class="row">
3 <!-- '*' tương ứng với số column cần chia, ví dụ: col-sm-3 -->
4 <div class="col-sm-*"></div>
5 <div class="col-sm-*"></div>
6 <div class="col-sm-*"></div>
7 </div>
8 </div>
 GRID SYSTEM
Hoặc có thể để Bootstrap tự động chia column

1 <div class="container">
2 <div class="row">
3 <!-- 4 column với mỗi column width = 25% -->
4 <div class="col-sm"></div>
5 <div class="col-sm"></div>
6 <div class="col-sm"></div>
7 <div class="col-sm"></div>
8 </div>
9 </div>
 GRID SYSTEM
3. Grid Medium
Grid Medium được sử dụng cho các thiết bị có độ rộng màn hình từ 768px – 991px
(ipad,tablet,…). Để chia column chúng ta chỉ cần dùng class .col-md-*
1 <div class="container">
2 <div class="row">
3 <!-- '*' tương ứng với số column cần chia, ví dụ: col-md-3 -->
4 <div class="col-md-*"></div>
5 <div class="col-md-*"></div>
6 <div class="col-md-*"></div>
7 </div>
8 </div>
 GRID SYSTEM

Tự động chia column theo Bootstrap

1 <div class="container">
2 <div class="row">
3 <!-- 4 column với mỗi column width = 25% -->
4 <div class="col-md"></div>
5 <div class="col-md"></div>
6 <div class="col-md"></div>
7 <div class="col-md"></div>
8 </div>
9 </div>
 GRID SYSTEM

4. Grid Large
Class .col-lg-* sẽ dùng trong lưới này, với độ màn hình từ 992px – 1199px.

1 <div class="container">
2 <div class="row">
3 <!-- '*' tương ứng với số column cần chia, ví dụ: col-lg-3 -->
4 <div class="col-lg-*"></div>
5 <div class="col-lg-*"></div>
6 <div class="col-lg-*"></div>
7 </div>
8 </div>
 GRID SYSTEM

Tương tự như những grid khác, chúng ta có thể để Bootstrap tự động chia column

1 <div class="container">
2 <div class="row">
3 <!-- 4 column với mỗi column width = 25% -->
4 <div class="col-lg"></div>
5 <div class="col-lg"></div>
6 <div class="col-lg"></div>
7 <div class="col-lg"></div>
8 </div>
9 </div>
 GRID SYSTEM
5. Grid XLarge
Sự khác biệt trong hệ thống grid layout giữa Boostrap 4 và phiên bản cũ là ở phiên
bản mới này, Boostrap cung cấp thêm 1 class mới đó là .col-xl-*. Nó được áp dụng
với các thiết bị có độ rông màn hình >= 1200px. Sự ra đời của nó đã tạo nên sự linh
hoạt hơn trong việc chia bố cục layout cho từng thiết bị.

<div class="container">
2 <div class="row">
3 <!-- '*' tương ứng với số column cần chia, ví dụ: col-xl-3 -->
4 <div class="col-xl-*"></div>
5 <div class="col-xl-*"></div>
6 <div class="col-xl-*"></div>
7 </div>
8 </div>
 GRID SYSTEM
Nó cũng giống như các Grid khác là có thể để Bootstrap tự động chia column.

<div class="container">
2 <div class="row">
3 <!-- 4 column với mỗi column width = 25% -->
4 <div class="col-xl"></div>
5 <div class="col-xl"></div>
6 <div class="col-xl"></div>
7 <div class="col-xl"></div>
8 </div>
9 </div>
 THIẾT KẾ LAYOUT

<header class=“row”>

<nav class=“row”>
<aside class=“col-xs-2”>

<aside class=“col-xs-2”>
<article class=“col-xs-8”>

<footer class=“row”>
 MÃ HTML & CSS CỦA LAYOUT

CSS này chỉ định chiều

cao và màu nền của các
hộp trong layout
 DEMO
Thiet ke layout
 GRID SYSTEM

❑Hệ thống lưới với nhiều thiết bị

Trên mobile: chiếm toàn màn hình
Trên máy tính: chỉ chiếm 8 cột

Tất cả các thiết bị luôn chiếm ½ màn

hình
 GRID SYSTEM

❑Dịch chuyển cột

❖.col-xs-offset-n: dịch phải n cột
❖.col-sm-offset-n : dịch phải n cột
❖.col-md-offset-n : dịch phải n cột
❖.col-lg-offset-n : dịch phải n cột
 GRID SYSTEM

❑Sử dụng Offset

❖Một câu hỏi tiếp tục được đặt ra khi làm giao diện là
bạn muốn một thành phần nào đó hiển thị cách ra 1
khoảng so với thành phần kia thì sao ?
❖Nếu xử lý bằng cách khai báo lại giá trị margin cho các
col thì sẽ dẫn đến giao diện sẽ không còn đúng chuẩn
nữa. Trong trường hợp này các bạn nên khai báo thêm
class: offset-**-* trong đó.
•* * là 4 giá trị xs, sm, md và lg

•* là giá trị từ 1 đến 12.

 GRID SYSTEM
❑Sử dụng Offset

<div class="row">
<div class="col-md-4 bg-success">.col-md-4</div>
<div class="col-md-4 offset-md-4 bg-warning">.col-md-4
.offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3
</div>
<div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3
</div>
</div>
FRONT-END FRAMEWORKS
BÀI 1 (PHẦN 2)
 NAVS MENU

Navbar
 NAVS MENU

❑Giao diện trang web

Trang web sau đây gồm 4 phần:
▪ Phần Header: Tên website, mô tả ngắn website, logo,…
▪ Phần Nagigation: chứa menu chính
▪ Phần Body: chứa nội dung cột phải và cột trái
▪ Phần Footer: Thông tin trang web, thông tin bản quyền,…
❑Giao diện 2 cột, tỉ lệ 4/8
Giao diện sau thể hiện nội dung website có 2 cột chính:
chia theo tỉ lệ 4 và 8. Miễn sao cộng lại đủ 12 theo định
nghĩa hệ thống lưới của Bootstrap 4.
NAVS MENU
 NAVS MENU

❑Giao diện 3 cột, tỉ lệ 3/6/3

Nếu bạn muốn bố cục chính có 3 cột thì cũng chia làm 3
cột theo tỉ lệ 3/6/3 như ví dụ sau.
 NAVS MENU

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

Với Bootstrap, một thanh điều hướng có thể mở rộng hoặc thu gọn, tùy
thuộc vào kích thước màn hình.
Thanh điều hướng tiêu chuẩn được tạo class .navbar, tiếp theo class
.navbar-expand thu gọn đáp ứng : .navbar-expand-xl | lg | md | sm (xếp
thanh điều hướng theo chiều dọc trên các màn hình cực lớn, lớn, vừa hoặc
nhỏ).
Để thêm các liên kết bên trong thanh điều hướng, thường sử dụng thẻ <ul>
với class = "navbar-nav". Sau đó, thêm thẻ <li> với class .nav-item theo sau
là thẻ <a> có class .nav-link: <nav class="navbar navbar-expand-sm bg-light">

<!-- Links -->

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
 NAVS MENU

❑Vào http://getbootstrap.com/components/ và
thực hiện theo hình sau để lấy mã của navbar

Chép mã navbar và dán

vào <nav> của layout
 NAVS MENU

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

 ICONS

Biểu Tượng Trong Bootstrap

▪ Khác với Bootstrap 3 bao gồm Glyphicon (các font icon) trong định
dạng font chữ, phiên bản Bootstrap 4 không có thư viện biểu tượng
theo mặc định.

▪ Tuy nhiên nếu muốn chúng ta vẫn có thể thêm các biểu tượng trong dự
án của mình bằng cách sử dụng thư viện biểu tượng dựa trên font chữ
bên ngoài. Thư viện phổ biến nhất và tương thích với Bootstrap phải kể
đến Font Awesome, bao gồm 675 biểu tượng khác nhau có sẵn ở định
dạng font chữ.

▪ Để sử dụng các biểu tượng Font Awesome, hãy thêm link HTML của bạn (Không
cần tải xuống hoặc cài đặt)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

Ví dụ: ví dụ dưới đây minh họa cách thêm font awesome vào dự án:
 ICONS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>

<div class="container">
<h1>My Icons <i class="fas fa-heart"></i></h1>
<p>An icon along with some text: <i class="fas fa-thumbs-up"></i></p>
</div>

<div class="container">
<p>Others:</p>
<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>
</div>
</body>
</html>
 ICONS

Sử Dụng Các Biểu Tượng Font Awesome Trong Mã

▪ Để sử dụng các biểu tượng font-awesome trong mã, chúng ta sẽ cần một
thẻ i hoặc thẻ span cùng lớp .fa và lớp biểu tượng .fa-*. Cú pháp chung
để sử dụng các biểu tượng font-awesome có dạng như dưới đây:

▪ Trong cú pháp trên, fa-* là tên của lóp biểu tượng cụ thể (chẳng hạn như
fa-cloud, fa-coffee, fa-car, fa-file,...) được xác định trong file font-awesome.
 ICONS
❑ Vào
https://www.w3schools.com/icons/fontawesome5_icons_u
sers_people.asp

<span class=“fas fa-biking”></span>

 ICONS

<a href="#">
<span class="fa fa-user"></span>
Đăng nhập
</a>
 DEMO
Bổ sung menu có icon vào layout
 LIST GROUP
❑Tạo List Group trong Bootstrap
▪ Sử dụng list-group tạo ra danh sách các phần tử với sự tùy biến
mềm dẻo, các phần tử con xây dựng từ list-group-item

▪ Tạo List Group để hiện thị danh sách các mục bằng cách sử
dụng .list-group các phần tử con sử dụng .list-group-item. Ví dụ
List Group với ba phần tử
<ul class="list-group">
<li class="list-group-item">Phần tử 1</li>
<li class="list-group-item">Phần tử 2</li>
<li class="list-group-item">Phần tử 3</li>
</ul>
LIST GROUP
 LIST GROUP LINK
❑Hoặc xây dựng các item bằng <a>
<ul class="list-group">
<a class="list-group-item" href="#">Phần tử 1</a>
<a class="list-group-item" href="#">Phần tử 2</a>
<a class="list-group-item" href="#">Phần tử 3</a>
</ul>
 LIST GROUP ACTIVE & DISABLED

❑List Group & .active,.disabled

Lớp .active được sử dụng cùng với .list-group-item khi bạn muốn làm nổi
bật list-group-item hiện tại, để nhấn mạnh rằng list-group-item đó đang
được lựa chọn. Ngược lại, nếu bạn không muốn người dùng tương tác với
một list-group-item nào đó bạn có thể sử dụng lớp .disable để vô hiệu hóa
nó.
<div class="container mt-3">
<h2>Bootstrap Tutorials</h2>
<div class="list-group">
<a href = "#" class = "list-group-item">Bootstrap Buttons</a>
<a href = "#" class = "list-group-item active">
Bootstrap List Groups (Reading)
</a>
<a href = "#" class = "list-group-item">Bootstrap NavBar</a>
<a href = "#" class = "list-group-item disabled">Bootstrap Tables (Comming Soon)</a>
</div>
</div>
 LIST GROUP ACTIVE & DISABLED

❑List Group & .active,.disabled

 LIST GROUP COLOR

❑List Group & Color

Có một vài lớp bổ xung cho để sử dụng cùng với .list-group-item giúp
bạn thiết lập mầu nền hoặc mầu chữ cho list-group-item, nó nên được
sử dụng với các ngữ cảnh khác nhau trong ứng dụng.

•.list-group-item-primary
•.list-group-item-secondary
•.list-group-item-success
•.list-group-item-danger
•.list-group-item-warning
•.list-group-item-info
•.list-group-item-light
•.list-group-item-dark
•.list-group-item-muted
•.list-group-item-white
 LIST GROUP COLOR

<div class="container mt-3">

<h2>.list-group-item-*</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-primary">.list-group-item-primary</li>
<li class="list-group-item list-group-item-secondary">.list-group-item-secondary</li>
<li class="list-group-item list-group-item-success">.list-group-item-success</li>
<li class="list-group-item list-group-item-info">.list-group-item-info</li>
<li class="list-group-item list-group-item-warning">.list-group-item-warning</li>
<li class="list-group-item list-group-item-danger">.list-group-item-danger</li>
<li class="list-group-item list-group-item-light">.list-group-item-light</li>
<li class="list-group-item list-group-item-dark">.list-group-item-dark</li>
<li class="list-group-item list-group-item-muted">.list-group-item-muted</li>
<li class="list-group-item list-group-item-white">.list-group-item-white</li>
</ul>
</div>
LIST GROUP COLOR
 LIST GROUP WITH BADGES

❑List Group with Badges

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
 LIST GROUP WITH BADGES

❑List Group with Badges

 CARD
Card là một bộ chứa nội dung (content container) có cấu trúc, mềm dẻo và có
thể mở rộng (extensible). Nó có thể bao gồm các tùy chọn như header, footer,
các mầu nền theo ngữ cảnh, .. Về cơ bản cấu trúc của Card giống như hình
minh họa dưới đây:
 CARD
Card là một bộ chứa nội dung (content container) có cấu trúc, mềm dẻo và có
thể mở rộng (extensible). Nó có thể bao gồm các tùy chọn như header, footer,
các màu nền theo ngữ cảnh, .. Về cơ bản cấu trúc của Card giống như hình
minh họa dưới đây:
 CARD
❑Basic Card
Một thẻ cơ bản của card được tạo bằng lớp .card và nội dung bên
trong thẻ có lớp .card-body:

<div class="card">
<div class="card-body">Basic card</div>
</div>

❑Card (img.card-img-top + .card-body)

Một Card đơn giản, nó bao gồm 2 thành phần img.card-img-top & .card-
body:
 CARD

.card

.card-img-top

.card-body
 CARD

❑Ví dụ
<h4 class="mb-4">Simple Card</h4>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="./image/app1.jpg" alt="">
<div class="card-body">
<h5 class="card-title">Tiêu đề Card</h5>
<p class="card-text">
Ví dụ mẫu sử dụng Card
Nội dung văn bản trong.card-body
này sử dụng.card-text.
</p>
<a href="#" class="btn btn-primary">Nút bấm</a>
</div>
</div>
 CARD

❑Header and Footer

Card (.card-header + .card-footer)
 CARD

❑Header and Footer

Ví dụ: Card (.card-header + .card-footer)
<h4 class="mb-4">Card (.card-header + .card-footer)</h4>
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">
With supporting text below as a natural
lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">
Go somewhere
</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
 CARD
❑Background color card
Để thêm màu nền cho card, hãy sử dụng các lớp selector (.bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-risk, .bg-Secondary, .bg-dark và .bg-
light.
 CARD
❑Background color card
Để thêm màu nền cho card, hãy sử dụng các lớp selector (.bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-risk, .bg-Secondary, .bg-dark và .bg-
light.
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
 CARD
❑Titles, text, and links kết hợp List group
 CARD
❑Card image
Thêm .card-img-top hoặc .card-img-bottom vào thẻ <img> để đặt hình
ảnh ở trên cùng hoặc ở dưới cùng bên trong thẻ card.

.card-img-
top

.card-img-
bottom
 CARD
❑Card image
Ví dụ: card image
<h4 class="mb-4">Card Complex Example</h4>
<div class="card" style="width: 20rem;">
<div class="card-body">
<img class="card-img-top" src="./image/app2.jpg" alt="laptop" style="width:100%">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's content.
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="btn btn-primary">button</a>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a> <br>
<img class="card-img-top" src="./image/app1.jpg" alt="laptop" style="width:100%">
</div>
</div>
 CARD
❑Card Image Overlays
Một trong các tùy chọn có ích khác với ảnh là bạn có thể hiển thị nội dung văn
bản đè lên (overlays) hình ảnh, điều này giúp tiết kiệm không gian của Card.
 CARD
❑Card Image Overlays
Ví dụ: Card image overlays
<h4 class="mb-4">Card (.card-img-overlay)</h4>
<div class="card mb-3" style="width: 30rem;">
<img class="card-img-top" src="./image/app2.jpg"alt="laptop"style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title text-light">Card title</h5>
<p class="card-text text-light">
This is a wider card with supporting text below
as a natural lead-in to additional content.
This content is a little bit longer.
</p>
<p class="card-text text-light">
Last updated 3 mins ago
</p>
</div>
</div>
 CARD
❑Card columns
Với các ví dụ trên mình sử dụng style="width:30rem" để xác định độ rộng cho card, như vậy thì sẽ rất khó
responsive cho những thiết bị màn hình khác nhau, do đó Bootstrap cung cấp cho chúng ta một
class card-columns có chức năng giống như class col trong hệ thống lưới. Để nắm rõ hơn hãy xem ví dụ
dưới đây nhé
<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>
 CARD
❑Card columns
Với các ví dụ trên mình sử dụng style="width:30rem" để xác định độ rộng
cho card, như vậy thì sẽ rất khó responsive cho những thiết bị màn hình
khác nhau, do đó Bootstrap cung cấp cho chúng ta một class card-
columns có chức năng giống như class col trong hệ thống lưới. Để nắm rõ
hơn hãy xem ví dụ dưới đây nhé
 CARD
❑Card columns
Khi ta thêm nội dung vào một card, thì card được thêm nội dung sẽ có độ cao không đồng đều với
các card khác. Nếu bạn chú ý thì tại sao card thứ 2 lại có nội dung nhiều hơn so với các nội dung
khác?
 CARD
❑Card Deck
Lớp .card-deck tạo ra một lưới các card có chiều cao và chiều rộng bằng nhau. Bố cục sẽ tự động
điều chỉnh khi bạn chèn nhiều card hơn.
 CARD
❑Card Deck
Lớp .card-deck tạo ra một lưới các card có chiều cao và chiều rộng bằng nhau. Bố cục sẽ tự động
điều chỉnh khi bạn chèn nhiều card hơn.
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</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>
 CARD
❑Card Group
Lớp .card-group tương tự như .card-deck. Sự khác biệt duy nhất là lớp .card-group loại
bỏ lề trái và lề phải giữa mỗi card.
 CARD
❑Card Group
Code minh họa
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</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>
 TỔNG KẾT NỘI DUNG BÀI HỌC

Tổng quan Bootstrap

Nhúng Bootstrap vào website
Grid System
Xây dựng layout
Navs menu
Icons
List Group
Card