Maquet.pdf

IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Contenido INTRODUCCIÓN.......................................................................................................................................................................... 2 1. 2. 3. 4. 5. 6. 7. REFERENCIAS............................................................................................................................................................................. 2 ¿QUÉ ES EL DISEÑO RESPONSIVE?.................................................................................................................................................. 2 ¿POR QUÉ USAR BOOTSTRAP?...................................................................................................................................................... 6 NOVEDADES DE BOOTSTRAP 4...................................................................................................................................................... 7 NOVEDADES DE BOOTSTRAP 5...................................................................................................................................................... 9 EL ENTORNO DE TRABAJO............................................................................................................................................................. 9 INSTALACIÓN DE BOOTSTRAP...................................................................................................................................................... 10 MAQUETANDO CON BOOTSTRAP............................................................................................................................................. 11 8. PRÁCTICA: PRESENTACIÓN DEL PROYECTO...................................................................................................................................... 11 9. CONTENEDORES BOOTSTRAP...................................................................................................................................................... 14 10. PRÁCTICA: COMENZAMOS EL PROYECTO................................................................................................................................... 14 11. EL GRID DE BOOTSTRAP: LAS DOCE COLUMNAS.......................................................................................................................... 14 12. BREAKPOINTS DE BOOTSTRAP................................................................................................................................................. 15 13. PRÁCTICA: SECCIONES DEL PROYECTO....................................................................................................................................... 16 14. COLUMNAS: TAMAÑO DEFINIDO POR EL USUARIO....................................................................................................................... 16 15. COLUMNAS: TAMAÑO AUTO................................................................................................................................................... 18 16. SALTOS DE LÍNEA EN LAS FILAS DEL LAYOUT................................................................................................................................ 19 17. EL GUTTER.......................................................................................................................................................................... 20 18. DESPLAZAMIENTO DE LAS COLUMNAS....................................................................................................................................... 21 19. ALINEAMIENTO DE LAS FILAS................................................................................................................................................... 22 20. ORDENANDO COLUMNAS....................................................................................................................................................... 23 21. MÁRGENES ENTRE COLUMNAS................................................................................................................................................ 24 22. ANIDANDO FILAS.................................................................................................................................................................. 25 23. PRÁCTICA: MAQUETANDO EL PROYECTO................................................................................................................................... 26 CONTENIDO DE LAS PÁGINAS EN BOOTSTRAP.......................................................................................................................... 33 24. 25. 26. 27. 28. ELEMENTOS DE TEXTO........................................................................................................................................................... 33 IMÁGENES Y FIGURAS............................................................................................................................................................ 36 TABLAS............................................................................................................................................................................... 37 FORMULARIOS..................................................................................................................................................................... 39 PRÁCTICA: AÑADIENDO CONTENIDO......................................................................................................................................... 41 ELEMENTOS MULTIMEDIA EN NUESTRO LAYOUT..................................................................................................................... 41 29. 30. 31. 32. 33. 34. 35. EL OBJETO MEDIA................................................................................................................................................................. 41 ELEMENTOS INCRUSTADOS..................................................................................................................................................... 43 PRÁCTICA: AÑADIENDO MULTIMEDIA....................................................................................................................................... 44 UTILIDADES DE BOOTSTRAP.................................................................................................................................................... 44 COMPONENTES DE BOOTSTRAP.............................................................................................................................................. 44 PRÁCTICA: AÑADIENDO COMPONENTES Y UTILIDADES.................................................................................................................. 45 PRÁCTICA: ÚLTIMO RETOQUES DEL PROYECTO............................................................................................................................ 45 AUTORÍA DEL DOCUMENTO..................................................................................................................................................... 45 P á g i n a 1 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Introducción 1. Referencias https://getbootstrap.com/ https://www.w3schools.com/bootstrap/bootstrap_ver.asp 2. ¿Qué es el diseño responsive? “Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes….. “ “El diseño web adaptable (también diseño web adaptativo o responsivo; este último calco del inglés responsive web design), es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarlas. Hoy día las páginas web se ven en multitud de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC, etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, sistema operativo o capacidad de memoria entre otras. Esta tecnología pretende que, con un único diseño web, todo se vea correctamente en cualquier dispositivo. El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.” WIKIPEDIA Hay una nueva variable y es la aproximación que hace el usuario de la pantalla. P á g i n a 2 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez NO ES FÁCIL P á g i n a 3 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez ALGUNOS CONCEPTOS BÁSICOS ViewPort Breakpoint Media Query El área visible de una página web. Cambia según el dispositivo. Punto en el que cambian propiedades de nuestra página web. Normalmente atendiendo a su anchura... Estilos CSS que se aplican de forma condicional atendiendo a ciertas condiciones. Normalmente relativas al tamaño/resolución del dispositivo EL VIEWPORT LOS BREAKPOINT Ejemplo: entramos en el navegador en vista responsiva P á g i n a 4 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Tenemos que tener cuidado en definir los anchos de nuestra página donde se van a producir los cambios, esos son los Breakpoint. P á g i n a 5 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez LAS MEDIA QUERY @media screen and (min-width: 576px) { body { background-color: blue; } } @media screen and (min-width: 768px) { body { Background-color: grey; } } 3. ¿Por qué usar BootStrap? P á g i n a 6 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Por ejemplo: Netflix utiliza este framework Si vamos la página de github de twbs al repositorio de bootstrap, veremos que esta mantenido. https://github.com/twbs/bootstrap http://www.vidamrr.com/2017/01/10-ejemplos-de-paginas-hechas-con.html 4. Novedades de BootStrap 4 P á g i n a 7 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Una de las ventajas es que la altura de los componentes de cada una de las filas (contenedores flex) tendrán el mismo tamaño, definimos propiedades comunes desde el contenedor flex Esta es la tendencia. https://www.youtube.com/watch?v=uhvKSTQd06k https://www.youtube.com/watch?v=mHp2nr2kErs rem: En relación al tamaño por defecto de la letra que tiene la etiqueta HTML. NUEVOS COMPONENTES DESTACADOS ▸ Cards ▸ Carousel ▸ Modales ▸ Popovers ▸ Tooltips P á g i n a 8 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Los vemos en la web de bootstrap https://getbootstrap.com/docs/4.0/components/alerts/ Además, mejora muchos de los anteriores…. 5. Novedades de BootStrap 5 https://carontestudio.com/blog/novedades-de-bootstrap-5/ https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/bootstrap-5/ 6. El entorno de trabajo Para este tema vamos a usar las siguientes herramientas:   Visual Studio Code Extensión de BootStrap5 para VSC https://marketplace.visualstudio.com/vscode Bootstrap 5 Quick Snippets https://marketplace.visualstudio.com/items?itemName=AnbuselvanRocky.bootstrap5-vscode  Consola del navegador (Ya sea para Chrome o para Firefox ) P á g i n a 9 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Git/GitHub para la gestión de versiones. 7. Instalación de BootStrap https://getbootstrap.esdocu.com/ Para instalar BootStrap podemos optar por dos opciones:  CDN. Usar los enlaces que nos proporcionan en la documentación: Parte_II_Instalación\template.html  Sin CDN. Descargar los ficheros necesarios para no tener que pedirlos cada vez que se muestre nuestra página. P á g i n a 10 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Esos ficheros podemos descargarlos de aquí y en vez de usar URLs podremos referenciar los ficheros localmente. Parte_II_Instalación\ template_sinCDN.html Maquetando con BootStrap 8. Práctica: Presentación del proyecto P á g i n a 11 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez P á g i n a 12 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez P á g i n a 13 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 9. Contenedores BootStrap Parte_III_Maquetando_el_Layout\1-Contenedores “Maquetar con BootStrap consiste en utilizar clases(class=””) de BootStrap”. ¿Qué es un contenedor? Un contenedor es el “padre” de todos los elementos de nuestra página web. Es una etiqueta que. como regla general, va a contener todas las otras etiquetas del contenido de nuestra página. ¿Qué tipos de contenedores nos ofrece BootStrap? BootStrap nos ofrece dos tipos de contenedores:  container : Ocupará diferentes anchos dependiendo del tamaño de la pantalla. Puede ocupar toda la pantalla o dejar unos márgenes a izquierda a derecha, aunque, en este caso, siempre estará centrado.  container-fluid: Ocupará todo el ancho (100%) de lo que podemos ver en el navegador. IMPORTANTE: Aunque los contenedores se pueden anidar unos dentro de otros son pocas las páginas que son tan complejas para necesitar contenedores anidados. 10. Práctica: Comenzamos el proyecto. Comenzamos la práctica final. Creamos el index.html con su container. 11. El Grid de BootStrap: Las doce columnas Parte_III_Maquetando_el_Layout\2-Grid_de_BootStrap Como ya hemos hablado en el capítulo anterior es muy difícil que nos encontremos con páginas cuyos layouts sean tan complejos como para necesitar más de un contenedor. Así que, si nos ponemos de acuerdo en eso, en que sólo vamos a necesitar un contenedor, podemos fijar una estructura general que va a permanecer fijas para todos nuestros layouts: P á g i n a 14 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Y dentro de cada fila de cada row, en principio podemos tener hasta 12 columnas, aunque ya veremos posteriormente que dado a que BootStrap utiliza contenedores flex podemos usar las propiedades de estos contenedores flex para poner más columnas, aunque, en realidad, es difícil que tengamos que utilizar más. Todas estas columnas están pegadas unas a otras y tiene siempre un padding a izquierda y a derecha de 15px del que hablaremos posteriormente. Otra cosa importante es que no tenemos que olvidarnos de utilizar class=”row” ya que si nuestra estructura de columnas no está dentro de un contenedor con esa clase perderemos todas las propiedades de los contenedores flex, que son los sustentan la maquetación en BootStrap. 12. Breakpoints de BootStrap ¿Qué es un breakpoint? En el mundo del diseño responsivo un breakpoint es un tamaño de pantalla (en pixels) donde se produce un cambio en la disposición de los elementos que conforman nuestra página web. https://getbootstrap.com/docs/5.1/layout/breakpoints/ Existen multitud de tipos de dispositivos, multitud de pantallas, pantallas que giran etc. Por lo tanto, la elección de los distintos breakpoints no es algo trivial. Sin embargo, tenemos la suerte de que los muchachos de Twitter, usando su experiencia y los datos que sus millones de usuarios les proporcionan, han decidido que la elección más adecuada son 5 breakpoints: Punto de ruptura X-pequeño Pequeña Medio Grande Extra grande extra extra grande sufijo de clase Ninguna sm md lg xl xxl Dimensiones =992px) col-xl : Para pantallas de 1200px en adelante col-xxl : Para pantallas de 1400px en adelante Veamos el primer ejemplo: En este caso en cualquier tipo de pantallas esos dos elementos se repartirán a igual manera el ancho del contenedor principal. Debemos de tener cuidado porque en caso de que lo que contengan esas partes ocupe más de la mitad no se respetará esa proporción. Veamos este caso con un ejemplo: PRIMERA PARTE SEGUNDA PARTE Si queremos que ese reparto equitativo suceda para determinado de pantallas: pink"> yellow"> En este caso todo se divide en 5 partes para pantallas menores de 768px pero en cuanto la pantalla es más pequeña que eso, todos los elementos pasarán a ocupar todo el centro de la pantalla. Este funcionamiento abre la puerta a rows (filas) que tengan más de 12 columnas, por ejemplo, una fila con 14 componentes: P á g i n a 18 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez blue"> pink"> blue"> pink"> blue"> pink"> blue"> pink"> BootStrap nos permite también ajustar el tamaño de las columnas al contenido de las mismas usando col-{breakpoint}-auto. Así, por ejemplo: Anchura ajustada Al contenido De las celdas que contiene la columna IMPORTANTE: Debemos tener mucho cuidado cuando mezclemos tamaños automáticos junto tamaños, definidos por el usuario porque cuanto no quepan las columnas (y puede que no sumen 12) pasarán a la siguiente fila y se repartirán el espacio de la siguiente fila. 16. Saltos de línea en las filas del Layout Parte_III_Maquetando_el_Layout\4-Dimensionando_Columnas\4.3-Saltos_de_línea Si mientras estamos construyendo nuestro grid y queremos que haya un salto de línea podemos forzarlo de la siguiente manera: Con esa estructura, aunque no hayamos ocupado las 12 columnas de nuestro grid podremos pasar a la siguiente fila. De esta manera: P á g i n a 19 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Si nos damos cuenta esto mismo se podría haber conseguido utilizando varias rows (filas). De esta manera De manera selectiva podemos establecer que ese cambio de línea se produzca en un determinado breakpoint de los establecidos por BootStrap. Así, por ejemplo: Para más información podemos ver BootStrap Display Utilities https://getbootstrap.com/docs/5.1/utilities/display/ 17. El Gutter Parte_III_Maquetando_el_Layout\4-Dimensionando_Columnas\4.4-Gutter Por defecto BootStrap introduce separación entre el contenido de las columnas mediante paddings y márgenes a derecha e izquierda de 1.5rem( 24px). Es lo que se denomina gutter Tiene las clases g-x, gx-x y gy-x. Si ése no es el efecto que queremos en nuestra maquetación podemos evitarlo añadiendo al elemento que tenga la clase row la clase g-0. Así de esta manera las columnas o elementos de la fila no tendrán ese padding con la posibilidad de que el contenido de la misma quede pegado. Un ejemplo sería: P á g i n a 20 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Elemento con Gutter Elemento con Gutter Elemento sin gutter Segundo Elemento 18. Desplazamiento de las columnas Parte_III_Maquetando_el_Layout\5-Desplazamiento_de_columnas Tal y como hemos visto en apartados anteriores podemos dar diferentes tamaños a los distintos componentes o columnas de una row o fila. Adicionalmente podemos establecer no sólo el tamaño de la columna si no también la posición a partir de la cual se va a posicionar. Para conseguir eso debemos añadir la clase offset-X donde X es el número de columnas a la izquierda que desplazaremos el elemento que queremos posicionar. Este desplazamiento puede ser también establecido de manera diferente para cada tamaño de pantalla:      offset-sm-X : Para desplazamientos para pantallas entre 576px y 768px. offset-md-X : Para desplazamientos para pantallas entre 768px y 992px. offset-lg-X : Para desplazamientos para pantallas entre 992 y 1200px. offset-xl-X : Para desplazamientos para pantallas entre 1200 y 1400px.. offset-xxl-X : Para desplazamientos para pantallas mayores de 1400px. Por ejemplo: En este ejemplo para pantallas mayores de 768px el primer div está desplazado una columna a la izquierda y ambos bloques se separan dos columnas mediante el uso de un desplazamiento de dos columnas en el segundo bloque. Además, para pantallas entre 576px y 768px no hay desplazamiento para el primer bloque y hay un desplazamiento de 4 columnas para el segundo bloque consiguiendo, de esta forma que ese bloque quede totalmente pegado a la derecha. IMPORTANTE: A partir de la versión de BooStrap 4 hay un cambio importante en el nombre de las clases para desplazar los elementos de la fila. En versiones anteriores esas clases de denominaban col-yy-offset-X donde yy son las siglas del tamaño de la pantalla. P á g i n a 21 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 19. Alineamiento de las filas https://getbootstrap.com/docs/5.1/utilities/flex/ Parte_III_Maquetando_el_Layout\6-Alineación_en_filas Contenedor flex: Indica que los elementos se colocan en una fila(row), uno al lado del otro, de izquierda a derecha. Como ya hemos descrito en apartados anteriores, BootStrap utiliza contenedores flex. Precisamente utilizando las propiedades de estos elementos podremos fijar la alineación de los componentes de las rows o filas. Podremos establecer:   La alineación vertical de los elementos de la fila. La alineación horizontal de los elementos de la fila. Tanto para establecer la alineación horizontal como la vertical deberemos añadir una nueva clase al contenedor row o fila. Alineación vertical Si queremos alinear los distintos elementos que componen una fila de manera vertical podremos hacerlo añadiendo a la row fila una de estas tres clases:  align-items-start : Los elementos de la fila se alinearán verticalmente con el borde superior de la fila.  align-items-center : Los elementos de la fila se alinearán centrados verticalmente.  align-items-end : Los elementos de la fila se alinearán verticalmente con el borde inferior de la fila. Alineación horizontal Para fijar la alineación horizontal de los elementos en la row (fila) dispondremos de las siguientes clases:  justify-content-start: Los elementos empezarán en la parte izquierda y ocuparán el tamaño horizontal establecido. Es la opción por defecto. P á g i n a 22 | 45     IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez justify-content-center: Los elementos de la fila se centrarán horizontalmente. justify-content-end: Los elementos de la fila se alinearán al final (la derecha normalmente) de la fila. justify-content-around: El espacio restante se distribuirá de manera equitativa alrededor de los elementos empezando y acabando con espacios libres. justify-content-between: El espacio restante se distribuirá de manera equitativa entre los distintos elementos estando uno de ellos totalmente a la derecha y otro totalmente a la izquierda. Con todas estas posibilidades y lo visto anteriormente es más que suficiente para casi cualquier Layout pero existen más posibilidades que podremos descubrir en la documentación oficial. 20. Ordenando columnas Parte_III_Maquetando_el_Layout\7-Ordenando_columnas Orden Cambie el orden visual de elementos flexibles específicos con un puñado de order. Solo proporcionamos opciones para hacer un artículo primero o último, así como un reinicio para usar el pedido DOM. Como order toma cualquier valor entero (por ejemplo, 5), agregue CSS personalizado para cualquier valor adicional necesario. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. REORDENANDO COLUMNAS P á g i n a 23 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 21. Márgenes entre columnas Parte_III_Maquetando_el_Layout\8-Márgenes_entre_columnas https://getbootstrap.com/docs/5.1/utilities/spacing/ BootStrap añade clases que nos van a permitir modificar los márgenes y los paddings de las columnas. Según la documentación oficial son las Utilidades de espaciado. Márgenes entre columnas Para establecer los márgenes entre las columnas usaremos la clas m{lado}-{tamaño} o si queremos distinguir según los distintos tamaños de pantalla:      m{lado}-sm-{tamaño} Para pantallas entre 576px y 768px. m{lado}-md-{tamaño} Para pantallas entre 768px y 992px. m{lado}-lg-{tamaño} Para pantallas entre 992px y 1200px. m{lado}-xl-{tamaño} Para pantallas entre 1200px y 1400px. m{lado}-xxl-{tamaño} Para pantallas de más de 1400px. Pudiendo ser lado:        t para margen superior (top). b para margen inferior (bottom). l para margen izquierdo (left). r para margen derecho (right). x para los márgenes izquierdo y derecho. y para los márgenes superior e inferior. En blanco si es para todos los lados. Y pudiendo ser tamaño de tamaño:        0 : No hay margen 1 : 0.25rem 2 : 0.5rem 3 : 1rem 4 : 1.25rem 5 : 3rem auto : Para clases que establecen una margen auto Centrado horizontal Relacionado con el tema de los márgenes hay que destacar que BooStrap 4 introduce una nueva clase mx-auto que permite centrar horizontalmente un elemento dentro de su contenedor. Paddings La notación de las clases para establecer los paddings en las columnas es muy similar a la notación de las clases para establecer márgenes entre las columnas. Simplemente tenemos que cambiar la m por la p P á g i n a 24 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 22. Anidando filas Parte_III_Maquetando_el_Layout\9-Anidando_filas Hasta ahora estamos estado maquetando conforme a la estructura que hemos definido en apartados anteriores. Esta estructura establece una jerarquía contenedor -> row -> col, es decir, todas las filas tienen elementos que única y exclusivamente pertenecen a dicha fila. Sin embargo, los layout reales son más complejos que eso y para conseguir esas estructuras complejas vamos a tener que anidar filas (row) dentro de filas. Debemos de tener en cuenta que cada una de esas filas hijas podrá tener, de igual manera, hasta 12 columnas. En la siguiente imagen tenemos un ejemplo de ese tipo de layouts con las distintas filas señaladas. P á g i n a 25 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez 23. Práctica: Maquetando el proyecto Solo maqueta, no insertes los contenidos. Para ver tu maquetación aplícales a tus div unos estilos de color como hemos estado haciendo en las prácticas. Logotipo:   Centrado. Tamaño en columnas: 2 para pantallas grandes y extra grandes, 3 para pantallas medianas y 4 en el resto. Menú:   Es un componente (lo agregamos más adelante). Tamaño en columnas: siempre 12 columnas. Contenido Imágenes:    Estructura Anidada. Márgenes. Breakpoint para pantallas medianas. Observar imágenes. Sección: P á g i n a 26 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  Nada en especial Contactos:  Nada en especial CONTENIDOS Curso:    Márgenes. Alineación. Breakpoint para pantallas medianas. Observar imágenes. Tamaño en columnas: 11 columnas. Contacto (formulario):  Tiene dos componentes (observa imagen) P á g i n a 27 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez  2 Breakpoint para pantallas pequeñas y para medianas. Observar imágenes. P á g i n a 28 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Pie:    Alineación. 1ª Fila: tamaño en columnas 6. 2ª Fila: tamaño en columnas 2. o Breakpoint para pantallas medianas. Observar imágenes. P á g i n a 29 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Resultado podría ser algo así (maquetación responsive): P á g i n a 30 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez P á g i n a 31 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Otra vista: P á g i n a 32 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Contenido de las páginas en BootStrap 24. Elementos de texto Parte_IV_Añadiendo_Contenido\1-Elementos_de_Texto https://getbootstrap.com/docs/5.1/content/typography/ https://getbootstrap.com/docs/5.1/utilities/colors/ En primer lugar, Bootstrap usa la siguiente configuración predeterminada: Tamaño de letra (font-size) de 16px. Espacio entre líneas (line-height) de 1.5. Fuente (font-family) es «Helvetica Neue», Helvetica, Arial, sans-serif. Los elementos parrafo () tienen margin-top: 0 y margin-bottom: 1rem. ENCABEZADOS Los encabezados disponibles en HTML son h1, h2, h3, h4, h5. y h6, y como ya sabemos se usan para titulares. En Bootstrap tiene un diseño un poco diferente siendo la fuente un poco más grande que para el html normal. Además, en Bootstrap podemos aplicar estas clases para encabezados: Ejemplo h1 display-1 Texto del ejemplo Ejemplo h1 display-2 Texto del ejemplo Ejemplo h1 display-3 Texto del ejemplo Ejemplo h1 display-4 Texto del ejemplo De este modo podemos establecer un encabezado con diferentes tamaños. OTROS ELEMENTOS Small En Boostrap se usa para crear un titular más pequeño debajo del encabezado. SMALL Prueba small Mark A este elemento de marcación, Bootstrap le añade un diseño tipo resaltado con rotulador. Esto es una prueba de mark. abbr P á g i n a 33 | 45 IES Al-Ándalus | DAW-DIW | Isabel Cayuela Pérez Este elemento que sirve para añadir significado a las abreviaciones Bootstrap le añade un subrayado especial para que se vea que esconde ese texto explicativo. IMACRESTE es mi nick. blockquote Esta etiqueta se usa para cuando introducimos un texto copiado de otra fuente. Bootstrap añade a la etiqueta footer un diseño tipo para señalar que la fuente es otro. Este es un texto de prueba. Fuente imacreste.com dl, dt, dd Estas etiquetas son para definir definiciones de términos. Bootstrap resalta la palabra que luego se define. Bootstrap - Es un FrameWork. pre Con esta etiqueta se consigue que se mantengan los espacios en blanco y saltos de línea. Por defecto el HTML no permite más de 1 espacio en blanco y más de un salto de línea. Esto es un texto que conserva los espacios por que usa la etiqueta HTML PRE Este ejemplo se vería tal cual, incluso con el espacio lateral. code Esta etiqueta se usa para hacer referencia a códigos reservados. Bootstrap lo presenta con otro color. Esto es un code

Document Details

Related

Full Transcript