Clases de contenedor: esta es una de las clases predefinidas de bootstrap, que contiene todo el contenido de la página web. Hay dos clases de contenedores, a saber, clases de contenedor y contenedor-fluido . Estas clases tienen diferentes propiedades y uno puede usar la clase que se ajuste a sus requisitos.
CONTENEDOR-FLUIDO: cuando el contenido de una página web está encerrado en un elemento div que tiene la clase contenedor-fluido, todos los elementos encerrados en el div se completan hasta el ancho completo del dispositivo.
CONTENEDOR: cuando el contenido de una página web se incluye en un elemento div que tiene la clase de contenedor, todos los elementos incluidos en el div no se completan en todo el ancho del dispositivo. En cambio, para cada punto de interrupción de tamaño de pantalla estándar, hay consultas de medios predefinidas.
Por ejemplo:
-
@media (min-width: 1200px) .container { max-width: 1140px;} -
@media (min-width: 992px) .container { max-width: 960px; }
Está claro que el uso de la clase de contenedor proporcionará una cierta cantidad de margen izquierdo y derecho, que es predeterminado y diferente para varios tamaños de pantalla. Pero hay una excepción, cuando el tamaño de la pantalla cambia del tamaño de una tableta a un tamaño móvil, la consulta de medios detrás de la clase de contenedor cambia automáticamente para ocupar el 100% del ancho de la pantalla.
- .contenedor {
ancho: 100%;
relleno derecho: 15px;
relleno-izquierda: 15px;
margen derecho: automático;
margen izquierdo: automático;
}
Ejemplos: El siguiente ejemplo es de una página web receptiva que se adapta al ancho de la pantalla del dispositivo.
<!DOCTYPE html> <html> <head> <title>Responsive Div</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> </head> <body> <div class="container"> <center> <h1 style="color: green;"> Geeks for Geeks </h1> </center> <br /> <hr /> <br /> <h3><u>About:</u></h3> GeeksforGeeks.org was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. <br /> <hr /> <br /> <h3><u>List of all things available:</u></h3> <ul> <li>Courses</li> <li>Internships</li> <li>Coding Practice Platforms</li> <li>Company Specific Practice Platforms</li> <li>Interview Corner</li> <li>Subject Wise Practice Questions</li> </ul> <center>and all things TECH!</center> </div> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </body> </html>
Producción:
- En Móvil (425 px)
Publicación traducida automáticamente
Artículo escrito por ananya_reddy y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA