La pista de desarrollo web front-end consta de varios lenguajes, marcos y bibliotecas. HTML , CSS , JavaScript , jQuery , AngularJS , ReactJS, VueJS, Bootstrap son algunos de ellos. Estas son algunas de las tecnologías que un desarrollador debe conocer para crear sitios web y aplicaciones web hermosos, receptivos y funcionales.
Bootstrap es un marco de código abierto, basado en HTML, CSS, Less (v3), Sass (v4) y JavaScript. Bootstrap se lanzó por primera vez en 2011. Fue desarrollado para facilitar el desarrollo de front-end. Usando Bootstrap, uno puede crear funcionalidades como el carrusel, tarjetas, etc. de forma bastante rápida y sencilla. Sin Bootstrap, habría requerido mucha codificación. Otra ventaja de usar Bootstrap es que hace que todo el dispositivo del sitio web responda. Esto significa que el sitio web se verá bien en todos los dispositivos, independientemente del tamaño de la pantalla, el sistema operativo o el tipo de dispositivo (teléfono inteligente, tableta, computadora portátil, teléfono con funciones, etc.).
La última versión de Bootstrap v4.3.1 se lanzó en febrero de 2019 .
Echemos un vistazo a las nuevas características que ofrece esta nueva versión.
- Se agregaron .rounded-sm y .rounded-lg para el radio de borde pequeño y grande.
- Se agregó la clase de modificador .modal-dialog-scrollable para desplazar el contenido dentro de un modal.
- Se han agregado las clases de modificador .list-group-horizontal . Estos se utilizan para mostrar los grupos de listas como una fila horizontal.
- El .text-break se ha introducido recientemente para aplicar saltos de palabra en el párrafo.
- .rounded-sm y .rounded-lg para aplicar radio de borde a las divisiones.
- .modal-dialog-scrollable permite desplazarse dentro de un modal dado. Esto permite ingresar más datos en el cuadro modal, sin tener que preocuparse por el tamaño del párrafo.
- Se han agregado las clases de modificador .list-group-horizontal . Muestra los grupos de la lista como una fila horizontal.
Mejoras en la nueva versión
- Solía haber algunas variables que solían heredar sus valores del padre o de algún otro elemento. Los valores inherentes se han establecido como nulos para esos elementos y permanecerán así hasta que el usuario los modifique personalmente.
- El estilo de enfoque de las insignias ahora coincide con su color de fondo.
Obsoleto:
- Las propiedades img-retina , invisible , float y size mixins quedaron obsoletas en la versión 4.3 y se eliminarán por completo a partir de la versión 5.0.
Ejemplo de cuadro de diálogo desplazable
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Images</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.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> </head> <body style="text-align:center;"> <h4 class="m-3">Scrollable Dialog Box - Bootstrap v4.3</h4> <!-- Button trigger modal --> <button type="button" class="btn btn-primary mx-4" data-toggle="modal" data-target="#exampleModalScrollable"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content" style="overflow:initial;"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle"> Modal title </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body position-static"> Computer Science is the study of computers and computational systems. Unlike electrical and computer engineers, computer scientists deal mostly with software and software systems; this includes their theory, design, development, and application. <br> <br> Principal areas of study within Computer Science include artificial intelligence, computer systems and networks, security, database systems, human computer interaction, vision and graphics, numerical analysis, programming languages, software engineering, bioinformatics and theory of computing. <br> <br> Although knowing how to program is essential to the study of computer science, it is only one element of the field. Computer scientists design and analyze algorithms to solve programs and study the performance of computer hardware and software. The problems that computer scientists encounter range from the abstract-- determining what problems can be solved with computers and the complexity of the algorithms that solve them – to the tangible – designing applications that perform well on handheld devices, that are easy to use, and that uphold security measures. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Save changes </button> </div> </div> </div> </div> </body> </html>
Producción
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA