Diseño fijo de Bootstrap 4

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *