encabezado "ejemplo" en twitter bootstrap

Question

en twitter bootstrap hay ejemplos de las características y los ejemplos están contenidos en DIVs con la clase 'bs-docs-example'. cada DIV tiene la cadena 'Ejemplo' escrita en la esquina superior izquierda. Quiero saber de dónde viene esa secuencia y si puedo usar/personalizarla?

Answer 1

Si take a look at the Github for Bootstrap verá que tiene .bs-docs-examplecontent: "Example" conjunto de ::after (para una explicación sobre how to manage content with CSS3 see here).

Básicamente, .BS-docs-ejemplo tiene este estilo que se le atribuye:

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

Si modifica content miembro podrás modificar el texto.

Answer 2

Sé que es un poco tarde, pero también quería la misma función, pero quería poner texto personalizado en lugar de la palabra ejemplo. Se me ocurrió hacer un pequeño trabajo rápido usando el código de arranque existente que está muy cerca, sin necesidad de hackear el bootstrap.

Tal vez esto puede ayudar a alguien que esté buscando

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

Básicamente se utiliza la clase miniatura para obtener la frontera alrededor de su div, a continuación, utilizar de nuevo en un div anidado y el desplazamiento y cambiar el color de fondo . Se ve extremadamente cerca, excepto por las esquinas superiores derecha e inferior izquierda, son ligeramente curvas. Sin embargo, puedes poner lo que quieras en el cuadro, texto, enlaces, etc.