Phần 5. Màu sắc văn bản trong Bootstrap 4

11/12/2018 Nguyễn Văn Huynh

Bootstrap 4 xây dựng sẵn những lớp cho phép chúng ta có thể dùng để định nghĩa “màu sắc” cho văn bản trong trang web.

Bootstrap 4 có những lớp bối cảnh có thể dùng để định nghĩa “ý nghĩa bằng màu sắc”, đó là: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (mặc định là màu văn bản chính của trang web, thường màu đen) và .text-light. Sau đây, chúng ta có thể xem ví dụ để nhận biết các màu sắc của các lớp.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- tinhocthoidai.vntitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
 
<div class="container">
  <h2>Các màu sắc bối cảnh --- tinhocthoidai.vnh2>
  <p>Sử dụng các lớp bối cảnh để cung cấp "ý nghĩa thông qua màu sắc.p>
  <p class="text-muted">Văn bản có nghĩa là câm lặngp>
  <p class="text-primary">Văn bản có nghĩa là quan trọng.p>
  <p class="text-success">Văn bản có nghĩa là thành công.p>
  <p class="text-info">Văn bản thể hiện thông tin.p>
  <p class="text-warning">Văn bản thể hiện cảnh báo.p>
  <p class="text-danger">Văn bản thể hiện nguy hiểm.p>
  <p class="text-secondary">Văn bản phụ.p>
  <p class="text-dark">Văn bản có màu xám đem.p>
  <p class="text-body">Màu văn bản mặc định (thường là màu đen).p>
  <p class="text-light">Văn bản màu xám trắng (trên nền trắng).p>
  <p class="text-white">Văn bản màu trắng (trên nền trắng).p>
div>
 
body>
html>

Các lớp bối cảnh cũng có thể áp dụng với liên kết và thêm một màu nền màu đen khi người dùng rê chuột lên liên kết.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- tinhocthoidai.vntitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
 
<div class="container">
  <h2>Các màu sắc liên kết bối cảnh --- tinhocthoidai.vnh2>
  <p>Hover over the links.p>
  <a href="#" class="text-muted">Liên kết câm lặng.a>
  <a href="#" class="text-primary">Liên kết chính.a>
  <a href="#" class="text-success">Liên kết thành công.a>
  <a href="#" class="text-info">Liên kết thông tin.a>
  <a href="#" class="text-warning">Liên kết cảnh báo.a>
  <a href="#" class="text-danger">Liên kết nguy hiểm.a>
  <a href="#" class="text-secondary">Liên kết phụ.a>
  <a href="#" class="text-dark">Liên kết xám tối.a>
  <a href="#" class="text-body">Liên kết mặc định (đen).a>
  <a href="#" class="text-light">Liên kết xám sáng.a>
div>
 
body>
html>

Chúng ta cũng có thể áp dụng 50% độ mờ (opacity) cho văn bản màu trắng hoặc đen với các lớp: .text-black-50 hay .text-white-50.

 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- tinhocthoidai.vntitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
 
<div class="container">
  <h2>Màu sắc văn bản theo độ mờ (opacity) --- tinhocthoidai.vnh2>
  <p>Thêm 50% opacity cho văn trắng hoặc đen với .text-black-50 hay .text-white-50p>
  <p class="text-black-50">Văn bản màu đen với 50% opacity trên nền trắngp>
  <p class="text-white-50 bg-dark">Văn bản màu trắng với 50% opacity trên nền đenp>
div>
 
body>
html>

Màu nền

Các lớp dùng để định nghĩa màu nền là: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark và .bg-light. Lưu ý màu nền không áp dụng cho màu chữ, do đó, trong một số trường hợp chúng ta phải lớp .text-* cùng với màu nền để định nghĩa màu chữ.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- tinhocthoidai.vntitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
 
<div class="container">
  <h2>Màu nền --- tinhocthoidai.vnh2>
  <p>Use the contextual background classes to provide "meaning through colors".p>
  <p>Note that you can also add a .text-* class if you want a different text color:p>
  <p class="bg-primary text-white">This text is important.p>
  <p class="bg-success text-white">This text indicates success.p>
  <p class="bg-info text-white">This text represents some information.p>
  <p class="bg-warning text-white">This text represents a warning.p>
  <p class="bg-danger text-white">This text represents danger.p>
  <p class="bg-secondary text-white">Secondary background color.p>
  <p class="bg-dark text-white">Dark grey background color.p>
  <p class="bg-light text-dark">Light grey background color.p>
div>
 
body>
html>
 

Kết luận

Qua bài viết chúng ta đã học các lớp mặc định để định nghĩa màu chữ, màu liên kết và màu nền trong Boostrap 4. Ngoài ra, chúng ta phải tự định nghĩa màu sắc khác nếu muốn. Mời chúng ta theo dõi bài viết tiếp theo.

Tag: bootstrapcolor class

Đang phát triển ...

Bài viết liên quan

Phần 4: Văn bản trong Boostrap

Trong bài này, chúng ta sẽ học đến cách thiết lập mặc định cho phong cách văn bản trong Bootstrap.

Phần 3: Hệ thống lưới nâng cao Bootstrap

Trong phần này, các bạn tiếp tục tìm hiểu các lớp lưới khác trong Bootstrap để thực hiện việc phân vùng cho các giao diện phức tạp hơn.

Phần 2: Hệ thống lưới trong Bootstrap 4

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap.

Phần 1: Giới thiệu Bootstrap 4

Bootstrap là 1 framework JavaScript, CSS và HTML miễn phí và phổ biến nhất trong việc thiết kế giao diện web đáp ứng trên di động.

CSS định nghĩa sẵn trong bootstrap 3

Chương này chúng ta sẽ đi tìm hiểu những css được định nghĩa sẵn trong BS và cách sử dụng chúng.

Cài đặt và sử dụng Bootstrap 3

Để sử dụng được bootstrap chúng ta cần cầu hình cài đặt đưa các file thư viện của bootstrap vào dự án web của chúng ta

Giới thiệu về bootstrap (BS)

Bootstrap là gì: bootstrap là  Html, css, js được xây dựng sẵn để sử dụng trong các dự án phát triển web, các trang web đáp ứng lại các kích thước màn hình hiển thị.a

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php