Page 1 sur 1
Faire la meme navbar
Posté : 27 déc. 2023, 15:46
par filou80
Bonjour,
Je souhaite faire plus ou moins la même navbar que celle-ci :
https://getbootstrap.com/docs/5.3/custo ... lor-modes/
Surtout récupérer le mode dark mode, si quelqu'un peux me dire comment faire.
@+ Filou
Re: Faire la meme navbar
Posté : 27 déc. 2023, 18:59
par two3d
En suivant les tutos de Bootstrap, tu pourra refaire exactement la même.
https://getbootstrap.com/docs/5.3/components/navbar/
Le darkmode lui se fera via JS et un fichier CSS "dark".
Re: Faire la meme navbar
Posté : 27 déc. 2023, 22:03
par filou80
Merci pour votre retour, j'ai copier plusieurs bouts de code en vain.
Pourriez vous me dire par ou commencer.
Merci par avance pour votre retour.
@+ Filou
Re: Faire la meme navbar
Posté : 27 déc. 2023, 22:16
par two3d
Le mieux sera de lire la doc Bootstrap, section navbar (le lien que j'ai mis plus haut).
Re: Faire la meme navbar
Posté : 27 déc. 2023, 22:48
par filou80
Oui j'ai deja essayer plusieurs chose notament ceci :
Code : Tout sélectionner
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Mais a aucun moment j'ai le logo qui vient au milieu en mode telephone et j'arrive pas a avoir le systeme dark mode.
Merci de votre aide.
@+Ludo
Re: Faire la meme navbar
Posté : 28 déc. 2023, 00:03
par two3d
Le système darkmode (le menu) se fera avec un dropdown menu, exemples disponibles sur leur site.
Re: Faire la meme navbar
Posté : 28 déc. 2023, 06:48
par filou80
Bonjour,
J'arrive a cela :
https://intranet.easykode.com/menu.php
Mais toujours pas le même menu, je sais plus quoi faire, et faire de la copy bête j'aime pas.
Merci pour votre aide.
@+ Filou
Re: Faire la meme navbar
Posté : 28 déc. 2023, 10:42
par @rthur
Regarde la console de ton navigateur Ctrl+Maj+i, onglet Console et Réseau, tu verras qu'il te manque plein de fichiers.
A mon avis, tu n'as pas du tout fait une install propre de bootstrap...
Repars d'un modèle vierge en suivant le guide officiel :
https://getbootstrap.com/docs/5.3/getti ... roduction/
Re: Faire la meme navbar
Posté : 28 déc. 2023, 10:59
par filou80
Merci encore pour votre aide.
Quand je regarde au niveau du reseau dans inspecteur j'ai les mêmes fichiers.
Je galère pour un truc tout bête à faire enfin tout bête façon de parler.
Je sais plus par ou commencer et quoi faire .
@+ Filou
Re: Faire la meme navbar
Posté : 28 déc. 2023, 11:01
par two3d
Pour faire du Bootstrap, il te faut connaitre un minimum Bootstrap, commence par le commencement :
https://getbootstrap.com/docs/5.3/getti ... roduction/
Dark Mode :
https://getbootstrap.com/docs/5.3/custo ... -dark-mode
Re: Faire la meme navbar
Posté : 28 déc. 2023, 12:25
par filou80
Merci pour votre aide je vais faire appel à un dev.
Car la je suis perdu même en reprenant a la source je reste sur le même rendu.
Je suis aller voir votre lien C2Script je connais.
@+ Filou
Re: Faire la meme navbar
Posté : 29 déc. 2023, 08:18
par filou80
Bonjour à tous,
Même en prenant les exemples directement sur le site cela ne fonctionne pas, en lançant la page index fourni :
https://getbootstrap.com/docs/5.3/examples/
@+ Filou
Re: [RESOLU] Faire la meme navbar
Posté : 29 déc. 2023, 15:54
par filou80
Merci a tous pour votre aide et vos conseils.
J'ai enfin réussi a faire le menu.
@+ Filou