Có hai cách để bạn có thể thay đổi màu phông chữ của mục điều hướng đang hoạt động. Màu phông chữ mặc định là màu trắng của liên kết điều hướng đang hoạt động trong trường hợp mục điều hướng Bootstrap đang hoạt động. Cách tiếp cận đầu tiên là sử dụng tệp kiểu dáng CSS và thay đổi lớp mục điều hướng khi được nhấp
Cách tiếp cận thứ hai là thay đổi màu sắc bằng jQuery. css() và cũng thay đổi trạng thái lớp thành hoạt động cho một mục điều hướng bằng jQuery
Cách tiếp cận 1. Cung cấp kiểu dáng CSS ghi đè. Để thay đổi màu của phông chữ, có thể thêm tệp kiểu ghi đè vào tệp HTML. Tệp kiểu này sẽ được sử dụng để thay đổi màu phông chữ của mục điều hướng đã chọn. Khi một mục điều hướng được chọn, tệp kiểu này sẽ được thêm vào mục điều hướng cụ thể đó
Ví dụ
html
<!DOCTYPE html>
<html lang=<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>0<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>2<<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>4<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<1<2
<1<<5 <6=<8 <9
<1<<5 html3=html5
html6html7______78=lang0lang1
lang2lang3=lang5lang6
lang2lang8____9=0=1
<1=3
<1<=6 =7==9
html6<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>01____9
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>03
html6<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>05=
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>07
html6<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>09____9<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>11 <9
<1<<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>15 <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>16=
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>18<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>20<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>21<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>15<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<1<<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>15 <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>16=
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>29<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>20<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>21<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>15<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<1<<7<8<7<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<1<<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>43<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>45<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>46
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>45<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>48
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>49<00
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>45<02
<1<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>21____143<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>2<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>21<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>4<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>2<<13<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<1<<17 <18=<20<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>45<<24 <18=<27<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>49 <_______631 ________ 618____9<34 ________ 101=<37<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>1
Màu văn bản Bootstrap giống như trong HTML. Nó cung cấp các lớp màu khác nhau để cung cấp các màu khác nhau cho văn bản. Nếu bạn lấy bất kỳ màu nào trong HTML, chúng ta phải viết logic màu một cách rõ ràng, nhưng trong trường hợp bootstrap, các lớp được xác định trước cung cấp chức năng màu khác nhau. Phương châm chính của màu văn bản là áp dụng các màu khác nhau cho văn bản dựa trên yêu cầu của khách hàng
Các loại lớp màu
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
Màu xanh cho văn bản
Màu Xám nhạt cho Văn bản/p>
Màu xanh lục cho Văn bản
Màu đỏ cho văn bản
Màu vàng cho văn bản
Văn bản có màu hơi xanh
Văn bản sáng với nền đen
Màu tối cho văn bản
Màu nâu nhạt
Màu chữ trắng nền đen
Màu văn bản hoạt động như thế nào trong Bootstrap?
1. Màu văn bản hoạt động dựa trên thuộc tính lớp với giá trị tương ứng. Các giá trị thuộc tính khác nhau cung cấp màu sắc khác nhau cho văn bản ở đầu ra
cú pháp
<div class="container"> <p class="text-primary">Blue color to Text</p> <p class="text-secondary">Light Gray color to Text/p> <p class="text-success">Green color to Text</p> <p class="text-danger">Red color to Text</p> <p class="text-warning">Yellow color to Text</p> <p class="text-info">Slight Blue color to Text</p> <p class="text-light bg-dark">Light text with black background</p> <p class="text-dark">Dark color to Text</p> <p class="text-muted">Light Brown Color</p> <p class="text-white bg-dark">White text color with black background</p> </div>2. Truy cập tất cả các lớp bootstrap được xác định trước vào ứng dụng của chúng tôi, chúng tôi phải sử dụng một số thư viện bootstrap được xác định trước trong mã của chúng tôi. Chúng được liệt kê dưới đây
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>Bao gồm chế độ xem bootstrap
Bao gồm các thư viện ajax và jQuery
Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)
đầu ra
Ví dụ #2
Màu văn bản tắt, trắng, bg tối, sáng
Mã số.
<!DOCTYPE html> <html lang="en"> <head> <title>Text Colors</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <style> h3 { color:green; text-align:center; } p { font-size: 28px; } </style> </head> <body> <div class="container"> <h3 class="header">Text Light and bg dark Class Text Color</h3> <p class="text-light bg-dark"> Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly. </p> <h3 class="header">Text dark Class Text Color</h3> <p class="text-dark"> Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly. </p> <h3 class="header">Text muted Class Text Color</h3> <p class="text-muted"> Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly. </p> <h3 class="header">Text white and bg dark Class Text Color</h3> <p class="text-white bg-dark"> Bootstrap Text Color is just like in the HTML. Bootstrap provides different color classes to provide different colors to the text. If you take any color in HTML, we must write color logic explicitly. </p> <div> </body> </html>đầu ra
Ví dụ #3
Màu văn bản với Độ mờ
Mã số.
<!DOCTYPE html> <html lang="en"> <head> <title>Text Colors</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <style> h3 { color:maroon; text-align:center; } p { font-size: 28px; } </style> </head> <body> <div class="container"> <h3>Opacity with black color</h3> <p class="text-black-50">Opacity property can be observed with black and white text with dark background.</p> <h3>Opacity with white color with dark background</h3> <p class="text-white-50 bg-dark">Opacity property can be observed with black and white text with dark background.</p> <div> </body> </html>đầu ra
Bài viết được đề xuất
Đây là hướng dẫn về Màu văn bản Bootstrap. Ở đây chúng ta thảo luận về Giới thiệu và cách bootstrap có thể được sử dụng để áp dụng các màu khác nhau cho bất kỳ văn bản nào với Triển khai mã. Bạn cũng có thể xem qua các bài viết được đề xuất khác của chúng tôi để tìm hiểu thêm –