En este articulo nos basaremos en el framework BootStrap v. 3.3.7 la cual simplifica y agiliza al momento de maquetar en el desarrollo web. La cual tiene etiquetas y clases predefinidos la cual vamos a conocer.

Encabezados :

<h1>Encabezado h1</h1> 
<h2>Encabezado h2</h2> 
<h3>Encabezado h3</h3> 
<h4>Encabezado h4</h4> 
<h5>Encabezado h5</h5> 
<h6>Encabezado h6</h6>

Encabezados con Texto secundarios :

<h1>Encabezado h1 <small>Texto Secuandario</small></h1>
<h2>Encabezado h2 <small>Texto Secuandario</small></h2>
<h3>Encabezado h3 <small>Texto Secuandario</small></h3>
<h4>Encabezado h4 <small>Texto Secuandario</small></h4>
<h5>Encabezado h5 <small>Texto Secuandario</small></h5>
<h6>Encabezado h6 <small>Texto Secuandario</small></h6>

Clases para alineaciones de Texto :

  • .text-left : alinea el texto a la izquierda.
  • .text-right : alinea el texto a la derecha.
  • .text-center : centra el texto.
  • .text-justify : Justifica el texto
  • .text-warp : Sin texto envolvente.

Clases predefinidos para Textos :

  • .lead : hace que el párrafo destaque.
  • .blockquote-reverse : hace que se muestra al revés el bloque de texto citado.

Etiquetas HTML predefinidos para Textos :

  • <small> : Muestra un texto pequeño.
  • <mark> : Muestra un texto resaltado de color amarillo.
  • <del>, <s> : Muestra un Texto borrado o tachado.
  • <ins>, <u> : Muestra un Texto subrayado o insertado.
  • <code> : Muestra el texto como código resaltado.
  • <kbd> : Muestra el texto en formato para entradas del teclado.
  • <blockquote> : Muestra un bloque de texto citado combinado con <p> para títulos y <footer> como pie del bloque.
  • <address> : Muestra un formato de dirección de lugar combinado con <strong> y saltos de lineas <br>.
  • <abbr> : Para mostrar abreviaturas de un texto acompañado con el atributo “title” para el tooltip.

Ejemplo del código de etiquetas y clases:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>Titular nivel 1</h1>
            <h2>Titular nivel 2</h2>
            <h3>Titular nivel 3</h3>
            <h4>Titular nivel 4</h4>
            <h5>Titular nivel 5</h5>
            <h6>Titular nivel 6</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, fuga dolorum molestias ex vitae adipisci rerum tempora est error reprehenderit excepturi repellendus facere iusto repellat atque. Eos, porro ad adipisci.</p>
            <h4>Titular <small>con texto secundario</small></h4>
            <p class="lead">Párrafo destacado con <code>.lead</code>: <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</em></p>
            <blockquote class="blockquote-reverse">
                <p>O texto destacado con blockquote.</p>
                <footer>Con efectos adicionales como un footer o alineación invertida con <code>.blockquote-reverse</code>.</footer>
            </blockquote>
            <p class="text-left">Alineamiento a la izquierda con <code>.text-left</code>.</p>
            <p class="text-right">Alineamiento a la derecha con <code>.text-right</code></p>
            <p class="text-center">Alineamiento centrado con <code>.text-center</code></p>
            <p class="text-justify">E incluso alineamiento justificado mediante la clase <code>.text-justify</code> que requiere de textos más extensos para poder apreciarse correctamente su efecto sobre un párrafo.</p>
            <p>Formato propio para direcciones:</p>
            <address> <strong>Roger Natividad</strong><br>
Calle vivienda, 1 2º<br>
Ciudad, CP008<br>
<abbr title="teléfono">t.</abbr> (+51) 977 987 977</address>
        </div>
    </div>

Aquí el Resultado :

Clases predefinidos para listas :

  • .list-unstyled : Quita el símbolo tanto de la lista ordenada o desordenada (<ol> y <ul>).
  • .list-inline : Muesta los elementos de las lista en forma lineal o horizontal.
  • .dl-horizontal : Muestra los términos y definición en formato horizontal de las etiquetas <dl> conteniendo <dt> y <dd>.

Clases predefinidos para Tablas :

  • .table : Muestra la tabla formateada con estilos tanto en la cabezera y las filas.
  • .table-striped : Muestra las filas interlineado con un color para una mejor lectura.
  • .table-bordered : Muestra las filas y columnas de la tabla con bordes.
  • .table-hover : Muestra las filas con un color cuando se le pasa el cursor encima.
  • .table-condensed : Muestra tabla con un estilo mas compacta y condensada.

Clases para colorear filas o celdas de Tablas :

  • .active : Muestra la fila con un color plomo de fondo.
  • .success : Muestra la fila con un color verde de fondo.
  • .info : Muestra la fila con un color celeste de fondo.
  • .warning : Muestra la fila con un color amarillo claro de fondo.
  • .danger : Muestra la fila con un color rojo de fondo.

Para tener una tabla responsive usamos un etiqueta DIV con la clase .table-responsive que englobe la tabla.

NOTA

Clases para Formularios y sus controles :

  • .form-group : agrupa al label con su respectivo control de formulario.
  • .form-control : da un estilo un control de formulario.
  • .form-control-static : para mostrar datos estáticos y se aplica a etiquetas label.
  • .input-lg : muestra el control de formulario de tamaño grande.
  • .input-sm : muestra el control de formulario de tamaño pequeño.
  • .checkbox : agrupa un control de tipo checkbox con su texto label.
  • .radio : agrupa un control de tipo radio con su texto label.
  • .checkbox-inline : se le agrega esta clase al label para mostrar los checkbox en forma lineal.
  • .radio-inline : se le agrega esta clase al label para mostrar los radiobutton en forma lineal.
  • .disabled : muestra el control de formulario de forma visual desabilitado.
  • .form-inline : es una clase que se agrega al formulario para que sus controles se muestren de forma horizontal en linea.
  • .form-horizonal : muestra en formlario en forma de dos columnas de label y control de formulario, hace juego con la rejilla usando el label ya agrupando el control con un div como (col-xs, col-sm, col-md, col-lg).

Clases para botones de Formularios :

  • .btn : aplica el estilo visual al de un botón tanto para botones, enlaces, inputs.
  • .btn-primary : aplica el botón de color azul.
  • .btn-default : aplica el botón de color por defecto.
  • .btn-success : aplica el botón de color verde.
  • .btn-warning :  aplica el botón de color naranja.
  • .btn-danger : aplica el botón de color rojo.
  • .btn-block : aplica el botón de forma de bloque, ocupa todo el ancho de su etiqueta superior.
  • .btn-xs : muestra un botón con tamaño extra-small.
  • .btn-sm : muestra el botón con tamañao small.
  • .btn-lg : muestra el botón con tamaña large.

Clases predefinidos para Imágenes :

  • .img-responsive : muestra la imagen en forma responsive dependiendo el viewport (tamaño de pantalla).
  • .img-rounded : muestra el imagen con un estilo de esquina redondeada.
  • .img-circle : muestra la imagen con un estilo circular.
  • .img-thumbnail : muestra la imagen con un estilo bordes  thumbnail.

Clases predefinidos para dar color al Texto :

  • .text-muted : aplica un color plomo al texto.
  • .text-primary : aplica un color azul al texto.
  • .text-success : aplica un color verde al texto.
  • .text-info : aplica un color celeste al texto.
  • .text-warning : aplica un color oliva al texto.
  • .text-danger : aplica un color rojo al texto.

Clases para dar color de fondo al Texto :

  • .bg-primary : aplica un color azul de fondo al texto.
  • .bg-success : aplica un color verde de fondo al texto.
  • .bg-info : aplica un color celeste de fondo al texto.
  • .bg-warning : aplica un color amarillo de fondo al texto.
  • .bg-danger : aplica un color rojo de fondo al texto.