En este artículo, vamos a conocer los tamaños predeterminados proporcionados por el marco de trabajo de arranque a la etiqueta <body> .
Bootstrap es un impresionante marco de CSS y javascript para crear sitios web hermosos y receptivos que son rápidos y fáciles de hacer. Es muy fácil de aprender y proporciona una gran cantidad de componentes preconstruidos que se pueden agregar directamente a su HTML y hacer que su sitio web funcione con facilidad. De forma predeterminada, Bootstrap actualiza la etiqueta <body> para proporcionar mejores valores predeterminados en toda la página.
Bootstrap aplica las siguientes propiedades en la etiqueta del cuerpo:
font-size: 1rem; margin: 0;
Nota: Bootstrap asume que el tamaño de fuente predeterminado «16px» aplicado por el navegador es igual a 1 rem.
Propiedades aplicadas por bootstrap en la etiqueta del cuerpo
valor del tamaño de fuente
Entonces, estos son los tamaños predeterminados aplicados por bootstrap en la etiqueta <body> en HTML. Veamos ejemplos para ver estos tamaños predeterminados en efecto:
Ejemplo 1: comprender el efecto del valor del margen predeterminado
HTML
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> </script> </body> </html>
Producción:
Observe que en la primera imagen no hay espacio entre los límites y la etiqueta <h1>. Esto se debe a que bootstrap ha establecido el margen en 0 , lo que anula el margen predeterminado aplicado por los navegadores.
Efecto del valor de tamaño de fuente: El tamaño de fuente igual a 1 rem significa que el tamaño de fuente predeterminado para una etiqueta <p> o cualquier texto normal es igual a 1 rem. Y 1rem se traduce (por defecto) a 16px. Por lo tanto, el tamaño de fuente predeterminado es 16px.
Ejemplo 2: comprender el efecto del valor del tamaño de fuente
HTML
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> </head> <body> <p>Hello, world!</p> <a href="#">GeeksForGeeks</a> <span> Right now reading about default sizes applied by the bootstrap </span> On the body tag <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> </script> </body> </html>
Salida: como puede ver en todo el texto, ya sea en a , p o span o sin ninguna etiqueta, el tamaño es igual a 1rem o 16px (por defecto).
Publicación traducida automáticamente
Artículo escrito por mycodenotein y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA