Màu nền và màu chữ trong Bootstrap 4 CSS Framework


Cập nhật: 1 năm trước
Bài viết ngẫu nhiên:

   Laravel 5.6 : Cấu hình, Xây dựng Cơ sở dữ liệu với Migrations

   Top 25 bài giảng có số lượt xem cao nhất thời điểm hiện tại

   XD phần mềm Quản lý điểm: Bài 6. Hiển thị bảng điểm trên DataGridView và Nhập điểm học phần lần 1, lần 2

   XD phần mềm Quản lý điểm: Bài 5. Xử lý dữ liệu Bảng Môn học phần và Cập nhật dữ liệu vào Bảng Điểm học phần

   Lập trình hướng đối tượng theo mô hình 3 lớp với Cshape trên Windows Form

   XD phần mềm Quản lý điểm: Bài 4. Thiết kế Form, Xử lý dữ liệu Bảng Học kỳ (select, insert, update, delete)


Một điểm mới trong Bootstrap 4 so với Bootstrap 3 là sự bổ sung màu sắc, phiên bản Bootstrap 4 cung cấp 10 màu sắc cho text và 8 màu sắc cơ bản cho nền Background. Cụ thể là:

Với Text, gồm các Class: .text-muted.text-primary.text-success.text-info.text-warning.text-danger.text-secondary.text-white.text-dark và.text-light

Ví dụ: 

<!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.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

</body>
</html>

Với màu sắc cho Background bao gồm các Class: .bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark and .bg-light

Ví dụ: 

<!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.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contextual Backgrounds</h2>
  <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>

 

Xem thêm

   So sánh giữa hai công nghệ xây dựng website: PHP và ASP.NET

   11 xu hướng thiết kế web trong năm 2019

   GIS là gì? Thành phần, chức năng, nhiệm vụ và ứng dụng của công nghệ GIS

   Bạn sẽ chọn ngành nào phù hợp với lĩnh vực Công nghệ Thông tin?

   Bạn hiểu thế nào là nghề lập trình? để bước vào nghề lập trình thì phải học những gì?

   Lập trình máy tính là gì? Các ngôn ngữ lập trình, phát triển phần mềm

   Tại sao bạn phải hiểu và có kỹ năng về lập trình hướng đối tượng?

   Xử lý hình ảnh (images) với Bootstrap CSS FrameWork phiên bản 4.x

   Để học lập trình bạn nên lựa chọn ngôn ngữ lập trình nào?

   Top 25 bài giảng có số lượt xem cao nhất thời điểm hiện tại

   Có gì khác biệt giữa HTML và HTML5?

   5 yếu tố quan trọng của định hướng thị giác trong thiết kế web

   Một số thẻ và Type quan trọng với HTML5 cần chú ý trong quá trình thiết kế website

Xem nhiều nhất

   Giáo trình hướng dẫn Microsoft PowerPoint 2016 từ cơ bản đến nâng cao

   Chia sẻ Full bộ lịch âm dương 2019 vector - File PNG, JPEG và AI (Adobe Illustrator)

   Hệ thống bài giảng e-Learning lớp Ứng dụng CNTT và các phần mềm vào đổi mới phương pháp dạy và học

   Thiết kế trò chơi ô chữ trong powerpoint (download miễn phí)

   Thực hành biên tập, thiết kế, chỉnh sửa Videos bằng Adobe Premiere

   Thiết lập hiệu ứng trống đồng quay trong Microsoft PowerPoint

   Trọn bộ Giáo trình Microsoft Word 2016 từ cơ bản đến nâng cao

   Hướng dẫn sử dụng phần mềm bảng tương tác thông minh ActivInspire

   Xây dựng Website tin tức bằng PHP và MySql theo phương pháp lập trình hướng đối tượng (mysqli Object Oriented)

   Cài đặt và sử dụng tính năng mới của Office 365 trên Office 2016

   Thực hành sử dụng phần mềm thiết kế đồ họa Adobe Illustrator

   Hướng dẫn thu âm, chỉnh sửa âm thanh, tăng giảm tone nhạc bằng phần mềm Adobe Audition CC

   Tạo câu hỏi trắc nghiệm với siêu liên kết (hyperlink) và Trigger với PowerPoint 2016

   Bài giảng Microsoft PowerPoint 2013 và 2016 từ cơ bản đến nâng cao

   Tìm hiểu về Thư viện DateTime Carbon trong Laravel

   Thực hành sử dụng phần mềm thiết kế đồ họa Corel Draw