{"id":7412,"date":"2014-11-20T23:21:12","date_gmt":"2014-11-20T22:21:12","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=7412"},"modified":"2014-11-20T23:21:12","modified_gmt":"2014-11-20T22:21:12","slug":"bootstrap-el-prefabricado-de-la-web-monografico-conceptos-y-algunas-alternativas-parte-ii","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/bootstrap-el-prefabricado-de-la-web-monografico-conceptos-y-algunas-alternativas-parte-ii\/","title":{"rendered":"BootStrap, el prefabricado de la web. Monogr\u00e1fico: Conceptos y algunas alternativas. Parte II"},"content":{"rendered":"

Parte II \u2013 Adentr\u00e1ndonos m\u00e1s en Bootstrap<\/strong><\/h3>\n

Sistema de Rejilla en Bootstrap.<\/p>\n

http:\/\/getbootstrap.com\/css\/#grid-options<\/a><\/p>\n

El ancho de la pantalla se divide en 12 columnas por defecto. Estas 12 dejan entre ellas un espacio de 30px (15 a cada lado), por cada lado hay un margen de 15px del contenedor.<\/p>\n

El contenedor de las columnas se centra en pantalla, es fluido, se adapta al tama\u00f1o de la ventana y en su interior alberga filas. Las filas agrupan columnas.<\/p>\n

Para que las columnas funcionen adecuadamente tienen que ir dentro de las filas y todas ellas dentro de un contenedor.<\/p>\n

A esas columnas es posible aplicarle las clases(prefijo) que definen la media querie empleada.<\/p>\n

Por defecto es xs de mobile first.<\/p>\n

Una regla b\u00e1sica es que la suma de las columnas existentes en una fila no sumen m\u00e1s de 12. Y no aplicar estilos que existen entre las columnas para evitar saltos.<\/p>\n

Sigamos …<\/p>\n

<\/p>\n

Ejemplo b\u00e1sico<\/strong><\/p>\n

<div class=\u201dcontainer\u201d>\r\n                <div class=\u201drow\u201d>\r\n                      <div class=\u201dcol-xs-6\u201d>una de 6 <\/div>\r\n                      <div class=\u201dcol-xs-3\u201d> una de 3<\/div>\r\n                      <div class=\u201dcol-xs-3\u201d>una de 3<\/div>\r\n                <\/div>\r\n<\/div><\/pre>\n
Vemos en 1 fila, con 12 columnas en estilo mobile first. Esto crea 3 columnas de 6, 3,3. La primera el doble de grande que el resto. Pero esto todav\u00eda no es responsive.<\/p>\n
Ahora un elemento esencial es poder sobreescribir estilos mediante:<\/p>\n
<div class=\u201dcontainer\u201d>\r\n                <div class=\u201drow\u201d>\r\n                      <div class=\u201dcol-xs-6 mi-estilo-columna\u201d>una de 6 <\/div>\r\n                      <div class=\u201dcol-xs-3 mi-estilo-columna\u201d>una de 3<\/div>\r\n                      <div class=\u201dcol-xs-3 mi-estilo-columna\u201d>una de 3<\/div>\r\n                 <\/div>\r\n<\/div><\/pre>\n
 <\/p>\n
\u00bfPero c\u00f3mo aplico responsive con los col?<\/p>\n
Observa este ejemplo que difiere del anterior<\/p>\n
<div class=\u201dcontainer\u201d>\r\n                <div class=\u201drow\u201d>\r\n                      <div class=\u201dcol-xs-6  col-sm-2 mi-estilo-columna\u201d>1 <\/div>\r\n                      <div class=\u201dcol-xs-3 col-sm-6 mi-estilo-columna\u201d>2<\/div>\r\n                      <div class=\u201dcol-xs-3 col-sm-4 mi-estilo-columna\u201d>3<\/div>\r\n                 <\/div>\r\n<\/div><\/pre>\n
 <\/p>\n
Podremos observar que ahora se aplicar\u00e1 cada estilo en funci\u00f3n del tama\u00f1o.<\/p>\n
La que med\u00eda 6 en Tablet medir\u00e1 2, todo ello en funci\u00f3n de la resoluci\u00f3n aplicada.<\/p>\n
 <\/p>\n
IMPORTANTE<\/strong>: Bootstrap mira la clase m\u00e1s a la derecha para aplicar los estilos tipo col-<\/p>\n
En funci\u00f3n de la resoluci\u00f3n. Con un mismo HTML gestionaremos un mismo contenido para diferentes escenarios. Podemos ir anidando col a la derecha para diferentes resoluciones.<\/p>\n
Ejemplo para 4 tipos de tama\u00f1o:<\/p>\n
<div class=\u201dcontainer\u201d>\r\n\r\n                <div class=\u201drow\u201d>\r\n\r\n                      <div class=\u201dcol-xs-6 col-sm-2 col-md-3 col-lg-1 mi-estilo-columna\u201d>1 <\/div>\r\n\r\n                      <div class=\u201dcol-xs-3 col-sm-6 col-md-5 col-lg-8 mi-estilo-columna\u201d>2<\/div>\r\n\r\n                      <div class=\u201dcol-xs-3 col-sm-4 col-m3-4 col-lg-3 mi-estilo-columna\u201d>3<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div><\/pre>\n
IMPORTANTE: Observa c\u00f3mo voy cuadrando las columnas a 12 para cada escenario de arriba abajo. En funci\u00f3n de la resoluci\u00f3n siempre coger\u00e1 \u00a0el estilo m\u00e1s a la derecha. S<\/p>\n
Otro ejemplo, para hace que en un m\u00f3vil todas las columnas funcionen una debajo de otra:<\/p>\n
<div class=\u201dcontainer\u201d>\r\n\r\n                <div class=\u201drow\u201d>\r\n\r\n                      <div class=\u201dcol-xs-12 col-sm-2 col-md-3 col-lg-1 mi-estilo-columna\u201d>1 <\/div>\r\n\r\n                      <div class=\u201dcol-xs-12 col-sm-6 col-md-5 col-lg-8 mi-estilo-columna\u201d>2<\/div>\r\n\r\n                      <div class=\u201dcol-xs-12 col-sm-4 col-m3-4 col-lg-3 mi-estilo-columna\u201d>3<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
Para dejar espacios con Offset \u00a0<\/strong><\/p>\n
El prefijo offset de un col- funciona por la izquierda y es en n\u00famero de columnas por la izquierda que esa columna deja libres.<\/p>\n
<div class=\u201dcol-xs-12 col-xs-offset<\/strong>-4 col-sm-2 col-md-3 col-lg-1 mi-estilo-columna\u201d>1 <\/div><\/p>\n
 <\/p>\n
Para gestionar el orden con Push y Pull \u2013 Intercambio de columnas<\/strong><\/p>\n
Se realiza mediante push y pull. Intercambiar columnas en funci\u00f3n del contexto. Y evitar que no sobrepasen el contenedor.<\/p>\n
<div class=\u201dcol-xs-12 col-sm-4 col-sm-push-8<\/strong> mi-estilo-columna\u201d>DERECHA<\/div><\/p>\n
<div class=\u201dcol-xs-12 col-sm-4 col-sm-pull-8<\/strong> mi-estilo-columna\u201d>IZQUIERDA<\/div><\/p>\n
 <\/p>\n
Gestionar una fila mayor en altura.<\/strong><\/p>\n
<div class=\u201dclearfix visible-xs\u201d> <\/div><\/p>\n
El clearfix tiene efecto a partir del tama\u00f1o xs siendo visible. Para respetar el alto de las columnas. Rompe el float.<\/p>\n
 <\/p>\n
Anidamiento de rejillas<\/strong><\/p>\n
En Bootstrap es posible anidar rejillas. Dentro de una columna insertar una nueva fila, y dentro de esa fila insertar columnas.<\/p>\n
\u00a0<\/strong><\/p>\n
IMPORTANTE<\/strong>:<\/p>\n
No es necesario maquetar todo en bootstrap, podemos realizar cosas en rejilla, pero otro tipo de cuestiones se puede solucionar con nuestras propias CSS personalizadas sin usar GRID. Todo dependiendo de la situaci\u00f3n que necesitemos.<\/p>\n
Ejemplo:<\/p>\n
<div class=\u201dcontainer\u201d>\r\n\r\n                <div class=\u201drow\u201d>\r\n\r\n                                <div class=\u201dcol-xs-12\u201d>Dejamos solo una columna (12 grids)<div>\r\n\r\n<\/div>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
Ahora podr\u00edamos incorporar dentro del div class col-xs-12 nuestros propios dise\u00f1os a medida.<\/p>\n
O crear un contenedor para todo y eliminar los m\u00e1rgenes que bootstrap deja para todos los entornos excepto para m\u00f3viles.<\/p>\n
El contenedor completo quedar\u00eda fuera de class container<\/p>\n
<div id=\u201dmi-full-width\u201d style=\u201dwidth:100%;\u201d>\r\n\r\n<div class=\u201dcontainer\u201d>\r\n\r\n                <div class=\u201drow\u201d>\r\n\r\n                                <div class=\u201dcol-xs-12\u201d>Dejamos solo una columna (12 grids)<div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/pre>\n
 <\/p>\n
Bootstrap ofrece tambi\u00e9n estilos para etiquetas HTML y clases especiales.<\/p>\n
Muchas de estas caracter\u00edsticas por defecto se pueden sobreescribir con CSS.<\/p>\n
Por ejemplo los H1 tienen unos estilos determinados, pero si no nos gusta podemos redefinirlo. \u00a0Adem\u00e1s posee un texto secundario m\u00e1s peque\u00f1o para h1<\/p>\n
Ejemplo: <h1>El Titulo<small>Texto m\u00e1s peque\u00f1o <\/small><\/h1><\/p>\n
 <\/p>\n
Para destacar un p\u00e1rrafo:<\/p>\n
<p class=\u201dlead\u201d>P\u00e1rrafo destacado acto para responsive<\/p><\/p>\n
Otro ejemplo curioso para resaltar una combinaci\u00f3n de teclas.<\/p>\n
<kbd>Control+A <\/kbd><\/p>\n
\u00a0<\/strong><\/p>\n
Otro aspecto interesante de Bootstrap son las listas.<\/p>\n
Las listas son elementos muy utilizados en HTML. Bootstrap emplea muchos estilos para las listas. Las <ol> y <ul> poseen un comportamiento est\u00e1ndar. Pero posee clases para otro tipo de listas.<\/p>\n
Ejemplo: .list-unstyled , elimina indicador.<\/p>\n
.list-inline, listas en l\u00ednea, ejemplo: <ol class=\u201dlist-inline\u201d> <\/ol><\/p>\n
.dl-horizontal, listas de descripci\u00f3n tanto vertical como horizontal. <dl><dd><\/dd><\/dl><\/p>\n
 <\/p>\n
Tablas en Bootstrap<\/strong><\/p>\n
La clase es table. Esta clase nos permite definir la tabla de serie bootstrap.<\/p>\n
Podremos modificar algunos elementos:<\/p>\n
.table-bordered, .table-condensed, .table-striped<\/p>\n
Ejemplo:\u00a0 <table class=\u201dtable table-striped\u201d> <\/table><\/p>\n
\u00a0<\/strong><\/p>\n
Adem\u00e1s de estos modificadores podemos emplear otros efectos:<\/p>\n
Ejemplo:\u00a0 <table class=\u201dtable table-over\u201d> <\/table><\/p>\n
Adem\u00e1s para las filas:<\/p>\n
.danger,.warning,.info,.success,.active<\/p>\n
Ejemplos:<\/p>\n
class=\u201dtext-active bg-active\u201d<\/p>\n
class=\u201dtext-success bg-success\u201d<\/p>\n
class=\u201dtext-danger bg-danger<\/p>\n
\u2026.<\/p>\n
 <\/p>\n
Adem\u00e1s la clase table-responsible como contenedor a una tabla nos permite crearla responsive.<\/strong><\/p>\n
Ejemplo:<\/p>\n
<div class=\u201dtable-responsive\u201d><\/p>\n
<table class=\u201dtable\u201d> \u2026 <\/table><\/p>\n
<\/div><\/p>\n
\u00a0<\/strong><\/p>\n
Formularios en Bootstrap<\/strong><\/p>\n
Permite definir nuevos \u00a0y eficaces layouts as\u00ed como sus comportamientos en diferentes modos responsive.<\/p>\n
Elementos disponibles<\/p>\n
<div class=\u201dform-group\u201d> <\/div> <!\u2014permite crear grupos para cada elemento del formulario<\/p>\n
\u00a0<\/strong><\/p>\n
Ejemplo input:<\/strong><\/p>\n
<div class=\u201dform-group><\/p>\n
<label for=\u201demail\u201d> Correo<\/label><\/p>\n
<input id=\u201dcorreo\u201d type=\u201dtext\u201d class=\u201dform-control\u201d><\/p>\n
<\/div><\/p>\n
 <\/p>\n
Ejemplo checkbox<\/strong><\/p>\n
<div class=\u201dcheckbox\u201d><\/p>\n
<label><\/p>\n
<input type=\u201dcheckbox\u201d id=\u201delemento-a\u201d value=\u201da\u201d> A<\/p>\n
<\/label><\/p>\n
<\/div><\/p>\n
 <\/p>\n
Elemento select<\/strong><\/p>\n
<select class=\u201dform-control\u201d><\/p>\n
<option>primera opci\u00f3n <\/option><\/p>\n
<option>segunda opci\u00f3n <\/option><\/p>\n
\u2026.<\/p>\n
<\/select><\/p>\n
 <\/p>\n
Elemento radio<\/strong><\/p>\n
<div class=\u201dradio\u201d><\/p>\n
<label><\/p>\n
<input type=\u201dradio\u201d name=\u201donumero\u201d id=\u201donumero\u201d value=\u201d1\u201d><\/p>\n
<\/div><\/p>\n
 <\/p>\n
La mayor\u00eda de los elementos del formulario tendr\u00e1n la class \u201cform-control\u201d y el tipo de control.<\/p>\n
\u00a0<\/strong><\/p>\n
Por defecto todos los campos del formulario ocupan 12 grids, es decir 1 sola columna por cada control del formulario.<\/p>\n
Si colocamos en el formulario:<\/p>\n
<form class=\u201dform-inline\u201d action=\u201d*.php\u201d><\/p>\n
<!\u2014Autom\u00e1ticamente deja todos los campos en l\u00ednea<\/p>\n
Para realizar saltos entre campos podemos utilizar la clase clearfix<\/p>\n
Ejemplo: <span class=\u201dclearfix\u201d <\/span><\/p>\n
 <\/p>\n
Los layouts o dise\u00f1os \u00a0de rejilla pueden ser aplicados a los formularios. Podremos separar cada campo en filas row para aplicar responsive en funci\u00f3n del tama\u00f1o o resoluci\u00f3n de pantalla.<\/p>\n
 <\/p>\n
Al alto de los campos puede ser ajustado con las class de ayuda.<\/p>\n
Ejemplo: <input id=\u201dmialto\u201d type=\u201dtext\u201d class\u201dform-control input-lg<\/strong>\u201d><\/p>\n
 <\/p>\n
Respecto a las validaciones, bootstrap nos ofrece una serie de clases para realizar estas comprobaciones.<\/p>\n
 <\/p>\n
Ejemplos<\/strong>:<\/p>\n
Para desactivar un campo<\/p>\n
<input id=\u201dnombre\u201d class=\u201dform-control\u201d disabled><\/p>\n
Adem\u00e1s podemos mostrar una ayuda<\/p>\n
<span class=\u201dhelp-block\u201d> Ayuda debajo del input<\/span><\/p>\n
 <\/p>\n
Para ver si esta correcto: class=\u201dform-group has-success\u201d , has-error, has-warning, has-info<\/p>\n
Adem\u00e1s podemos a\u00f1adir un icono: has-feedback y debajo del input un span con el icono a mostrar.<\/p>\n
Ejemplo para mostrar un ok<\/p>\n
<div class=\u201dform-group has-success has-feedback\u201d>\r\n\r\n                <label for=\u201dusername\u201d class=\u201dcontrol-label\u201d> Nombre <\/label>            \r\n\r\n                <input id=\u201dusername\u201d type=\u201dtext\u201d class=\u201dform-control\u201d>\r\n\r\n                <span class=\u201dglyphicon glyphicon-ok form-control-feedback> <\/span\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
Para crear botones, mediante la class btn<\/strong><\/p>\n
<button class=\u201dbtn\u201d >Mi bot\u00f3n <\/button><\/p>\n
Se pueden solapar m\u00e1s<\/p>\n
<button class=\u201dbtn btn-primary\u201d> Mi bot\u00f3n <\/button><\/p>\n
Otras pueden ser btn-info, btn-danger, etc\u2026<\/p>\n
 <\/p>\n
Para las im\u00e1genes<\/strong><\/p>\n
Bootstrap proporciona una clase para las im\u00e1genes para gestionar el responsive que es:<\/p>\n
class=\u201dimg-responsive\u201d<\/p>\n
Adem\u00e1s ofrece otros estilos especiales:<\/p>\n
class=\u201dimg-rounded\u201d<\/p>\n
class=\u201dimg-circle\u201d<\/p>\n
class=\u201dimg-thumbnail\u201d<\/p>\n
 <\/p>\n
 <\/p>\n
En la tercera parte veremos los componentes y algunos conceptos m\u00e1s avanzados y Consideraciones sobre bootstrap en editores CMS como WordPress.<\/strong><\/p>\n
\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Parte II \u2013 Adentr\u00e1ndonos m\u00e1s en Bootstrap Sistema de Rejilla en Bootstrap. http:\/\/getbootstrap.com\/css\/#grid-options El ancho de la pantalla se divide en 12 columnas por defecto. Estas 12 dejan entre ellas un espacio de 30px (15 a cada lado), por cada lado hay un margen de 15px del contenedor. El contenedor de las columnas se centra en pantalla, es fluido, se adapta al tama\u00f1o de la ventana y en su interior alberga filas. Las filas agrupan columnas. Para que las columnas funcionen adecuadamente tienen que ir dentro de las filas y todas ellas dentro de un contenedor. A esas columnas es posible aplicarle las clases(prefijo) que definen la media querie empleada. Por defecto es xs de mobile first. Una regla b\u00e1sica es que la suma de las columnas existentes en una fila no sumen m\u00e1s de 12. Y no aplicar estilos que existen entre las columnas para evitar saltos. Sigamos …<\/p>\n","protected":false},"author":1,"featured_media":7132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[580,418,446],"tags":[],"class_list":["post-7412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frameworks","category-html-2","category-html5"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=7412"}],"version-history":[{"count":1,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7412\/revisions"}],"predecessor-version":[{"id":7413,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7412\/revisions\/7413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/7132"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=7412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=7412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=7412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}