¿Cómo crear una barra de navegación inferior receptiva usando Bootstrap?

Se utiliza una barra de navegación en cada sitio web para que sea más fácil de usar, de modo que la navegación a través del sitio web sea fácil y el usuario pueda buscar directamente el tema de su interés.
La palabra “Navegación” significa la ciencia de moverse de un lugar a otro. En este artículo, creamos una barra de navegación en la parte inferior de la página web. La navegación en la parte inferior de la página web o sitio web que puede ser fija o móvil y se puede ajustar en todo tipo de tamaños de pantalla. Este artículo trata sobre el proceso de creación de una «Navegación inferior receptiva» en Bootstrap.

Ejemplo 1: en este código, creamos un menú de navegación y lo arreglamos en la parte inferior de la página. Es una de las formas más fáciles de tener navegación inferior. La clase «fondo fijo» pega la barra de navegación al final de la página.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Responsive Bottom navigation
    </title>
  
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
  </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
            crossorigin="anonymous">
  </script>
  
    <meta charset="utf-8">
  
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <style>
        .navbar {
            width: 100%;
            background-color: rgb(80, 220, 100);
        }
          
        ul {
            font-size: 20px;
        }
          
        body {
            text-align: center;
            padding-top: 200px;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>A responsive bottom navigation<h3>
  
    <nav class="navbar fixed-bottom navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">GeeksforGeeks</a>
        <button class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse"
                    id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        Home 
                        <span class="sr-only">
                            (current)
                        </span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Link
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        About
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Contact
                    </a>
                </li>
            </ul>
        </div>
  
        <div>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2"
                        type="search" placeholder="Search"
                        aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0"
                            type="submit">
                    Search
                </button>
            </form>
        </div>
    </nav> 
</body>
  
</html>

Producción:

  • Barra de navegación en pantallas pequeñas:
  • Barra de navegación en pantalla grande:

Ejemplo 2: en el código anterior, vimos cómo arreglamos un menú de navegación simple en la parte inferior de la página. En este ejemplo, colocamos una pastilla vertical que tiene un menú en la parte inferior de la página por el que se puede navegar.

<!DOCTYPE html>
<html>
  
<head>
    <title>Responsive Navigation</title>
  
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">
  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
  </script>
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
            crossorigin="anonymous">
  </script>
    
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous">
  </script>
  
    <meta charset="utf-8">
  
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <style>
        h1 {
            text-align: center;
            font-size: 50px;
            padding-top: 200px;
            margin-bottom: 300px;
        }
          
        body {
            background-color: rgb(11, 102, 35);
        }
    </style>
</head>
  
<body>
    <h1>
        GeeksForGeeks: A computer
        science portal for the geeks
    </h1>
  
    <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" 
                 id="v-pills-tab"
                 role="tablist"
                 aria-orientation="vertical">
                
                <a class="nav-link active" 
                   id="v-pills-home-tab" 
                   data-toggle="pill" 
                   href="#v-pills-home" 
                   role="tab" 
                   aria-controls="v-pills-home" 
                   aria-selected="true">
                    <h6>
                        <font color="black">Home</font>
                    </h6>
                </a>
  
                <a class="nav-link" 
                   id="v-pills-profile-tab"
                   data-toggle="pill"
                   href="#v-pills-profile"
                   role="tab" 
                   aria-controls="v-pills-profile" 
                   aria-selected="false">
                    <h6>
                        <font color="black">Policies</font>
                    </h6>
                </a>
  
                <a class="nav-link" 
                   id="v-pills-messages-tab" 
                   data-toggle="pill" 
                   href="#v-pills-messages" 
                   role="tab" 
                   aria-controls="v-pills-messages" 
                   aria-selected="false">
                    <h6>
                        <font color="black">Vacancies</font>
                    </h6>
                </a>
  
                <a class="nav-link" 
                   id="v-pills-settings-tab" 
                   data-toggle="pill"
                   href="#v-pills-settings" 
                   role="tab" 
                   aria-controls="v-pills-settings" 
                   aria-selected="false">
                    <h6>
                        <font color="black">Contact</font>
                    </h6>
                </a>
            </div>
        </div>
  
        <div class="col-9">
            <div class="tab-content" 
                 id="v-pills-tabContent">
                
                <div class="tab-pane fade show active" 
                     id="v-pills-home"
                     role="tabpanel" 
                     aria-labelledby="v-pills-home-tab">
                    <h4>
                        Welcome to the world of geeks. 
                        This portal has been created to 
                        provide well written, well thought
                        and well-explained solutions for 
                        selected questions. It is the best 
                        place to learn exciting things about
                        the world of programming. We've got 
                        exciting problems for interviews, 
                        placements and much more.                                 
                    </h4>
                </div>
                <div class="tab-pane fade" 
                     id="v-pills-profile" 
                     role="tabpanel" 
                     aria-labelledby="v-pills-profile-tab">
                    <h4>
                        Application Privacy Statement
                        We Sanchhaya Education Pvt. Ltd.,
                        are registered and headquartered at
                        BC 227, 2nd Floor, Matrix Business
                        Tower, B4, Sector 132, Noida, UP-201301,
                        hereinafter referred to as GeeksforGeeks.
                        We also offer paid Courses managed by
                        Sanchhaya Classes Pvt. Ltd. with registered 
                        office address B-142, Vishwas Park, Uttam Nagar,
                        New Delhi, North Delhi, Delhi, India, 110059. 
                        At GeeksforGeeks, we value your trust & respect
                        your privacy. This privacy statement
                        (“Privacy Statement”) applies to the 
                        treatment of personally identifiable information
                        submitted by, or otherwise obtained from, you in
                        connection with the associated application 
                        (“Application”). The Application is provided by 
                        GeeksforGeeks (and may be provided by Geeksforgeeks
                        on behalf of a GeeksforGeeks licensor or partner 
                        (“Application Partner”). By using or otherwise 
                        accessing the Application, you acknowledge that
                        you accept the practices and policies outlined in
                        this Privacy Statement.
                    </h4>
                </div>
                <div class="tab-pane fade" 
                     id="v-pills-messages" 
                     role="tabpanel" 
                     aria-labelledby="v-pills-messages-tab">
                    <h4>
                        What impact will you make?
                        Are you ready to apply your knowledge and background
                        to exciting new challenges? From learning to leadership,
                        this is your chance to take your career to the next level.
                        Apply for below-listed vacancies and our team will
                        get in touch with you.
                    </h4>
                </div>
                <div class="tab-pane fade" 
                     id="v-pills-settings" 
                     role="tabpanel" 
                     aria-labelledby="v-pills-settings-tab">
                    <h4>
                        Address: GeeksforGeeks 4th,5th & 6th Floor, 
                        Royal Kapsons, A- 118, Sector- 136, Noida,
                        Uttar Pradesh (201305) For feedback and queries: 
                        feedback@geeksforgeeks.org For course related queries:
                        geeks.classes@geeksforgeeks.org For payment related issues:
                        geeks.classes@geeksforgeeks.org For any issue in a purchased
                        course : complaints@geeksforgeeks.org
                    </h4>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Choco_Chips 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 *