Sistema de cuadrícula Bootstrap

Posted on by Rudeus Greyrat
  1. Introducción e instalación
  2. Botones, Glyphicons, Tablas
  3. Formularios verticales, formularios horizontales, formularios en línea
  4. Pestañas desplegables y receptivas
  5. Barra de progreso y Jumbotron

Prerrequisitos: Conceptos básicos de desarrollo web y  BootStrap (Parte 1)

Grid System: en el artículo anterior habíamos aprendido sobre Bootstrap y su instalación. Sin embargo, a partir de este artículo, vamos a comenzar con el aprendizaje de Bootstrap. Vamos a hablar sobre el sistema Bootstrap Grid en este artículo.

html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <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">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
</head>
<body>
    <header>
        <div class="container">
            <h1 style="color: green">GeeksforGeeks</h1>
            <strong>A computer Science portal for Geeks</strong>
        </div>
    </header>
    <footer>
        <hr/>
        <div class="container">
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Visit 
                </a> 
                our website
            </p>
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Like 
                </a>
                us on facebook
            </p>
        </div>
    </footer>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <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">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
</head>
<body>
    <header>
        <div class="container">
            <h1 style="color: green">GeeksforGeeks</h1>
            <strong>
                A computer Science portal for Geeks
            </strong>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="bg bg-primary w-100">
                First row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-success w-100">
                Second row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-primary w-100">
                Third row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-success w-100">
                Fourth row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-primary w-100">
                Fifth row
            </div>
        </div>
    </div>
    <footer>
        <hr />
        <div class="container">
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Visit
                </a> 
                our website
            </p>
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Like 
                </a>
                us on facebook
            </p>
        </div>
    </footer>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <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">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
</head>
<body>
    <header>
        <div class="container">
            <h1 style="color: green">GeeksforGeeks</h1>
            <strong>
                A computer Science portal for Geeks
            </strong>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="bg bg-primary w-100">
                First row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-success w-100">
                Second row
            </div>
        </div>
    </div>
    <br/>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="well bg bg-danger">
                    1st Column
                </div>
            </div>
            <div class="col-sm-4">
                <div class="well bg bg-warning">
                    2nd Column
                </div>
            </div>
            <div class="col-sm-4">
                <div class="well bg bg-secondary">
                    3rd Column
                </div>
            </div>
        </div>
    </div>
    <footer>
        <hr />
        <div class="container">
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Visit
                </a> 
                our website
            </p>
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Like 
                </a>
                us on facebook
            </p>
        </div>
    </footer>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <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">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
</head>
<body>
    <header>
        <div class="container">
            <h1 style="color: green">GeeksforGeeks</h1>
            <strong>
                A computer Science portal for Geeks
            </strong>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="bg bg-secondary w-100">
                First Row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-primary w-100">
                Second row
            </div>
        </div>
    </div>
    <br />
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-sm-6 col-md-3 
                    col-lg-4 col-xl-6">
                <div class="well bg bg-success">
                    First Column
                </div>
            </div>
            <div class="col-xs-2 col-sm-6 col-md-3 
                    col-lg-4 col-xl-6">
                <div class="well bg bg-danger">
                    Second Column
                </div>
            </div>
            <div class="col-xs-2 col-sm-6 col-md-3 
                    col-lg-4 col-xl-6">
                <div class="well bg bg-warning">
                    Third Column
                </div>
            </div>
            <div class="col-xs-2 col-sm-6 col-md-3 
                    col-lg-4 col-xl-6">
                <div class="well bg bg-primary">
                    Fourth Column
                </div>
            </div>
        </div>
    </div>
    <footer>
        <hr/>
        <div class="container">
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Visit
                </a> 
                our website
            </p>
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Like 
                </a>
                us on facebook
            </p>
        </div>
    </footer>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <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">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/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>
</head>
<body>
    <header>
        <div class="container">
            <h1 style="color: green">GeeksforGeeks</h1>
            <strong>
                A computer Science portal for Geeks
            </strong>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="bg bg-secondary w-100">
                First Row
            </div>
        </div>
        <div class="row">
            <div class="bg bg-primary w-100">
                Second Row
            </div>
        </div>
    </div>
    <br/>
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-sm-6 col-md-3 
                    col-lg-4 col-xl-6">
                <div class="bg bg-success">
                    First Column
                </div>
            </div>
            <div class="col-xs-2 col-sm-6 col-md-3 
                    col-lg-4 col-xl-6">
                <div class="bg bg-danger">
                    second Column
                    <div class="row">
                        <div class="col-md-3 col-lg-4 col-xl-6">
                            <div class="bg bg-success">
                                First Nested Column
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-4 col-xl-6">
                            <div class="bg bg-primary">
                                Second Nested Column
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <hr/>
        <div class="container">
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Visit
                </a> 
                our website
            </p>
            <p>
                <a href="https://www.geeksforgeeks.org/">
                    Like 
                </a>
                us on facebook
            </p>
        </div>
    </footer>
</body>
</html>

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks-1 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 *