"ví dụ" tiêu đề trong twitter bootstrap

Question

trên twitter bootstrap có các ví dụ về các tính năng và các ví dụ được chứa trong các DIV với lớp 'bs-docs-example'. mỗi DIV như vậy có chuỗi 'Ví dụ' được viết ở góc trên bên trái. tôi muốn biết chuỗi đó đến từ đâu và nếu tôi có thể sử dụng/tùy chỉnh nó?

Answer 1

Nếu bạn take a look at the Github for Bootstrap bạn sẽ thấy rằng .bs-docs-example có content: "Example" đặt cho ::after (để được giải thích trên how to manage content with CSS3 see here).

Về cơ bản, .bs-docs-dụ có phong cách này gắn liền với nó:

.bs-docs-example::after 
{ 
    content: "Example"; 
    position: absolute; 
    top: -1px; 
    left: -1px; 
    padding: 3px 7px; 
    font-size: 12px; 
    font-weight: bold; 
    background-color: whiteSmoke; 
    border: 1px solid #DDD; 
    color: #9DA0A4; 
    -webkit-border-radius: 4px 0 4px 0; 
    -moz-border-radius: 4px 0 4px 0; 
    border-radius: 4px 0 4px 0; 
} 

Nếu bạn sửa đổi content thành viên bạn sẽ sửa đổi các văn bản.

Answer 2

Tôi biết đã muộn một chút, nhưng tôi cũng muốn có cùng một tính năng, nhưng muốn đặt văn bản tùy chỉnh thay cho ví dụ từ. Tôi đã đưa ra một công việc nhỏ nhanh chóng xung quanh bằng cách sử dụng mã bootstrap hiện có rất gần, không cần hack bootstrap.

Có lẽ điều này có thể giúp người khác ra rằng đang tìm

<div class="row">  
    <div class="span12 thumbnail"> 
    <span class="thumbnail span1 muted text-center" style="margin-top:-5px; margin-left:-5px; background-color:#f5f5f5;"> 
     <small><strong>YOUR CUSTOM TEXT</strong></small> 
    </span>  
    </div> 
</div> 

Về cơ bản bạn sử dụng lớp thumbnail để có được đường viền quanh ảnh div của bạn, sau đó sử dụng nó một lần nữa trong một div lồng nhau và bù đắp nó và thay đổi màu nền . Nó trông rất gần, ngoại trừ góc trên bên phải và góc dưới bên trái hơi cong, Tuy nhiên bạn có thể đặt bất cứ thứ gì bạn muốn trong hộp, văn bản, liên kết, v.v.