Tips Bootstrap parte 2

imagen / Pythonizame
  
26 de Marzo de 2016   0  

Esta es la segunda parte de los tips de bootstrap en donde te mostramos una serie de características que ta vez no conocías de Bootstrap y que pudieran ser muy útiles para tus proyectos en web. La primera parte la puedes consulltar en Tips Bootstrap Parte 1.

 

1. Modales sin backdrop

Bueno comenzamos esta entrada con una funcionalidad super útil de los modales en bootstrap, la característica backdrop.

modal backdrop

 

Muchas veces nos topamos con la necesidad de hacer que los modales en bootstrap no se puedan cerrar haciendo click fuera del modal, y tal vez hemos pensado que es un poco complicado o que tal vez se requiere de JS. Bueno la solución a esto es el famoso data-backdrop="false" que podemos incluir como atributo en el elemento que llama al modal, el ejemplo es:

 

<!-- Button trigger modal -->
<button type="button" data-backdrop="false" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

De forma predeterminada Bootstrap siempre trae habilitada la funcionalidad, es por ello que nosotros atraves de un simple atributo data podemos deshabilitarlo sin recurrir a cosas mas "sobrenaturales". De la misma forma podemos deshabilitar el cierre de un modal por medio de la tecla "ESC" utilizando el atributo data-keyboard.

 

2. Columnas offset

En bootstrap existen las clases tipo .col-md-offset-* que nos ayudan a mover nuestras columnas hacia la derecha, simulando un espacio de columna 1,2,3,4..etc. según necesitemos, estos espacios pueden ser cambiantes dependiendo del tamaño de resolución utilizando md, sm, xs. Por ejemplo en la siguiente imagen vemos que  .col-md-offset-4 mueve 4 columnas a .col-md-4.  

 

 

Quedaría mas o menos así:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

 

3. Clases para transformación de texto.

Sabemos que bootstrap nos ofrece un sin fin de clases muy útiles, y que muchas veces no utilizamos por desconocerlos, un ejemplo de ello son las clases de transformación de textos.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Lo anterior nos da como resultado:

lowercased text.

UPPERCASED TEXT.

Capitalized Text.

Estas clases aunque son muy sencillas, son muy útiles a la hora de maquetar y trabajar con distintos tipos de letras que requieran transformaciones sencillas.

Bueno pues con esto concluimos esta segunda parte de los tips de Bootstrap, espero les sea de gran utilidad y que puedan aplicarlos en sus proyectos web, pronto estaré publicando una tercera parte. :)



Gaspar Dzul

Desarrollador Front End y Móvil.

Temas relacionados