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 el problema de compatibilidad entre navegadores.
La siguiente clase establece un ancho máximo en cada punto de interrupción de respuesta.
Sintaxis:
.container
Diseño fijo Bootstrap: este tipo de diseño hace que los diseños de páginas web dependan de una cantidad decente de píxeles, el ancho del contenedor difiere según el ancho de la ventana gráfica y el formato responde. La forma más común de crear el diseño fijo comienza con la clase » .container «. Puede hacer una fila con la clase » .row » para envolver las reuniones pares de segmentos. Las filas se insertarán dentro de un «.container » (ancho fijo) para una disposición y relleno legítimos.
Ejemplo: El siguiente ejemplo explica un diseño fijo 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 Fixed 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"> <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"> <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