¿Cuántos tipos de diseños hay en Bootstrap?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *