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