{"id":4562,"date":"2014-04-24T13:49:08","date_gmt":"2014-04-24T13:49:08","guid":{"rendered":"http:\/\/www.apprentalonline.es\/blog\/?p=4562"},"modified":"2014-04-24T13:49:08","modified_gmt":"2014-04-24T13:49:08","slug":"comenzando-con-bootstrap","status":"publish","type":"post","link":"https:\/\/www.k3bone.com\/blog\/2014\/04\/comenzando-con-bootstrap\/","title":{"rendered":"Comenzando con BootStrap"},"content":{"rendered":"<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/04\/Bootstrap.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4564\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/04\/Bootstrap.png\" alt=\"Comenzando con BootStrap\" width=\"938\" height=\"303\" \/><\/a><\/p>\n<p>Desde <span class=\"hiddenSpellError\">App<\/span> <span class=\"hiddenSpellError\">Rental<\/span> <span class=\"hiddenSpellError\">Online<\/span> queremos dar a conocer <span class=\"hiddenSpellError\">BootStrap<\/span>, uno de los <span class=\"hiddenSpellError\">frameworks<\/span> para desarrollo web que mas ha dado que hablar en los \u00faltimos tiempos con la intenci\u00f3n de que todos pod\u00e1is realizar proyectos web de una forma sencilla y sin conocimientos avanzados en <span class=\"hiddenSpellError\">HTML<\/span> y <span class=\"hiddenSpellError\">CSS<\/span>.<\/p>\n<p>Para ello vamos a publicar una serie de art\u00edculos con la intenci\u00f3n de llegar a tener al final un <strong><span class=\"hiddenSpellError\">Tutorial<\/span> paso a paso de <span class=\"hiddenSpellError\">BootStrap<\/span><\/strong> para que puedas realizar tus propios sitios web.<\/p>\n<p>El art\u00edculo de hoy se basar\u00e1 en tener un conocimiento generalizado de lo que es este maravilloso <span class=\"hiddenSpellError\">framework<\/span>.<\/p>\n<p>Estar\u00e1 divido en las siguientes partes:<\/p>\n<ol>\n<li>\u00bfQu\u00e9 es <span class=\"hiddenSpellError\">BootStrap<\/span>?<\/li>\n<li>Caracter\u00edsticas importantes de <span class=\"hiddenSpellError\">BootStrap<\/span><\/li>\n<li>Descargar <span class=\"hiddenSpellError\">BootStrap<\/span><\/li>\n<li>Contenido del <span class=\"hiddenSpellError\">framework<\/span> <span class=\"hiddenSpellError\">BootStrap<\/span><\/li>\n<\/ol>\n<h3>\u00bfQu\u00e9 es <span class=\"hiddenSpellError\">BootStrap<\/span>?<\/h3>\n<p><strong><span class=\"hiddenSpellError\">BootStrap<\/span><\/strong>, para aquellos que no lo conozcan, es un <span class=\"hiddenSpellError\">framework<\/span> <span class=\"hiddenSpellError\">javascript<\/span> open-source para ayudar a construir <span class=\"hiddenSpellError\">interfases<\/span> de usuario como un sitio web. Es una combinaci\u00f3n de <span class=\"hiddenSpellError\">HTML<\/span>, <span class=\"hiddenSpellError\">CSS<\/span> y c\u00f3digo <span class=\"hiddenSpellError\">Javascript<\/span> aunque tambi\u00e9n soporta HTML5 y CSS3. Una de las caracter\u00edsticas m\u00e1s importantes que tiene es que <span class=\"hiddenSpellError\">BootStrap<\/span> es un <span class=\"hiddenSpellError\">framework<\/span> con dise\u00f1o <span class=\"hiddenSpellError\">adaptativo<\/span>, es decir, <span class=\"hiddenSpellError\">Responsive<\/span> Web <span class=\"hiddenSpellError\">Design<\/span>.<\/p>\n<p>Ha sido <span class=\"hiddenSpellError\">desarrolado<\/span> por el equipo de <span class=\"hiddenSpellError\">Twitter<\/span> con lo que podemos tener la suficiente confianza en el c\u00f3digo y para que veas el potencial que tiene, <span class=\"hiddenSpellError\">Joomla<\/span> 3.0 lo incluye por defecto en su instalaci\u00f3n.<\/p>\n<h3>Caracter\u00edsticas importantes de <span class=\"hiddenSpellError\">BootStrap<\/span><\/h3>\n<p>Entre las caracter\u00edsticas que cabe destacar de este poderoso <span class=\"hiddenSpellError\">Framework<\/span> son:<\/p>\n<ul>\n<li>F\u00e1cil y sencillo: Con tan solo un fichero <span class=\"hiddenSpellError\">CSS<\/span> y otro <span class=\"hiddenSpellError\">Javascript<\/span> podemos comenzar a utilizarlo.<\/li>\n<li>Se basa en los \u00faltimos est\u00e1ndares.<\/li>\n<li>La curva de aprendizaje es baja, no hacen falta conocimientos avanzados para poder utilizarlo<\/li>\n<li>Compatible con todos los navegadores m\u00e1s importantes.<\/li>\n<li>Arquitectura basada en <span class=\"hiddenSpellError\">LESS<\/span><\/li>\n<li>Utiliza un <span class=\"hiddenSpellError\">reset<\/span> <span class=\"hiddenSpellError\">CSS<\/span> basado en Normalize.css<\/li>\n<li><span class=\"hiddenSpellError\">Responsive<\/span> Web <span class=\"hiddenSpellError\">Design<\/span>: Tal y como hemos comentado antes,es un <span class=\"hiddenSpellError\">framework<\/span> con dise\u00f1o <span class=\"hiddenSpellError\">adaptativo<\/span> con lo que se adapta a los distintos dispositivos.<\/li>\n<\/ul>\n<p>Como veis es un <span class=\"hiddenSpellError\">framework<\/span> muy completo y con el que podemos tener resultados espectaculares.<\/p>\n<h3>Descargar <span class=\"hiddenSpellError\">BootStrap<\/span><\/h3>\n<p>Hay distintas formas de descargar <span class=\"hiddenSpellError\">BootStrap<\/span> para comenzar a utilizarlo dependiendo del tipo de p\u00fablico, es decir, del nivel de conocimiento t\u00e9cnico.<\/p>\n<ol>\n<li><strong>Descargar c\u00f3digo compilado<\/strong>: Es la manera m\u00e1s f\u00e1cil de empezar con este <span class=\"hiddenSpellError\">framework<\/span>. Para descargar esta versi\u00f3n accede a <a title=\"Descargar BootStrap compilado\" href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">getBootstrap.com<\/a><\/li>\n<li><strong>Descargar c\u00f3digo fuente<\/strong>: Es un <span class=\"hiddenSpellError\">pack<\/span> que contiene todos los archivos <span class=\"hiddenSpellError\">Less<\/span> y <span class=\"hiddenSpellError\">Javascript<\/span> originales, pero es necesario tener un compilador de <span class=\"hiddenSpellError\">Less<\/span> y algo de configuraci\u00f3n. La \u00faltima versi\u00f3n de este paquete lo ten\u00e9is en <a title=\"Descargar c\u00f3digo fuente de BootStrap\" href=\"https:\/\/github.com\/twbs\/bootstrap\/releases\" target=\"_blank\" rel=\"noopener\">github.com\/<span class=\"hiddenSpellError\">twbs<\/span>\/<span class=\"hiddenSpellError\">bootstrap<\/span>\/<span class=\"hiddenSpellError\">releases<\/span><\/a><\/li>\n<li><strong>Descargar c\u00f3digo fuente en formato <span class=\"hiddenSpellError\">SASS<\/span><\/strong>: Es muy parecida a la anterior y fue creada <span class=\"hiddenSpellError\">b\u00e1sicamnte<\/span> para <strong>integrar <span class=\"hiddenSpellError\">BootStrap<\/span> con <span class=\"hiddenSpellError\">Ruby<\/span> <span class=\"hiddenSpellError\">On<\/span> <span class=\"hiddenSpellError\">Rails<\/span><\/strong>, <span class=\"hiddenSpellError\">Compass<\/span> o cualquier otro proyecto que est\u00e9 basado en <span class=\"hiddenSpellError\">SASS<\/span>. PAra descargar la \u00faltima versi\u00f3n de este paquete ten\u00e9is que acceder a <a title=\"Descargar c\u00f3digo fuente BootStrap en formato SASS\" href=\"https:\/\/github.com\/twbs\/bootstrap-sass\/releases\" target=\"_blank\" rel=\"noopener\">github.com\/<span class=\"hiddenSpellError\">twbs<\/span>\/bootstrap-sass\/releases<\/a><\/li>\n<\/ol>\n<p>Otra forma con la que podemos trabajar con <span class=\"hiddenSpellError\">BootStrap<\/span> y sin necesidad de descarga es con la <span class=\"hiddenSpellError\">CDN<\/span> de <span class=\"hiddenSpellError\">NetDNA<\/span>. Esta empresa aloja en sus servidores copia de los archivos necesarios (<span class=\"hiddenSpellError\">CSS<\/span> y <span class=\"hiddenSpellError\">Javascript<\/span>) de <span class=\"hiddenSpellError\">BootStrap<\/span>. Al igual que podemos hacer con la <span class=\"hiddenSpellError\">CDN<\/span> de <span class=\"hiddenSpellError\">jQuery<\/span>, lo <span class=\"hiddenSpellError\">\u00fanco<\/span> que tendremos que hacer es una referencia mediante enlaces en la cabecera de nuestro sitio web.<\/p>\n<pre>[<span class=\"hiddenSpellError\">php<\/span>]\n<!-- Versi\u00f3n compilada y comprimida del <span class=\"hiddenSpellError\" pre=\"del \">CSS<\/span> de Bootstrap --> \n<!-- Tema opcional --> rel=\"<span class=\"hiddenSpellError\">stylesheet<\/span>\" <span class=\"hiddenSpellError\">href<\/span>=\"\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.0\/css\/bootstrap-theme.min.css\"&gt;\n<!-- Versi\u00f3n compilada y comprimida del <span class=\"hiddenSpellError\" pre=\"del \">JavaScript<\/span> de Bootstrap --><script src=\"\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.0\/js\/bootstrap.min.js\"><\/script>[\/<span class=\"hiddenSpellError\">php<\/span>]<\/pre>\n<p>Algo que tenemos que tener muy en cuenta a la hora de utilizar <span class=\"hiddenSpellError\">BootStrap<\/span> es que todos los <span class=\"hiddenSpellError\">plugins<\/span> <span class=\"hiddenSpellError\">JavaScript<\/span> de <span class=\"hiddenSpellError\">BootStrap<\/span> necesitan la librer\u00eda <span class=\"hiddenSpellError\">jQuery<\/span> para su funcionamiento, as\u00ed que tendr\u00e9is que incluirlo en vuestras librer\u00edas o bien hacer referencia a alg\u00fan <span class=\"hiddenSpellError\">CDN<\/span> como por ejemplo los de <span class=\"hiddenSpellError\">Google<\/span>, <span class=\"hiddenSpellError\">Microsoft<\/span> o el propio de <span class=\"hiddenSpellError\">jQuery<\/span>:<\/p>\n<pre>[<span class=\"hiddenSpellError\">php<\/span>]\n\/\/ <span class=\"hiddenSpellError\">From<\/span> <span class=\"hiddenSpellError\">Google<\/span> <span class=\"hiddenSpellError\">API<\/span><script class=\"hiddenSpellError\">\/\/ <![CDATA[\nsrc<\/span>=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.1\/jquery.min.js\">\n\/\/ ]]><\/script>\/\/ <span class=\"hiddenSpellError\">From<\/span> <span class=\"hiddenSpellError\">Microsoft<\/span><script class=\"hiddenSpellError\">\/\/ <![CDATA[\n<span data-mce-bogus=\"1\" class=\"mceItemHidden\">\/\/ \n\nsrc<\/span-->=\"http:\/\/ajax.aspnetcdn.com\/ajax\/<span class=\"hiddenSpellError\" pre=\"\" data-mce-bogus=\"1\">jQuery<\/span>\/jquery-1.6.1.min.js\"&gt;\n\/\/ ]]&gt;<\/span>\n\/\/ ]]><\/script>\/\/ <span class=\"hiddenSpellError\">From<\/span> <span class=\"hiddenSpellError\">jQuery<\/span><script class=\"hiddenSpellError\">\/\/ <![CDATA[\nsrc<\/span>=\"http:\/\/code.jquery.com\/jquery-1.6.1.min.js\">\n\/\/ ]]><\/script>\/\/ Minified <span class=\"hiddenSpellError\">version<\/span><script class=\"hiddenSpellError\">\/\/ <![CDATA[\nsrc<\/span>=\"http:\/\/code.jquery.com\/jquery-1.6.1.js\">\n\/\/ ]]><\/script>\/\/ Source <span class=\"hiddenSpellError\">version<\/span> [\/<span class=\"hiddenSpellError\">php<\/span>]<\/pre>\n<h3>Contenido del <span class=\"hiddenSpellError\">framework<\/span> <span class=\"hiddenSpellError\">BootStrap<\/span><\/h3>\n<p><span class=\"hiddenSpellError\">BootStrap<\/span> se compone de distintos archivos que nos ayudan a poder codificar de una manera sencilla un sitio web sin necesidad de grandes conocimientos. Eso s\u00ed, dependiendo del tipo de instalaci\u00f3n que hayamos elegido variar\u00e1 la estructura de directorios. Por tanto vamos a mostrar como quedar\u00edan los directorios seg\u00fan el tipo de instalaci\u00f3n:<\/p>\n<p><strong>Estructura de directorios de la versi\u00f3n compilada de <span class=\"hiddenSpellError\">BootStrap<\/span><\/strong><\/p>\n<p>Una vez <span class=\"hiddenSpellError\">descromprimido<\/span> los archivos descargados de este paquete podr\u00e1s ver la siguiente estructura de directorios y archivos:<\/p>\n<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/04\/1contenidoBootStrap.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4565\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/04\/1contenidoBootStrap.png\" alt=\"Estructura de directorios de la versi\u00f3n compilada de BootStrap\" width=\"355\" height=\"318\" \/><\/a><\/p>\n<p>En este <span class=\"hiddenSpellError\">pack<\/span> tenemos dos variantes de los archivos. Por un lado los archivos compilados con formato <span class=\"hiddenSpellError\">bootstrap<\/span>.* y por otro los compilados y comprimidos con formato bootstrap.min.*.<\/p>\n<p><strong>Estructura de directorios de la versi\u00f3n original de <span class=\"hiddenSpellError\">BootStrap<\/span><\/strong><\/p>\n<p>Aqu\u00ed encontraremos, adem\u00e1s de las versiones compiladas de los <span class=\"hiddenSpellError\">CSS<\/span> y <span class=\"hiddenSpellError\">Javascript<\/span>, las versiones originales de esos mismos archivos y la documentaci\u00f3n.<\/p>\n<p><a href=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/04\/2contenidoBootStrap.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4566 size-full\" src=\"https:\/\/www.k3bone.com\/blog\/wp-content\/uploads\/2014\/04\/2contenidoBootStrap.png\" alt=\"Estructura de directorios de la versi\u00f3n original de BootStrap\" width=\"235\" height=\"237\" \/><\/a><\/p>\n<p>El directorio \u00ab<span class=\"hiddenSpellError\">dist<\/span>\u00bb contienen los mismos archivos que la versi\u00f3n anterior pero compilados. En el directorio \u00ab<span class=\"hiddenSpellError\">docs<\/span>\u00bb tenemos el c\u00f3digo fuente de la documentaci\u00f3n as\u00ed como ejemplos que se incluyen en el directorio \u00ab<span class=\"hiddenSpellError\">examples<\/span>\u00ab.<\/p>\n<p>Ya hemos dado nuestros primeros pasos en cuanto al conocimiento de <span class=\"hiddenSpellError\">BootStrap<\/span>. En los pr\u00f3ximos art\u00edculos empezaremos con el c\u00f3digo creando nuestra <strong>primera p\u00e1gina con <span class=\"hiddenSpellError\">BootStrap<\/span><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desde App Rental Online queremos dar a conocer BootStrap, uno de los frameworks para desarrollo web que mas ha dado que hablar en los \u00faltimos tiempos con la intenci\u00f3n de que todos pod\u00e1is realizar proyectos web de una forma sencilla y sin conocimientos avanzados en HTML y CSS. Para ello vamos a publicar una serie [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":4564,"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,70,130,268],"class_list":["post-4562","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-frameworks","tag-html5","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\/4562","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=4562"}],"version-history":[{"count":0,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/posts\/4562\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/media?parent=4562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/categories?post=4562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.k3bone.com\/blog\/wp-json\/wp\/v2\/tags?post=4562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}