El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Trabajar con columnas de Bootstrap en Dreamweaver CC 2017

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Bootstrap está muy bien integrado dentro de Dreamweaver CC 2017 y es lógico, porque es, en este momento, el framework más utilizado para adaptar los contenidos a dispositivos móviles. En este vídeo aprenderemos a integrar Bootstrap en nuestros HTML.

Transcripción

Aunque esto no es un curso de Bootstrap, sin embargo, bueno, vamos a explicar un poco cómo trabajar con este "framework". Yo puedo crear nuevos documentos que ya tienen Bootstrap integrados; de hecho puedo utilizar Plantillas de inicio para elegir diferentes tipos de documentos o, también, lo que puedo hacer es crear un nuevo documento y pedir que utilice Bootstrap. Puedo pedir que me cree un CSS nuevo de Bootstrap o puedo decirle que utilice uno que ya tengo instalado, porque, por ejemplo, haya hecho otra página basada en el "framework". Voy a pedir que cree uno nuevo y voy a mantener el diseño que viene por defecto. El número de columnas 12. Esto me va crear una página que en realidad integra, dentro de ella, varios elementos propios de Bootstrap; por ejemplo, un "Footer" o, por ejemplo, una Barra de navegación. Es interesante ver que además, inmediatamente de repente me han empezado aparecer Media Queries en la parte superior. Eso es debido a que Bootstrap las tiene definidas y, de hecho, pues tengo para más de 768 y para menos de 768. Al hacer cambios en ellos, pues estoy viendo también que hay diferentes elementos que han cambiado. Por ejemplo, esta barra de navegación en la cual antes, voy a verlo, tenía muchos botones y, sin embargo, cuando voy a tamaños más pequeños desaparecen y me muestra un desplegable que me permite hacer las mismas selecciones, pero reorganizadas. Es uno de los componentes que más se utilizan en Bootstrap, pero no el único. Tengo muchos más y, entre ellos, la posibilidad de trabajar con Columnas, con contenedores que tienen dentro columnas. Vamos a ver cómo hacer esto y lo vamos hacer sobre un documento que ni siquiera tenga el Bootstrap instalado. Voy a coger el índice y lo voy a guardar como: ".index_bt", por ejemplo. En referencia al nombre del framework. Y voy a eliminar los contenidos que me sobran para trabajar con el resto. Voy a quitar este artículo y en este artículo pues, voy a quitar todas estas etiquetas. Tengo ese artículo vacío. Voy a intentar hacer algo parecido a lo que tenía antes, pero utilizando Bootstrap. Y, para ello, necesito, lo primero que todo, añadir un contenedor. Bueno, pues hago clic en ese contenedor, lo coloco anidado. Ese contenedor ahora me permite añadir columnas dentro de él. De hecho, si me muevo a la vista de Código, me voy a encontrar con que, primero, me añade todo lo necesario para trabajar con Bootstrap y, en segundo lugar, me ha añadido simplemente un "div" que tiene la clase "container", que es precisamente el tipo de elemento que acabo de añadir. Si yo selecciono este objeto, pues efectivamente me muestra que es un contenedor. Sobre este elemento, ahora tendré que añadir elementos, lo que llama, "Grid row with column". Esto, básicamente, consiste en añadir una fila que tiene un número determinado de columnas ¿Cuántas voy a necesitar? Bueno, pues, por ejemplo, en mi caso yo voy a necesitar dos, porque va ser para la fotografía y para el texto. Y puedo ponerlo "Antes", "Después" o "Anidado". Voy a pulsar en "Anidar". Y, efectivamente, esto ahora, vuelvo de nuevo al Código, lo que me ha añadido es una clase "row", una clase "fila", y, dentro de ella, dos clases "columnas" que están configuradas para que tengan un tamaño de seis columnas cada una, lo cual significa que cada una de ellas va a tener la mitad del tamaño disponible Yo, en realidad, la imagen que quiero colocar aquí es más pequeña. Si pincho y arrastro, se va ir viendo en la parte izquierda cómo la clase "col sm 4" va cambiando de número: cuatro, tres... la voy a poner en cuatro. Eso va servir para que la fotografía ocupe cuatro columnas y, en cambio, en la columna de la derecha o en el texto voy a hacer que ocupe ocho columnas. Y así, una más otra, voy a conseguir que hayan ya llegado a ocupar esas 12 columnas. Lo siguiente que tengo que hacer es añadir contenidos dentro. Puedo irme a HTML y añadir una imagen. Selecciono esa imagen, pido que me la ponga anidada. Añado la imagen y esta imagen la modifico, quitándole el ancho que viene por defecto y ahora mediante un selector para ella, en estilo CSS para esa imagen en concreto. Bueno, pues puedo pedir que tenga la propiedad de ancho 100 %... se puede hacer de muchas maneras, esta es una posibilidad. Otra podría ser utilizar las imágenes propias de Bootstrap, pero esto mismo ya funciona bien. En esta segunda columna, pues lo que puedo añadir es texto, puedo escribir lo que quiera o puedo también meter dentro una etiqueta "h2"... ...anidada. Y aquí modificar ese texto y escribir: "Media maratón de la costa" que es el texto que ya tenía. Como vemos, estoy haciendo exactamente lo mismo, pero esto va ser muy interesante a partir de ahora, porque yo podría añadir también un texto debajo y seguir trabajando con ello. Digo que es muy interesante porque ahora lo que puedo es hacer experimentos con diferentes tamaños y, entonces, me encontraré con que él, automáticamente, se va ocupar de que, en el caso de los tamaños pequeños, esa imagen ya me ocupe de lado a lado y el texto también me ocupe de lado a lado. Con lo cual, sin haber hecho absolutamente nada, porque no he hecho nada, he conseguido ya tener todo este tipo de contenido que es "responsive".

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.