{"id":4701,"date":"2014-09-19T10:42:22","date_gmt":"2014-09-19T10:42:22","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=4701"},"modified":"2014-09-19T10:42:22","modified_gmt":"2014-09-19T10:42:22","slug":"disenar-una-pagina-web-con-bootstrap","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2014\/09\/disenar-una-pagina-web-con-bootstrap\/","title":{"rendered":"Dise\u00f1ar una p\u00e1gina web con Bootstrap"},"content":{"rendered":"<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/09\/bootstrap.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4816\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/09\/bootstrap.jpg\" alt=\"bootstrap\" width=\"940\" height=\"413\" \/><\/a><\/p>\n<p>Antes de nada vamos a recordar lo que hemos visto hasta ahora en los 2 art\u00edculos anteriores sobre <strong>Bootstrap<\/strong>.<\/p>\n<ul>\n<li>En el <strong>primer art\u00edculo<\/strong> nos centramos en <a title=\"Conociendo BootStrap desde el principio\" href=\"http:\/\/www.apprentalonline.es\/blog\/2014\/04\/comenzando-con-bootstrap\/\" target=\"_blank\" rel=\"noopener\">conocer Bootstrap<\/a>, explicando qu\u00e9 es , qu\u00e9 caracter\u00edsticas tiene y los archivos que los compone.<\/li>\n<li>En el <strong>segundo art\u00edculo<\/strong>, creamos nuestra <a title=\"Primera p\u00e1gina en BootStrap\" href=\"http:\/\/www.apprentalonline.es\/blog\/2014\/05\/primera-pagina-con-bootstrap\/\" target=\"_blank\" rel=\"noopener\">primera versi\u00f3n de p\u00e1gina con Bootstrap<\/a>, as\u00ed como algunos ejemplos de sitios creados con este framework.<\/li>\n<\/ul>\n<p>Una vez hecho el repaso de lo que hemos visto hasta ahora, ha llegado el momento de explicar <strong>c\u00f3mo poder montar un sitio web en poco tiempo<\/strong> a nuestro gusto utilizando las ventajas de BootStrap, creando un sitio adaptable a todo dispositivo sin un gran esfuerzo.<\/p>\n<p>Como ya dijimos en su momento, una de las partes importantes del c\u00f3digo que tenemos que respetar en <strong>Bootstrap<\/strong> es el \u00ab<strong>viewport<\/strong>\u00bb que es el que har\u00e1 que nuestra web est\u00e9 preparada para ser <a href=\"http:\/\/www.apprentalonline.es\/blog\/tag\/responsive\/\" target=\"_blank\" rel=\"noopener\">Responsive<\/a>, es decir, adaptable a dispositivos.<\/p>\n<blockquote><p>\u00ab<strong>Responsive Web Design<\/strong> (RWD): Es una tendencia en dise\u00f1o de sitios web para que tu p\u00e1gina web pueda ser vista de forma correcta en todo tipo de dispositivos.\u00bb<\/p><\/blockquote>\n<p><strong>Bootstrap<\/strong> 2 estaba preparado para que los sitios web se adaptaran a los dispositivos, pero en su \u00faltima versi\u00f3n Bootstrap 3, se cre\u00f3 desde cero pensando en m\u00f3viles, d\u00e1ndole la mayor importancia a este tipo de dispositivos.<\/p>\n<p>Como ya vimos en el post anterior, para que las p\u00e1ginas tengan un funcionamiento correcto en dispositivos m\u00f3viles y se muestren correctamente, tenemos que hacer un buen uso del meta \u00abviewport\u00bb. Este etiqueta tiene dos propiedades que son importantes conocer:<\/p>\n<ul>\n<li><strong>initial-scale<\/strong>: Como en un dispositivo m\u00f3vil se puede hacer zoom (por ejemplo con un movimiento de dos dedos), esta propiedad sirve para controlar a que zoom estar\u00e1 inicialmente la p\u00e1gina. Aconsejo poner por defecto initial-scale=1<\/li>\n<li><strong>user-scalable<\/strong>: Permite controlar si el usuario puede hacer zoom o no en la p\u00e1gina. Por defecto el valor es \u00abyes\u00bb, pero es posible que queramos ponerlo a \u00abno\u00bb en el caso de que tengamos muy bien adaptado a dispositivos nuestro sitio web.Aconsejo poner por defecto user-scalable=yes ya que puede ser contraproducente restringir funciones al usuario.<\/li>\n<\/ul>\n<p>Sabiendo esto por ejemplo si queremos deshabilitar el zoom de nuestras p\u00e1ginas, habr\u00eda que a\u00f1adir lo siguiente:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\nname=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;\n<\/pre>\n<p>Una de las caracter\u00edsticas m\u00e1s importantes de Bootstrap y es su f\u00e1cil manejo para crear sitios webs con su <strong>sistema de rejilla<\/strong>. Por ponerte un ejemplo antes de entrar en materia, si quieres centrar un sitio web respecto la ventana del navegador, tan solo tienes que incluir tu contenido dentro de un div con la clase \u00abcontainer\u00bb.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\nclass=&quot;container&quot;&gt;\n&lt;!-- Aqui ir\u00eda tu contenido --&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>Adem\u00e1s de viewport, BootStrap tambi\u00e9n hace uso de las llamadas <strong>media-queries<\/strong> para poder dividir en \u00abpuntos de ruptura\u00bb en los que cambiar nuestra rejilla seg\u00fan el dispositivo con el que se accede a nuestro sitio.<\/p>\n<p>Estos son los media-queries con los que trabaja BootStrap:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* Dispositivos muy peque\u00f1os (tel\u00e9fonos de hasta 768px de anchura) *\/\n\/* No se define ninguna media query porque este es el estilo por\n   defecto utilizado por Bootstrap 3 *\/\n\n\/* Dispositivos peque\u00f1os (tablets, anchura mayor o igual a 768px) *\/\n@media (min-width: @screen-sm-min) { ... }\n\n\/* Dispositivos medianos (ordenadores, anchura mayor o igual a 992px) *\/\n@media (min-width: @screen-md-min) { ... }\n\n\/* Dispositivos grandes (ordenadores, anchura mayor o igual a 1200px) *\/\n@media (min-width: @screen-lg-min) { ... }\n<\/pre>\n<p>En ocasiones, tambi\u00e9n se utilizan las siguientes media queries que definen la propiedad max-width y permiten restringir los dispositivos a los que se aplican los estilos CSS:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@media (max-width: @screen-xs-max) { ... }\n@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }\n@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }\n@media (min-width: @screen-lg-min) { ... }\n<\/pre>\n<blockquote><p>Nota: Fuente sobre media-queries obtenida de <a title=\"LibrosWeb\" href=\"http:\/\/librosweb.es\/\" target=\"_blank\" rel=\"noopener\">LibrosWeb<\/a><\/p><\/blockquote>\n<h2>Sistema de rejillas de Bootstrap<\/h2>\n<p>Para seguir avanzando en el dise\u00f1o de nuestra primera p\u00e1gina, es necesario conocer el\u00a0<strong>sistema de rejillas de Bootstrap<\/strong>.<\/p>\n<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/09\/bootstrap-rejilla.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4817\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/09\/bootstrap-rejilla.jpg\" alt=\"bootstrap-rejilla\" width=\"907\" height=\"542\" \/><\/a><\/p>\n<p>El sistema de rejillas de <strong>Bootstrap <\/strong>se basa en 12 columnas que se van escalando seg\u00fan el dispositivo con el que se accede, es decir, crece hasta las 12 columnas seg\u00fan vayamos aumentando el tama\u00f1o de la pantalla del dispositivo.<\/p>\n<p>Al fin y al cabo se trata de colocar el contenido dentro de unas filas y columnas, y usar las clases CSS que nos proporciona <strong>Bootstrap <\/strong>para poder manipular nuestros dise\u00f1os.<\/p>\n<p>Estas filas de las que hablo, tienen que estar dentro de un contenedor, que como os he puesto en el ejemplo anterior puede ser la clase \u00ab<em>.container<\/em>\u00ab. Si queremos que este contenedor sea de anchura variable, en lugar de poner la clase .container, podemos usar \u00ab<em>.container-fluid<\/em>\u00ab. Con esto ya vemos lo sencillo que es diferencias entre un dise\u00f1o fluido (con anchura variable) o fija.<\/p>\n<h3>\u00bfC\u00f3mo funciona el sistema de rejillas de BootStrap?<\/h3>\n<p>Existen una serie de normas para que BootStrap funciona de forma correcta, que os paso a citar a continuaci\u00f3n:<\/p>\n<ul>\n<li>Definir siempre una fila dentro de un contenedor tipo <em>.container<\/em> o <em>container-fluid<\/em>, dependiendo de si lo queremos fluido o fijo, as\u00ed podremos tener bien alineadas las filas con su padding correspondiente.<\/li>\n<li>El contenido siempre tiene que ir colocado dentro de las columnas y no en las filas. Es decir, las filas solo se utilizan para estructurar, despu\u00e9s en cada una de las filas colocamos nuestra columna donde podremos meter contenido.<\/li>\n<li>Las columnas se especifican siempre seg\u00fan el total de 12 columnas. Es decir, hay que especificar cuantas de las 12 columnas ocupar\u00e1. Por tanto si queremos dividir una fila en 3 columnas iguales, se utiliza la clase .col-xs-4 (3&#215;4 = 12).<\/li>\n<\/ul>\n<p>Sabiendo estas peque\u00f1as normas, podemos hacer maravillas con el c\u00f3digo para adaptar nuestro sitio a los distintos dispositivos. Para que ve\u00e1is un ejemplo de c\u00f3mo se tiene que crear una p\u00e1gina para un dispositivo u otro, me baso en los ejemplos de <a href=\"http:\/\/librosweb.es\/bootstrap_3\/capitulo_2\/tipos_de_rejillas.html\" target=\"_blank\" rel=\"noopener\">LibrosWeb<\/a>:<\/p>\n<h3>Ejemplo de rejilla creada con Bootstrap<\/h3>\n<p>Usando la clase \u201c.col-md-*.\u201d Esta rejilla se ve verticalmente en dispositivos m\u00f3viles peque\u00f1os o extra peque\u00f1os y horizontalmente en un ordenador medio o grande:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\nclass=&quot;row&quot;&gt;\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n  class=&quot;col-md-1&quot;&gt;.col-md-1\n&lt;\/div&gt;\nclass=&quot;row&quot;&gt;\n  class=&quot;col-md-8&quot;&gt;.col-md-8\n  class=&quot;col-md-4&quot;&gt;.col-md-4\n&lt;\/div&gt;\nclass=&quot;row&quot;&gt;\n  class=&quot;col-md-4&quot;&gt;.col-md-4\n  class=&quot;col-md-4&quot;&gt;.col-md-4\n  class=&quot;col-md-4&quot;&gt;.col-md-4\n&lt;\/div&gt;\nclass=&quot;row&quot;&gt;\n  class=&quot;col-md-6&quot;&gt;.col-md-6\n  class=&quot;col-md-6&quot;&gt;.col-md-6\n&lt;\/div&gt;\n<\/pre>\n<h3>Ejemplo de contenedor de anchura variable<\/h3>\n<p>Para tener una rejilla de anchura fija en una rejilla de anchura variable ocupando toda la anchura del navegador se ha de cambiar la clase \u201c<em>.container<\/em>\u201d por la \u201c<em>container-fluid<\/em>\u201d en aquel elemento que contiene los dem\u00e1s elementos de la rejilla:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\nclass=&quot;container-fluid&quot;&gt;\n class=&quot;row&quot;&gt;\n    ...\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<h3>Ejemplo de rejilla para m\u00f3viles y ordenadores<\/h3>\n<p>Imaginaos que no quer\u00e9is que se vea verticalmente en dispositivos peque\u00f1os. Para ello utilizaremos a la vez las clases \u201d<em>.col-xs*<\/em>\u201d y \u201d<em>.colo-md-*<\/em>\u201d<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- En los m\u00f3viles las columnas se muestran verticalmente porque\n     una de ellas ocupa toda la anchura del dispositivo y la otra\n     columna ocupa la mitad --&gt;\nclass=&quot;row&quot;&gt;\n  class=&quot;col-xs-12 col-md-8&quot;&gt;.col-xs-12 col-md-8\n  class=&quot;col-xs-6 col-md-4&quot;&gt;.col-xs-6 .col-md-4\n&lt;\/div&gt;\n\n&lt;!-- En un m\u00f3vil las columnas ocupan la mitad del dispositivo y en un\n     ordenador ocupan la tercera parte de la anchura disponible --&gt;\nclass=&quot;row&quot;&gt;\n  class=&quot;col-xs-6 col-md-4&quot;&gt;.col-xs-6 .col-md-4\n  class=&quot;col-xs-6 col-md-4&quot;&gt;.col-xs-6 .col-md-4\n  class=&quot;col-xs-6 col-md-4&quot;&gt;.col-xs-6 .col-md-4\n&lt;\/div&gt;\n\n&lt;!-- Las columnas ocupan siempre la mitad de la pantalla, tanto en un\n     m\u00f3vil como en un ordenador de escritorio --&gt;\nclass=&quot;row&quot;&gt;\n  class=&quot;col-xs-6&quot;&gt;.col-xs-6\n  class=&quot;col-xs-6&quot;&gt;.col-xs-6\n&lt;\/div&gt;\n<\/pre>\n<p>Espero que esta parte del tutorial os haya servido de ayuda. Para el pr\u00f3ximo cap\u00edtulo veremos como resetear, desplazar, anidar, reordenar las columnas para adaptar los dise\u00f1os a lo que m\u00e1s nos convenga.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes de nada vamos a recordar lo que hemos visto hasta ahora en los 2 art\u00edculos anteriores sobre Bootstrap. En el primer art\u00edculo nos centramos en conocer Bootstrap, explicando qu\u00e9 es , qu\u00e9 caracter\u00edsticas tiene y los archivos que los compone. En el segundo art\u00edculo, creamos nuestra primera versi\u00f3n de p\u00e1gina con Bootstrap, as\u00ed como [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":4816,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[32,34],"tags":[266,269,60,130,61,268],"class_list":["post-4701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-de-sitios-web","category-programacion-de-sitios-web","tag-bootstrap","tag-css","tag-customizacion","tag-html5","tag-personalizacion-wordpress","tag-responsive"],"featured_image_src":{"landsacpe":false,"list":false,"medium":false,"full":false},"_links":{"self":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/4701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/comments?post=4701"}],"version-history":[{"count":0,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/4701\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/media?parent=4701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/categories?post=4701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/tags?post=4701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}