5 ejercicios bootstrap para mejorar tus skills con el lenguaje css

Bootstrap CSS Framework

Para aprender a programar para la web, es necesario no solo conocer los lenguajes de programación relevantes para este campo, sino también considerar las tecnologías y recursos de apoyo para los desarrolladores web.

El framework Bootstrap es uno de estos recursos.

¿Qué es bootstrap?

Bootstrap es una biblioteca de componentes front-end y un kit de herramientas de código abierto. Se utiliza para crear páginas web reactivas y mobile-first con HTML, CSS y JavaScript. Desde su lanzamiento en 2011, Bootstrap ha evolucionado a través de numerosas versiones. Es una tecnología clave para la carrera de desarrollador web, especialmente en el lado del front-end.

Bootstrap ofrece muchas soluciones para el desarrollador y se define como un "framework CSS" debido a su alto grado de personalización gracias a la gran cantidad de clases dedicadas y sistemas altamente responsivos para la gestión de diseños y medios en todas las pantallas.

Volvamos un momento atrás, ¿qué es CSS?

El lenguaje CSS (Cascading Style Sheets) es un lenguaje de marcado que se utiliza para crear "hojas de estilo" que definen la apariencia visual de nuestras páginas web. Ha sido utilizado desde siempre para la presentación gráfica de documentos en colaboración con HTML.

Tener experiencia con estas tecnologías abre las puertas a muchas oportunidades laborales como desarrollador front-end. Sin embargo, es fundamental practicar para adquirir habilidades. En este artículo, veremos una serie de ejercicios para comprender e interactuar con el framework Bootstrap y el lenguaje CSS.

P.D. Se proporcionará código HTML cuando sea necesario.

Según los estándares de codificación de Bootstrap, escribe en CSS todos los statement agrupados que se refieren al estilo de un elemento.
Escribe la propiedad CSS de Bootstrap para permitir que las imágenes admitan un diseño responsivo.
Escribe una tabla con los bordes resaltados utilizando Bootstrap y CSS.

HTML code:

<html>
<head>
    <title>Ejemplo de grilla “bordered” en Bootstrap</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Sr. No.</th>
                            <th>Roll No</th>
                            <th>Maths</th>
                            <th>Comp. Sc.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>1234</td>
                            <td>87</td>
                            <td>87</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>5678</td>
                            <td>67</td>
                            <td>98</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>6986</td>
                            <td>88</td>
                            <td>59</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Escribe un script CSS de Bootstrap para diseñar una navegación de Breadcrumb (menú de migas).

HTML code:

<div class=" container d-flex justify-content-center">
    <ul class="pagination shadow-lg">
        <li class="page-item "><a class="page-link" href="#"><i class="fa fa-home "></i> <small>Home</small> </a></li>
        <li class="page-item "><a class="page-link " href="#"><i class="fa fa-file mr-1 ml-0"></i><small>Files  </small></a></li>
        <li class="page-item "><a class="page-link" href="#"><i class="fa fa-image mr-1"></i><small>Image</small></a></li>
        <li class="page-item "><a class="page-link" href="#"><i class="fa fa-video-camera mr-1"></i><small>Videos</small></a></li>
        <li class="page-item active "><a class="page-link " href="#"><i class="fa fa-music mr-1 "></i><small>Music</small></a></li>
    </ul>
</div>

Escribe propiedades CSS en Bootstrap para crear filas y columnas en una fixed grid. (grilla fija)

Los ejercicios son bastante simples, permiten espacio para la creatividad y nos permiten familiarizarnos con Bootstrap y CSS. Veamos juntos las soluciones a estos ejercicios.

En Bootstrap es fundamental seguir este orden de escritura en CSS de las propiedades: posicionamiento, estilo de la caja, características del fuente, visualización y luego el resto.

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
    
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
    
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    
    /* Misc */
    opacity: 1;
}

En HTML, la clase Bootstrap se llama "img-responsive", esto se refleja en CSS y podemos controlar a nuestro gusto las características de diseño y no de diseño gracias a la clase definida en HTML. Impresionante, ¿verdad?

.img-responsive {
    display: inline-block;
    height: auto;
    max-width: 100%;
}

table {
    color:#1054f0
}
.table-bordered {
    border: 1px solid #5ac4ed;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #5ac4ed;
}

En este ejercicio puedes dar rienda suelta a tu creatividad, pero aquí te dejo mi interpretación personal del mismo.

.container {
    margin-top: 250px;
}

body{
    background-color: #eee;
}

.demo {
    background-color: rgb(168, 200, 245);
}

.pagination-outer {
    text-align: center;
}

.pagination {
    background-color: #fff;
    border-radius: 25px !important;
    overflow: hidden;
    border: none !important;
}


a:focus,
a:active {
    outline: none !important;
    box-shadow: none !important;
}
.fa {
    font-size: 11px ;
    vertical-align: middle !important;
    color: black;
}

.pagination li.active .fa {
    color: #fff !important;
}

.pagination li a.page-link {
    color: #505050;
    background-color: transparent;
    font-size: 17px;
    font-weight: 600;
    padding: 17px 25px;
    border: none;
    transition: all 0.3s ease 0s;
}

.fa-home {
    transform: scale(1.4, 1.4) ;
}

.pagination li:last-child a.page-link {
    border: none;
}

.pagination li.active a.page-link,
.pagination li a.page-link:hover,
.pagination li.active a.page-link:hover {
    background-color: transparent;
}

.pagination li a.page-link:after {
    content: '';
    background-color: #42A5F5 !important;
    height: 100%;
    width: 100%;
    transform: scaleY(0);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    transition: all 0.3s;
}

.pagination li.active a.page-link:after,
.pagination li a.page-link:hover:after,
.pagination li.active a.page-link:hover:after {
    transform: scaleY(1);
    border-radius: 25px !important;
    
}
@media (max-width: 767px) {
    .pagination li a.page-link {
        padding: 11px 8px !important;
    }
    
    .fa{
        font-size: 9px !important;
    }
    
    li a {
        font-size: 12px !important;
    }
    .page-item+.page-item {
        padding-left: 0 !important;
    }
}

Bootstrap utiliza las propiedades CSS ":before" y ":after". Estos son pseudo-elementos. ":before" se utiliza para insertar contenido antes del elemento de destino y ":after" se utiliza para insertar el mismo contenido después del elemento de destino. '[class*="span"]' selecciona cualquier elemento con un atributo de clase cuyo valor comienza con 'span'. Ahora, para posicionar las columnas una al lado de la otra, usa "float: left;".

.row:before,
.row:after {
    display: table;
    line-height: 0;
    content: "";
}

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

Aprender a utilizar Bootstrap y conocer a fondo el lenguaje CSS puede proporcionar grandes satisfacciones a nivel laboral. Si necesitas profundizar en Bootstrap, aquí tienes nuestro artículo sobre dónde encontrar las plantillas más populares.

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo