Los contenedores son el elemento de diseño más básico en Bootstrap y se necesitan al usar el sistema de cuadrícula predeterminado. Hay dos diseños principales para Bootstrap que son Diseño fluido y Diseño fijo.
- Diseño fluido : utiliza la clase bootstrap .container-fluid para el diseño. Este diseño utiliza valores proporcionales, como unidades de medida para un bloque de contenido, imágenes o cualquier otro elemento. Se utiliza para crear un elemento que sea 100 % más ancho y cubra todos los anchos de la pantalla. El diseño fluido cambia de tamaño continuamente a medida que cambia el ancho de su navegador en cualquier cantidad, sin dejar espacio vacío adicional en los lados. Por lo tanto, se llama «diseño fluido».
- Diseño fijo : utiliza la clase bootstrap .container para el diseño. El diseño fijo tiene valores de ancho de píxel específicos que cambian su valor de ancho con la ayuda de consultas de medios. Proporciona un contenedor receptivo de ancho fijo. El diseño fijo cambia de tamaño en fragmentos en varios anchos determinados a medida que se especifican los valores de píxeles.
Guía paso a paso para la implementación:
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” ></guión>
Paso 2: agregue la etiqueta <style> y agregue las propiedades CSS que necesita.
Paso 3 : cree un nuevo <div> para agregar diferentes clases de diseño.
Paso 4: la información debe colocarse dentro de una clase .container (diseño fijo) o .container-fluid (diseño fluido) para una alineación y relleno adecuados.
Ejemplo 1: Este ejemplo muestra el diseño fijo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Fixed Layout</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style type="text/css">
body {
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<!-- for page header -->
<div class="jumbotron">
<h1>Fixed Layout</h1>
<p>
Also known as a .container layout. Fixed
layout has specific pixel width values
that change its width value with the help
of media queries. It provides a responsive
fixed width container. Fixed layout resizes
in chunks at several certain widths so
that's why its called as “fixed width”
because pixels values are specified.
</p>
</div>
</div>
</body>
</html>
Producción:
Diseño fijo
Ejemplo 2: Este ejemplo muestra el funcionamiento del diseño fluido.
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Fluid Layout</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container-fluid"> <div class="jumbotron"> <h1>Fluid Layout</h1> <p> Also known as the .container-fluid layout. This layout uses proportional values such as measuring unit for a block of content, images or any other item. Used for creating an element that is 100 % wider and covers all the screen width. Fluid layout continuously resizes as you change the width of your browser by any amount, leaving no extra empty space on the sides ever Hence it is named as “fluid layout”. </p> </div> </div> </body> </html>
Producción:
Ejemplo 3: Este ejemplo nos muestra la diferencia entre diseños fijos y fluidos. Se logran diferentes salidas para diferentes tamaños de pantalla para diseños fijos y fluidos.
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Layouts</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container-fluid"> <div class="jumbotron"> <h1 style="color: green">Fluid Layout</h1> <p style="color: #000"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. If you’re preparing out for a tech interview with a product- based company or planning to do the same? Are you looking for a DSA Course? Don’t know how to begin with data structures and algorithms? .. Then you are at the right place. </p> </div> </div> <div class="container"> <div class="jumbotron"> <!-- for page header --> <h1 style="color: green">Fixed Layout</h1> <p style="color: #000"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. If you’re preparing out for a tech interview with a product- based company or planning to do the same? Are you looking for a DSA Course? Don’t know how to begin with data structures and algorithms? .. Then you are at the right place. </p> </div> </div> </body> </html>
Producción:
Nota: el diseño fijo cambia de tamaño en fragmentos en varios anchos determinados, mientras que el diseño fluido cambia de tamaño continuamente a medida que cambia el ancho de su navegador en cualquier cantidad.
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA