"example"트위터 부트 스트랩

Question

의 트위터 부트 스트랩에 기능의 예가 있으며 예제는 클래스 'bs-docs-example'이 포함 된 DIV에 포함되어 있습니다. 모든 DIV의 왼쪽 위 모서리에 'Example'이라는 문자열이 있습니다. 내가 어디에서 그 문자열이오고 내가 그것을 사용할 수/사용자 정의 할 수 있는지 알고 싶습니까?

Answer 1

당신이 .bs-docs-example이 (how to manage content with CSS3 see here에 대한 설명) ::after에 대한 content: "Example" 세트를 가지고 것을 볼 수 있습니다 take a look at the Github for Bootstrap합니다. 당신이 content 멤버를 수정하는 경우

.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; 
} 

텍스트를 수정할 수 있습니다 :

는 기본적으로 .BS-문서-예에 연결된이 스타일을 가지고있다.

Answer 2

나는 조금 늦었다 고 알고 있지만 같은 기능을 원했지만 단어 예제 대신 맞춤 텍스트를 넣기를 원했습니다. 나는 아주 가까이에있는 기존의 부트 스트랩 코드를 사용하여 부트 스트랩을 해킹 할 필요없이 간단한 작업을했다.

아마이

<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> 

은 기본적으로 당신이 당신의 DIV 주위의 경계를 얻을 후 중첩 된 DIV에 다시 사용하고 오프셋 및 배경색을 변경하는 썸네일 클래스를 사용 찾고 있다는 것을 다른 사람을 도울 수 . 그것은 오른쪽 상단과 하단 왼쪽 모서리를 제외하고는 매우 가깝게 보이지만 약간 구부러져 있습니다. 그러나 상자, 텍스트, 링크 등에 원하는 것을 넣을 수는 있습니다.