2012-06-22 15 views

Trả lời

20

Bạn có thể thêm id hoặc class của riêng bạn để thẻ nội dung của trang index của bạn để nhắm mục tiêu tất cả các yếu tố trên trang đó với một phong cách tùy chỉnh như sau:

<body id="index"> 
    <h1>...</h1> 
</body> 

Sau đó, bạn có thể nhắm mục tiêu các yếu tố bạn muốn sửa đổi với lớp hoặc id của bạn như vậy:

#index h1 { 
    color:red; 
} 
+2

là có lớp học được xây dựng cho chức năng này – gkalikapersaud

+1

@GavindraKalikapersaud CÓ. Xem câu trả lời của Connor Leech dưới đây. – Heraldmonkey

+0

Hãy coi chừng, giải pháp này hoạt động với các màu tùy chỉnh mà không thay đổi màu văn bản theo ngữ cảnh. Câu trả lời này là hoàn hảo cho câu hỏi OP. Có lẽ bạn đang tìm kiếm những thứ khác. –

102

trong bootstrap 3 đây là những lớp học để thay đổi màu sắc văn bản:

<p class="text-muted">...</p> //grey 
<p class="text-primary">...</p> //light blue 
<p class="text-success">...</p> //green 
<p class="text-info">...</p> //blue 
<p class="text-warning">...</p> //orangish,yellow 
<p class="text-danger">...</p> //red 

Tài liệu dưới Helper classes - Contextual colors.

+5

Giải pháp tốt hơn đã chấp nhận câu trả lời. Liên kết bên: http://getbootstrap.com/css/#helper-classes – trante

+0

Thực ra, tuy nhiên đây là câu trả lời rất hay, không hoạt động cho màu tùy chỉnh mà không thay đổi màu theo ngữ cảnh của văn bản. Có lẽ bạn có thể upvote câu trả lời này bởi vì là tốt, nhưng câu trả lời thực sự cho câu hỏi OP là chấp nhận. –

1

Ngoài câu trả lời của @Connor Leech.

Nếu bạn muốn tạo kiểu chữ tùy chỉnh mới của riêng mình, hãy xác định các điều sau trong tệp css của bạn.

.text-foo { 
    .text-emphasis-variant(#FFFFFF); 
} 

Kết hợp text-emphasis-variant được định nghĩa trong tệp Bootstrap's mixins.less.

3

Sau khi xem xét kỹ này bản thân mình (Sử dụng lớp Màu Chữ trong câu trả lời Connor Leech của)

Được cảnh báo phải chú ý cẩn thận đến lớp "navbar-text".

Để có được văn bản màu xanh lá cây trên navbar ví dụ, bạn có thể bị cám dỗ để làm điều này:

<p class="navbar-text text-success">Some Text Here</p> 

này sẽ không hoạt động !! "navbar-text" ghi đè màu và thay thế bằng màu văn bản thanh điều hướng tiêu chuẩn.

Cách đúng để làm điều đó là để tổ văn bản trong một yếu tố thứ hai, EG:

<p class="navbar-text"><span class="text-success">Some Text Here</span></p> 

hoặc trong trường hợp của tôi (văn bản như tôi muốn nhấn mạnh)

<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p> 

Khi bạn làm theo cách này, bạn sẽ có được văn bản được căn chỉnh phù hợp với chiều cao của thanh điều hướng và bạn cũng có thể thay đổi màu sắc.

-1

bạn có thể sử dụng kiểu font Giống như:

 <font color="white"><h1>Header Content</h1></font> 
+0

Thẻ phông chữ? Điều đó đã bị phản đối một thập kỷ trước. – mwieczorek

0

Có lớp helper trong bootstrap 3 với màu sắc theo ngữ cảnh xin vui lòng sử dụng các lớp học trong các thuộc tính html.

<p class="text-muted">...</p> 
<p class="text-primary">...</p> 
<p class="text-success">...</p> 
<p class="text-info">...</p> 
<p class="text-warning">...</p> 
<p class="text-danger">...</p> 

tham khảo:http://getbootstrap.com/css/#type

0

Cách tốt nhất để giải quyết vấn đề này sẽ là bằng cách bắt đầu với tùy Bootstrap sử dụng công cụ tùy biến của họ.

http://getbootstrap.com/customize/

Đi xuống @ tiêu đề màu và thay đổi nó từ "thừa hưởng" một cái gì đó mà bạn muốn tiêu đề của bạn sẽ được trên trang web (nếu bạn thích mặc định chỉ cần thay đổi nó để # 333).

Lưu ý rằng điều này sẽ giữ cho tất cả các tiêu đề của bạn có cùng màu, như bạn đã yêu cầu.

Bây giờ để hoàn thành những gì bạn muốn sau khi bạn thực hiện thay đổi này, bây giờ bạn có thể ghi đè chúng cụ thể trong CSS của riêng bạn để áp dụng màu của riêng bạn cho chúng. Từ khóa "kế thừa" mà tôi luôn tìm thấy là một nỗi đau trong các khung công tác.

Các vấn đề liên quan