Cuadr\u00edcula B\u00e1sica<\/strong><\/h3>\n\n\n\nLa cuadr\u00edcula b\u00e1sica es un marco simple con columnas de ancho igual que se vuelven m\u00e1s altas cuando el contenido dentro es m\u00e1s largo. Para crear una b\u00e1sica, comienza con un contenedor <div> y agrega filas y columnas. Aqu\u00ed tienes un ejemplo:<\/p>\n\n\n\n
<div class=\"container\">\n <div<\/strong> class=\"row\">\n <div<\/strong> class=\"col\">\n <div<\/strong> class=\"bg-light border p-3 text-center\">\n <h3<\/strong>>Column 1<\/h3<\/strong>>\n <p<\/strong>>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n <div<\/strong> class=\"col\">\n <div<\/strong> class=\"bg-light border p-3 text-center\">\n <h3<\/strong>>Column 2<\/h3<\/strong>>\n <p<\/strong>>Pellentesque euismod dapibus odio, at volutpat sapien.<\/p<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n <div<\/strong> class=\"col\">\n <div<\/strong> class=\"bg-light border p-3 text-center\">\n <h3<\/strong>>Column 3<\/h3<\/strong>>\n <p<\/strong>>Sed tincidunt neque vel risus faucibus fringilla.<\/p<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n<\/div><\/code><\/pre>\n\n\n\nComo puedes ver, hemos creado tres columnas de ancho igual. Bootstrap maneja el relleno, el espaciado entre columnas y la alineaci\u00f3n.<\/p>\n\n\n\n
Longitud de Columnas en la Cuadr\u00edcula<\/strong><\/h3>\n\n\n\n\u00bfQu\u00e9 sucede si deseas controlar la longitud de la columna? Bootstrap tiene 12 ajustes de unidades que te permiten decidir qu\u00e9 tan ancha o estrecha puede ser una columna. Por ejemplo, para crear una fila con dos columnas donde la primera columna ocupe ocho unidades y la segunda columna ocupe cuatro unidades, puedes hacer lo siguiente:<\/p>\n\n\n\n
<div class=\"container\">\n <div<\/strong> class=\"row\">\n <div<\/strong> class=\"col-8\">\n <div<\/strong> class=\"bg-light border p-3 text-center\">\n <h3<\/strong>>Wider Column<\/h3<\/strong>>\n <p<\/strong>>Nunc vitae metus non velit aliquam rhoncus vel in leo.<\/p<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n <div<\/strong> class=\"col-4\">\n <div<\/strong> class=\"bg-light border p-3 text-center\">\n <h3<\/strong>>Narrower Column<\/h3<\/strong>>\n <p<\/strong>>Fusce nec tellus sed augue semper porta.<\/p<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n<\/div><\/code><\/pre>\n\n\n\nComo puedes notar, hay una diferencia en las clases de columna, donde la columna m\u00e1s ancha tiene la clase col-8 y la columna m\u00e1s estrecha es col-4.<\/p>\n\n\n\n
Ancho de Columnas Responsivo<\/strong><\/h3>\n\n\n\nBootstrap tambi\u00e9n proporciona clases responsivas que te permiten especificar diferentes anchos de columna para diferentes tama\u00f1os de pantalla. Estas clases est\u00e1n basadas en puntos de quiebre, que son anchos de pantalla predefinidos. Los puntos de quiebre disponibles son:<\/p>\n\n\n\n
\nxs (extra peque\u00f1o)<\/strong>: Menos de 576px<\/li>\n\n\n\nsm (peque\u00f1o):<\/strong> 576px en adelante<\/li>\n\n\n\nmd (mediano)<\/strong>: 768px en adelante<\/li>\n\n\n\nlg (grande):<\/strong> 992px en adelante<\/li>\n\n\n\nxl (extra grande):<\/strong> 1200px en adelante<\/li>\n\n\n\nxxl (extra extra grande):<\/strong> 1400px en adelante<\/li>\n<\/ul>\n\n\n\nPara usar clases responsivas, agrega la abreviatura del punto de quiebre al prefijo col-. Por ejemplo:<\/p>\n\n\n\n
<div class=\"container\">\n <div<\/strong> class=\"row\">\n <div<\/strong> class=\"col-md-6\">\n <div<\/strong> class=\"bg-light border p-3 text-center\">\n <h3<\/strong>>Column 1<\/h3<\/strong>>\n <p<\/strong>>Maecenas sed diam eget risus varius blandit sit amet non magna.<\/p<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n <div<\/strong> class=\"col-md-6\">\n <div<\/strong> class=\"bg-light border p-3 text-center\">\n <h3<\/strong>>Column 2<\/h3<\/strong>>\n <p<\/strong>>Donec id elit non mi porta gravida at eget metus.<\/p<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n <\/div<\/strong>>\n<\/div><\/code><\/pre>\n\n\n\nAqu\u00ed hemos agregado el ancho col-md-6, por lo que las columnas se redimensionar\u00e1n autom\u00e1ticamente cuando el tama\u00f1o de la pantalla sea de 768px o m\u00e1s.<\/p>\n\n\n\n
Componentes de Bootstrap<\/strong><\/h2>\n\n\n\nBootstrap ofrece una amplia gama de componentes predefinidos para ensamblar interfaces de usuario r\u00e1pidamente. Estos componentes son receptivos y personalizables. Veamos algunos de los m\u00e1s com\u00fanmente utilizados.<\/p>\n\n\n\n
Botones<\/strong><\/h3>\n\n\n\nBootstrap proporciona estilos de botones bien dise\u00f1ados desde el principio. Para crear un bot\u00f3n, agrega la clase btn a un elemento <button> o <a>.<\/p>\n\n\n\n
Personal\u00edzalo agregando clases como btn-primary, btn-secondary, btn-success, etc.<\/p>\n\n\n\n
<button type=\"button\" class=\"btn btn-primary\">Primary Button<\/button>\n<button type=\"button\" class=\"btn btn-secondary\">Secondary Button<\/button>\n<a href=\"#\" class=\"btn btn-success\">Success Link Button<\/a><\/code><\/pre>\n\n\n\nTarjetas<\/strong><\/h3>\n\n\n\nLas tarjetas son contenedores vers\u00e1tiles para contenido como im\u00e1genes, texto y botones. Proporcionan una forma estructurada de presentar informaci\u00f3n.<\/p>\n\n\n\n
<div class=\"card\">\n <img src=\"https:\/\/getbootstrap.com\/docs\/4.5\/assets\/img\/bootstrap-icons.png\" class=\"card-img-top\" alt=\"Card Image\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">Card Title<\/h5>\n <p class=\"card-text\">Some quick example text to build on the card title.<\/p>\n <a href=\"#\" class=\"btn btn-primary\">Go somewhere<\/a>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\nAqu\u00ed, puedes ver una tarjeta con una imagen en la parte superior, seguida de un t\u00edtulo, algo de texto y un bot\u00f3n. La clase card-img-top posiciona la imagen en la parte superior de la tarjeta, mientras que la clase card-body proporciona relleno y espaciado para el contenido dentro de la tarjeta.<\/p>\n\n\n\n
Barra de Navegaci\u00f3n<\/strong><\/h3>\n\n\n\nEl componente navbar es un encabezado de navegaci\u00f3n receptivo con marca, enlaces, formularios y m\u00e1s. Se colapsa autom\u00e1ticamente en pantallas m\u00e1s peque\u00f1as y proporciona un bot\u00f3n de alternar para expandir el men\u00fa.<\/p>\n\n\n\n
<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n <div class=\"container-fluid\">\n <a class=\"navbar-brand\" href=\"#\">My Website<\/a>\n <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"><\/span>\n <\/button>\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n <ul class=\"navbar-nav\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">Features<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">Pricing<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/nav><\/code><\/pre>\n\n\n\nCon este sencillo fragmento de c\u00f3digo, creamos un bot\u00f3n de men\u00fa de alternancia para pantallas peque\u00f1as y una lista de enlaces de navegaci\u00f3n.<\/p>\n\n\n\n
La clase navbar-expand-lg especifica que la barra de navegaci\u00f3n debe expandirse en pantallas grandes y colapsarse en las m\u00e1s peque\u00f1as. Las clases navbar-light y bg-light establecen el esquema de color para la barra de navegaci\u00f3n. Compara eso con la creaci\u00f3n del men\u00fa con CSS plano, y entender\u00e1s cu\u00e1ntos pasos nos ahorr\u00f3 Bootstrap.<\/p>\n\n\n\n
![\"Los](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/04\/01-Frameworks-js-en-la-web-1-1024x870.jpg\" "\\"Pie")
<\/figure>\n\n\n\n![\"Gr\u00e1fico](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/04\/02-estadisticas-uso-Bootstrap-1024x1024.jpg\" "\\"Line")
<\/figure>\n\n\n\n