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

Componentes de navegación de Bootstrap

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una de las herramientas que más éxito ha dado a Bootstrap es el trabajo en filas y columnas. Vamos a aprender en este vídeo a añadir filas y columnas y a configurarlas, y veremos cómo responden a diferentes tamaños de pantalla.

Transcripción

En el video anterior, he creado un página, que no he guardado todavía, y la voy a llamar "Boot." Una página en la que tengo instalado el framework, Bootstrap. Y en la que, en concreto, hay una barra de navegación. Esta barra de navegación es exactamente lo mismo, que si me hubiera ido a "Componentes de Bootstrap" y en una página vacía, hubiera añadido este "Navbar". En realidad, hay varios tipos distintos, dependiendo de lo que quiera. Por ejemplo, para que aparezcan en la parte inferior, fijo para que aparezca arriba o una barra básica. En cualquiera de ellos, al añadir uno, lo que tendré que hacer ahora es moverme por él, y hacer modificaciones de los distintos elementos que tiene, porque habrá cosas que quiera utilizar y otras que no quiera utilizar. Lo ideal es volver a la vista en vivo, poner el tamaño más grande, para entender bien qué es lo que tengo e ir mirando. Aqu,i en "Brand," debería sustituirlo por el logotipo de la página. Estos "links" debería sustituirlos por los textos relacionados. Por ejemplo, "Eventos", haría doble clic en el siguiente "link" y aquí podría poner "Resultados". Clic fuera. Vemos como va modificándolos. Por ejemplo, en este podría añadir otro texto o también seleccionarlo y eliminarlo. Con la tecla "Supr", elimino ese elemento. En mi caso no voy a utilizar ningún "Dropdown", pues como no voy a utilizar ningún menú desplegable, simplemente lo elimino también. ¿Buscador? Pues sí, me viene bien el buscador, pero tengo que cambiar sus características y propiedades, porque no me apetece que salga en inglés. Puedo cambiar su "PlaceHolder" y entonces poner "Buscar." Puedo hacer que sea "Autofucus" para que cuando se cargue la página automáticamente aparezca seleccionado. Eso mismo lo puedo ir haciendo con cada uno de estos elementos, y los voy a ir configurando a mi gusto. Una vez que los tengo listos, vuelvo al tamaño más pequeño y veo como queda también cuando los va añadiendo. Y así, voy decidiendo si quiero hacer modificaciones. Y luego, por último, cuando quiero hacer modificaciones de cualquiera de estos elementos, tengo el "Diseñador de CSS," que me permite fácilmente ver qué necesito. En principio, tengo que seleccionar "Bootstrap CSS" para ver el CSS del framework. Dentro de este, lo siguiente es buscar el selector en concreto que necesitaría. Estos CSS, a veces, son un poco difíciles de encontrar, pero tenemos herramientas interesantes para ver. Por ejemplo, "Inspeccionar" me sirve para ponerme encima de un elemento y aparte de devolverme su tamaño que efectivamente me lo devuelve me devuelve también los selectores que hacen referencia al mismo. Asi será muy fácil hacer modificaciones del color por ejemplo. Otra posibilidad, teniéndolo seleccionado, es irme a la vista de "Código" y utilizar el "Quick edit." Este me abrirá la vista de CSS con todos los selectores que están haciendo referencia a ese objeto en concreto. Entonces va a ser muy fácil elegir. Pues aquí lo vemos, tengo un "Color" y un "Background color", pues lo podría cambiar directamente desde aquí, No obstante, hay que tener cuidado cuando se hacen esos cambios, porque los cambios que ejecutamos en un CSS de Bootstrap harán referencia no solo a este botón, sino a elementos en otro sitio, con lo cual hay que ser un poco consecuente. Aunque, sirve también para que cualquier cambio que haga, se vea reflejado en el resto de elementos similares y, por tanto, consigamos tener un aspecto mucho más consistente.

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.