Bootstrap es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Este es el marco HTML , CSS y JavaScript más popularResuelve muchos problemas que tuvimos una vez, uno de los cuales es el problema de compatibilidad entre navegadores.
La siguiente clase se utiliza para el diseño fluido. Establece un ancho del 100% en todos los puntos de interrupción.
Sintaxis:
.container-fluid,
Diseño fluido de Bootstrap: en Bootstrap, puede utilizar la clase «.container-fluid» para crear formatos fluidos para usar el 100% del ancho de la ventana gráfica en todos los dispositivos. La clase «.container-fluid» esencialmente aplica el «ancho: 100%» en lugar de varios anchos para varios tamaños de ventana gráfica. En cualquier caso, el diseño será receptivo y, obviamente, puede utilizar las clases del marco.
Ejemplo: Este ejemplo hará un diseño fluido que cubra el 100% del ancho de la pantalla usando Bootstrap 4 .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap 4 Fluid Layout</title> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src= "https://code.jquery.com/jquery-3.5.1.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-success mb-3"> <div class="container-fluid"> <a href="#" class="navbar-brand mr-3">GeeksforGeeks</a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <div class="navbar-nav"> <a href="#" class="nav-item nav-link active"></a> <a href="#" class="nav-item nav-link">Courses</a> <a href="#" class="nav-item nav-link">DSA</a> <a href="#" class="nav-item nav-link">Articles</a> <a href="#" class="nav-item nav-link">Jobs</a> <a href="#" class="nav-item nav-link">Student</a> <a href="#" class="nav-item nav-link">Tutorials</a> </div> </div> </div> </nav> <div class="container-fluid"> <div class="jumbotron"> <h1>Get Hired With GeeksforGeeks and <strong>Win Exciting Rewards!</strong> </h1> <p class="lead"> Imagine a situation of visiting a game parlor or adventure park, having ultimate fun there, and coming back home without paying a single penny there and in fact, receiving some exciting rewards or cash benefits from them. </p> <p><a href="#" target="_blank" class="btn btn-success btn-lg"> Register here </a> </p> </div> <div class="row"> <div class="col-md-4"> <h2>Basic Concepts For Data Science</h2> <p> Data Scientist is one of the most lucrative career options that offers immense job satisfaction,insanely high salary, global recognition, and amazing growth opportunities. </p> <p><a href="#" class="btn btn-success"> Read More »</a> </p> </div> <div class="col-md-4"> <h2>Stock Market APIs For Developers</h2> <p> Stock Market is all about the exchange of stocks (also pronounced as Shares) between various buyers and sellers. Since stocks of variable prices are prone </p> <p><a href="#" class="btn btn-success"> Read More »</a> </p> </div> <div class="col-md-4"> <h2>Is Quick Sort Algorithm Adaptive or not</h2> <p> Pre-Requisites: Quick Sort Algorithm Adaptiveness in the Quick Sort Algorithm refers to the decision that if we are given an array that is already sorted </p> <p><a href="#" class="btn btn-success"> Read More »</a> </p> </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por gurjeetsinghvirdee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA