El seguimiento:
.show-grid [class*="span"] {
significa que todos los elementos secundarios de '.show-grid' con una clase que CONTIENE la palabra 'span' adquirirán esas propiedades CSS.
<div class="show-grid">
<div class="span">.span</div>
<div class="span6">span6</div>
<div class="attention-span">attention</div>
<div class="spanish">spanish</div>
<div class="mariospan">mariospan</div>
<div class="espanol">espanol</div>
<div>
<div class="span">.span</div>
</div>
<p class="span">span</p>
<span class="span">I do GET HIT</span>
<span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>
<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>
Todos los elementos son golpeados, excepto el <span>
propio.
En lo que respecta a Bootstrap:
span6
: esta fue la técnica de andamiaje de Bootstrap 2 que dividió una sección en una cuadrícula horizontal, basada en partes de 12. Por lo tanto span6
lo , tendría un ancho del 50%.
- En la implementación actual de Bootstrap (v.3 y v.4), ahora usa las
.col-*
clases (por ejemplo col-sm-6
), que también especifica un punto de interrupción de medios para manejar la capacidad de respuesta cuando la ventana se reduce por debajo de cierto tamaño. Verifique Bootstrap 4.1 y Bootstrap 3.3.7 para obtener más documentación. Recomendaría ir con un Bootstrap posterior hoy en día