{"id":4590,"date":"2014-05-27T12:53:58","date_gmt":"2014-05-27T12:53:58","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=4590"},"modified":"2014-05-27T12:53:58","modified_gmt":"2014-05-27T12:53:58","slug":"primera-pagina-con-bootstrap","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2014\/05\/primera-pagina-con-bootstrap\/","title":{"rendered":"Primera p\u00e1gina con BootStrap"},"content":{"rendered":"

\"bootstrap\"<\/a><\/p>\n

Hace unos pocos d\u00edas comenzamos una serie de art\u00edculos para aprender a utilizar BootStrap<\/strong>, en el que dimos un primera introducci\u00f3n: \u00abComenzando con BootStrap<\/a>\u00ab.<\/p>\n

Con este primer art\u00edculo, vimos las caracter\u00edsticas principales de BootStrap<\/strong>, los tipos de archivos que podemos descargar para empezar a utilizar el framework y como se har\u00eda la llamada de cada uno de ellos.<\/p>\n

Para dejaros con la miel en los labios y animaros a seguir con este peque\u00f1o tutorial, os voy a mostrar algunos ejemplos de sitios web realizados con BootStrap<\/strong>:<\/p>\n

\"Ejemplo<\/a><\/p>\n

\"Ejemplo<\/a><\/p>\n

\"Ejemplo<\/a><\/p>\n

\"Ejemplo<\/a><\/p>\n

Para ver m\u00e1s ejemplos os dejo un enlace con referencias a sitios web hechos exclusivamente con BootStrap:<\/p>\n

\"Built<\/a><\/p>\n

Hoy vamos a lo que todos nos gusta y que siempre se espera con ansia en cualquier tutorial o curso que es el c\u00f3digo. Vamos a escribir algo de c\u00f3digo para familiarizarnos con BootStrap realizando nuestra primera web super sencilla pero con algunas nociones b\u00e1sicas que deberemos tener.<\/p>\n

Mi primera p\u00e1gina con BootStrap<\/h2>\n

Vamos a colocarnos el casco y los guantes reglamentarios para ponernos manos a la obra escribiendo nuestra primera p\u00e1gina con el contenido b\u00e1sico para poder comenzar a utilizar BootStrap, pero antes quiero que ve\u00e1is la diferencia, por eso primero voy a poneros un c\u00f3digo m\u00ednimo de una p\u00e1gina web y despu\u00e9s como quedar\u00eda preparado para BootStrap:<\/p>\n

C\u00f3digo Simple sin BootStrap<\/strong>:<\/p>\n

\n<!DOCTYPE html>\n<html lang=amp;quot;enamp;quot;>\n  <head>\n    <meta charset=amp;quot;utf-8amp;quot;>\n    <meta http-equiv=amp;quot;X-UA-Compatibleamp;quot; content=amp;quot;IE=edgeamp;quot;>\n    <title>Mi primera web con Bootstrap<\/title>\n  <\/head>\n  <body>\n    <h1>AppRentalOnline - Tu Blog preferido<\/h1>\n  <\/body>\n<\/html>\n<\/pre>\n
C\u00f3digo adaptado para poder utilizar BootStrap<\/strong>:<\/p>\n
\n<!DOCTYPE html><!-- Bootstrap funciona con documentos HTML 5 -->\n<html lang=amp;quot;enamp;quot;>\n  <head>\n    <meta charset=amp;quot;utf-8amp;quot;>\n    <meta http-equiv=amp;quot;X-UA-Compatibleamp;quot; content=amp;quot;IE=edgeamp;quot;>\n    <!--\n\t\tEl viewport es un atributo que permite definir\n\t\tla anchura de la ventana del navegador para\n\t\tadaptar la p\u00e1gina autom\u00e1ticamente\n\t-->\n\t<meta name=amp;quot;viewportamp;quot; content=amp;quot;width=device-width, initial-scale=1amp;quot;>\n    <title>Mi primera web con Bootstrap<\/title>\n\n    <!-- CSS de Bootstrap -->\n    <link href=amp;quot;css\/bootstrap.min.cssamp;quot; rel=amp;quot;stylesheetamp;quot; media=amp;quot;screenamp;quot;>\n\n    <!-- librer\u00edas opcionales que activan el soporte de HTML5 para IE8 -->\n    <!--[if lt IE 9]>\n      <script src=amp;quot;https:\/\/oss.maxcdn.com\/libs\/html5shiv\/3.7.0\/html5shiv.jsamp;quot;><\/script>\n      <script src=amp;quot;https:\/\/oss.maxcdn.com\/libs\/respond.js\/1.4.2\/respond.min.jsamp;quot;><\/script>\n    <![endif]-->\n  <\/head>\n  <body>\n    <h1>AppRentalOnline - Tu Blog preferido<\/h1>\n\n    <!-- Librer\u00eda jQuery requerida por los plugins de JavaScript -->\n    <script src=amp;quot;http:\/\/code.jquery.com\/jquery.jsamp;quot;><\/script>\n\n    <!-- Todos los plugins JavaScript de Bootstrap (tambi\u00e9n puedes\n         incluir archivos JavaScript individuales de los \u00fanicos\n         plugins que utilices) -->\n    <script src=amp;quot;js\/bootstrap.min.jsamp;quot;><\/script>\n  <\/body>\n<\/html>\n<\/pre>\n
Notas: Como puedes ver hay unas l\u00edneas que sirven de comentario dentro del c\u00f3digo que puedes distinguirlas por su color verde (dependiendo de la configuraci\u00f3n de vuestro editor puede ser un color u otro) o porque est\u00e1n encerrados entre las etiquetas correspondientes. Si lo tienes claro, estos comentarios los puedes eliminar, pero te aconsejo que te acostumbres a poner comentarios de tu c\u00f3digo para futuras modificaciones.<\/p><\/blockquote>\n
A partir de esta primera p\u00e1gina ya podremos empezar a usar el c\u00f3digo de este estupendo Framework, de todas formas, como algunos no est\u00e1is familiarizados con Responsive Web Design (a partir de ahora lo llamaremos RWD), quiero destacar la parte del c\u00f3digo donde informamos VIEWPORT.<\/p>\n
\n<meta name=amp;quot;viewportamp;quot; content=amp;quot;width=device-width, initial-scale=1amp;quot;>\n<\/pre>\n
Esta l\u00ednea de c\u00f3digo es la que nos permite que la p\u00e1gina tenga la posibilidad de ser adaptable (RWD).<\/p>\n
Plantillas de ejemplo<\/h2>\n
Siempre es mejor empezar desde cero una p\u00e1gina web con BootStrap para aprender debidamente como funciona y as\u00ed poder modificar o crear nuevas plantillas a tu gusto sin ninguna duda. De todas formas tambi\u00e9n me gustar\u00eda deciros que en Internet podemos encontrar diversos sitios con plantillas BootStrap<\/strong> para descargar o comprar, aunque en esta parte del art\u00edculo os mostrar\u00e9 las plantillas o ejemplos que ponen a nuestra disposici\u00f3n en la web oficial y con las que podemos ganar mucho tiempo si sabemos bien la estructura que tendr\u00e1 nuestro sitio web.<\/p>\n
\"Plantillas<\/a><\/p>\n
En la imagen pod\u00e9is ver algunos de los distintos tipos de estructuras b\u00e1sicas con las que podemos empezar un proyecto, y que BootStrap ha tenido el detalle de compartir el c\u00f3digo con todos los usuarios. Para poder acceder al c\u00f3digo de todos estos ejemplos, pod\u00e9is hacerlo desde aqu\u00ed<\/a> o haciendo clic en el imagen anterior.<\/p>\n
Ahora que tenemos funcionando nuestra primera p\u00e1gina en BootStrap, en el pr\u00f3ximo art\u00edculo iremos a\u00f1adiendo elementos que har\u00e1n que nuestra p\u00e1gina vaya teniendo forma.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hace unos pocos d\u00edas comenzamos una serie de art\u00edculos para aprender a utilizar BootStrap, en el que dimos un primera introducci\u00f3n: \u00abComenzando con BootStrap\u00ab. Con este primer art\u00edculo, vimos las caracter\u00edsticas principales de BootStrap, los tipos de archivos que podemos descargar para empezar a utilizar el framework y como se har\u00eda la llamada de cada […]<\/p>\n","protected":false},"author":3,"featured_media":4679,"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,267,60,70,130,67],"class_list":["post-4590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-de-sitios-web","category-programacion-de-sitios-web","tag-bootstrap","tag-css3","tag-customizacion","tag-frameworks","tag-html5","tag-plantillas"],"featured_image_src":{"landsacpe":false,"list":false,"medium":false,"full":false},"_links":{"self":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/4590","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=4590"}],"version-history":[{"count":0,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/4590\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/media?parent=4590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/categories?post=4590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/tags?post=4590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}