Curso Bootstrap 4 [UDEMY] curso-bootstrap-4-udemy.bluuweb.cl
Curso Vue.js + Firebase [UDEMY] curso-vue-js-udemy.bluuweb.cl
Vamos a crear nuestro menú de navegación o NAVBAR con Bootstrap 4! de forma responsive, esta es la primera parte donde analizamos de forma rápida los elementos populares para que puedas crear tu Navbar.
Es un apartado muy entretenido y pronto subiré la próxima sección para analizar otros detalles pendientes.
MÁS CURSOS DE BLUUWEB!
📌 HTML Y CSS:
📌 JAVASCRIPT:
📌 JQUERY:
📌 CSS GRID:
📌 VISUAL STUDIO CODE:
📌 BOOTSTRAP 4:
📌 PHOTOSHOP:
📌 PSD A HTML:
📌 TEMAS WORDPRESS:
📌 PHP Y MYSQL:
📌 FORMULARIOS CON PHP Y AJAX:
📌 ANGULAR:
📌 FIREBASE/FIRESTORE:
📌 PHP LARAVEL:
📌 MATERIALIZE CSS:
📌 IONIC:
📌 SASS:
📌 PROGRAMACIÓN BÁSICA:
Si quieres que hable de algún tema en particular no olives comentar!
No olvides suscribirte a este hermoso canal y destruirme en los comentarios 🙂
También puedes seguirme en Facebook:
Finalmente visita mi sitio web:
Nguồn: https://valuedandloved.com
Xem thêm bài viết khác: https://valuedandloved.com/cong-nghe/
Xem thêm Bài Viết:
- Binary Option là gì? Giao dịch trên sàn Binary Option thực hiện như thế nào?
- Top CPU Tốt Nhất 2020 Cho Người Build PC
- Những lưu ý khi cài đặt và sử dụng phần mềm Microsoft Toolkit
- Hướng dẫn cách SEO Youtube lên Top 1 nhanh chóng
- Các khu vực này đều có tỷ lệ xét nghiệm dương tính trên 3% trong bảy ngày qua
![[Review] Khách Sạn Hải Yên Mũi Né | Hotel Phan Thiết Bình Thuận – Dulich868.com](https://i.ytimg.com/vi/DtvFRuBtH1c/maxresdefault.jpg)
Hola excelente explicación y muy didactico, tengo un problema eh seguido todos tus tutoriales sobre bootstrap 4 y todo había salido perfecto hasta este donde el boton de colapse no funciona, te dejare mi codigo aquí pegado y espero pueda ayudarme o alguno de tus seguidores muchas gracias!!!
<!– Bootstrap CSS –>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="estilos.css">
<body>
<!
-Ejemplo-><section class=" container-fluid slider d-flex justify-content-center align-items-center color1">
<h1 class="display-2"> Hola Mundo!!!</h1>
</section>
<!
-Barra de Navegacion-><nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm navbar sticky-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="img/logo_1.svg" width="30" height="30" class="d-inline-block align-center" alt="The Matt">
The Matt
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="navbar-nav ml-auto text-center">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">Disabled</a>
</div>
</div>
</nav>
<!– Fin Barra de Navegacion–>
<section class="container">
<p class="mt-5 text-center text-uppercase font-weight-bold font-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, accusamus.</p>
</section>
<!– jQuery first, then Tether, then Bootstrap JS. –>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"</script>
</body>
hola que tal como te va, una pregunta amigo alguna manera de mover el incono hacia la derecha por que con right no me funciona y al colocar la img se me daña el menu, estoy comenzando en este mundo.
thanks bro good video¡
hola estoy viendo tu video de menu con BOOTSTRAP pero nececito hace un sub menu y no me sale el menu lo copie tal cual de BOOTSTRAP como hago me podes responder a pablo.calveras1@gmail.com
Buenas, como estan? Sere curioso, a alguien hoy no le esta funcionando el sticky-top?? =/
Aca ya me pierdo un poco porque no se desde donde tengo que copiar y pegar el codigo. Si es en un div, o el div de mas abajo o en nav, tampoco se que clase tengo que copiar y cual NO tengo que copiar. Es mas confuso
excelente y muy clara la explicacion….para los que recien empezamos es buenisimo…te felicito
hola esta muy claro el tutorial…. me gustaría saber si tienes alguna explicación de "external content", gracias por estos tutoriales.
Ala en vez de usar Boostrap mejor es css , me resulta mucho mejor aparte de que sabes que estás haciendo
esto sirve para 2019?
Hola amigo..estamuy bueno el tutorial y el resultado logrado es muy bueno..no tienes el codigo para copiar?
no me funciono 🙁
Alguien puede ayudarme con el jquery dónde encuentro esa ruta? Porfa!
Saludos, muchas gracias, excelente el contenido… Te recomiendo agregues una advertencia cuando digas que se puede poner un color personalizado en el navbar, (lo hice, y perdí como dos días, risas) es que no se visualiza lo del toogler… pensé que estaba otra cosa mal, o que había un problema de migración con la versión 4.3… éxitos Ignacio, y de nuevo muchas gracias por tu dedicación…
Hoal buenas ami el navbar-toggleable-sm no me funciona… cuando lo alargo o lo acorto lo que hay dentro del menu no se sale y me aparecen ahi fijos
Buenas, tengo un problema
El menu se despliega pero no se contrae, ¿que puedo hacer?
La clase navbar-toggle-right ya no existe en Bootstrap 4.3 debido a que ahora usa flex para posicionar los elementos. Por ello, para poner el botón a la derecha, debes mover el tag <button> a continuación del <a> que encierra el logo de la página.
Como hago un scroll para el menu de celular? alguien sabe?
por si no les sale les dejo mi codigo:
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm" id="nav-menu">
<!– Logo –>
<div>
<a class="navbar-brand" href="#">
<img src="imagenes/Logo/Logo-icono.png" width="30" height="30" class="d-inline-block align-top" alt="Logo Post">
Post
</a>
</div>
<!–End Logo –>
<!– Menu –>
<div class="navbar-nav collapse navbar-collapse" id="menu">
<a class="nav-item nav-link active espacio" href="#">Inicio</a>
<a class="nav-item nav-link active espacio" href="#">Quienes Somos</a>
<a class="nav-item nav-link active espacio" href="#">Contacto</a>
</div>
<!–End Menu –>
<!– toggle –>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!–End toggle –>
</nav>
Hola….excelente….pero me faltaria hacer un submenu flotante….como se incorporaria ahi el dropdown???……. gracias!
Muy buenas He seguido el curso de Boopstrap 4 y resulta que tal y como esta el video tutorial no funciona el boton de navegacion
Hola, no me sirve el navbar, lo pongo tal y como dices pero no muestra el color del nav, aquí dejo mi codigo por si alguien me puede ayudar.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<!–Aquí añadimos la etiqueta link rel="icon" para colocar un icono a la pagina–>
<link rel="icon" type="img/png" href="img/Ori.png">
<!–Aquí añadimos los scripts de bootstrap para hacer la página responsive–>
<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>
<link rel="stylesheet" href="">
<style>
.slider{
background: url("img/5.jpg");
height: 100vh;
background-size: cover;
background-position: center;
}
</style>
<title>Dagusto</title>
</head>
<body>
<section class="container-fluid slider d-flex justify-content-center align-items-center">
<h1 class="display-4">Arepas Dagusto</h1>
</section>
<div class="container">
<nav class="navbarnavbar navbar-expand-sm navbar-dark bg-info">
</nav>
</div>
<section class="container">
<p class="mt-5 pt-5 text-center text-uppercase font-italic font-weight-bold">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, expedita?</p>
<p class="text-danger">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi optio aspernatur vel fugiat dignissimos dolor omnis dicta voluptates aut nostrum voluptate, sapiente modi quas accusamus temporibus, explicabo quos consectetur.</p>
<p class="bg-primary text-white p-4 w-25 float-left mr-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi optio aspernatur vel fugiat dignissimos dolor omnis dicta voluptates aut nostrum voluptate, sapiente modi quas accusamus temporibus, explicabo quos consectetur.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi optio aspernatur vel fugiat dignissimos dolor omnis dicta voluptates aut nostrum voluptate, sapiente modi quas accusamus temporibus, explicabo quos consectetur.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi optio aspernatur vel fugiat dignissimos dolor omnis dicta voluptates aut nostrum voluptate, sapiente modi quas accusamus temporibus, explicabo quos consectetur.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi optio aspernatur vel fugiat dignissimos dolor omnis dicta voluptates aut nostrum voluptate, sapiente modi quas accusamus temporibus, explicabo quos consectetur.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi optio aspernatur vel fugiat dignissimos dolor omnis dicta voluptates aut nostrum voluptate, sapiente modi quas accusamus temporibus, explicabo quos consectetur.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sequi optio aspernatur vel fugiat dignissimos dolor omnis dicta voluptates aut nostrum voluptate, sapiente modi quas accusamus temporibus, explicabo quos consectetur.</p>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"></script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
crossorigin="anonymous"></script>
</html>
donde esta la parte anterior del tutorial
Buen vídeo. Siempre es bueno repasar algunas cosas. Algo que se nos haya olvidado o no hayamos comprendido cabalmente.
Busco algo más de fundamentos, lo esencial. Cómo conciliar los estilos de bootstrap con tus estilos personales. Por qué a veces NO funcionan los estilos de bootstrap. ¿Porque acaso son bugs o es que no los aplicamos correctamente? Cómo diseñar plantillas, páginas maestras repetitivas para no hacer cambios a cada rato sobretodo cuando tienes 150 páginas.
Muy bien pero la voz 2 esta cutre men gracias.
Revisa el código que no funciona en la version 4.1.3
Solo regrese para dejar mi aportacion:
Para los que teniamos problemas para que nos aceptara el sticky-top;
en mi caso lo resolvi sacando el NAV del DIV (borre el div), refresque y listo!
Hola! tengo una consulta todo me había salido bien, tal cual como lo hiciste en el vídeo (muy bueno por cierto). pero al momento que lo subí al hosting e ingrese a la pagina no me funciona. aparece un anuncio que dice esta pagina esta intentando cargar scripts de fuentes no autorizadas. me podrían ayudar por favor 🙁
Después de pelear dos horas con la alineación de los items (que me aparecían a la derecha, y viendo que no les respondían a los que preguntaban en las otras preguntas) voy a poner mi solución, que se contradice con la de Ignacio 😛 -> Le agregué listas desordenadas.
Le agregué las clases: list-unstyled (quita los puntitos de la lista) y pl-5 (le da el padding izquierdo a la lista del menu)
<nav class="navbar navbar-dark bg-dark">
<ul class="list-unstyled">
<li>
<a class="navbar-brand" href="index.html" >
<img src="/assets/brand/bootstrap-solid.svg" width="30"
height="30" class="d-inline-block align-top" alt="Logo Bootstrap">
BOOTSTRAP
</a>
</li>
<li class="pl-5">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Inicio</a>
<a href="#" class="nav-item nav-link">Nosotros</a>
<a href="#" class="nav-item nav-link">Servicios</a>
<a href="#" class="nav-item nav-link">Contacto</a>
</div>
</li>
</ul>
</nav>
genio!! todo lo que necesitaba esta en este video!!