[BootStrap] Affichage d'une barre de navigation

**BOU59000** · 11/08/2022, 21h33

Bonjour à toutes et à tous,

Je suis suis m'y à Bootstrap il y a peu de temps.
Et j'avoue que parfois c'est un peu la galère pour moi pour ce démarrage

J'ai quelques points où je galère et ne sais pas trop quoi faire/ quoi utiliser et à quel endroit pour que ca marche tout simplement.
(Dans ces galères il y a le carrousel mais je préfère le mettre dans un autre poste)

Le site en version grand écran à cette allure la:
Nom : MonSite_vision globale.PNG
Affichages : 132
Taille : 28,3 Ko

Nom : MonSite_vision globale.PNG
Affichages : 132
Taille : 28,3 Ko

Le site en version moyen écran à cette allure la:
Nom : MonSite_vision globale_resp1.PNG
Affichages : 124
Taille : 10,7 Ko

Le site en version petit écran à cette allure la:
Nom : MonSite_vision globale_resp2.PNG
Affichages : 131
Taille : 15,0 Ko

1) Mon premier problème est le suivant:
Est-il possible que la zone de texte blanche aille jusqu'au pied de page de manière automatique?
Ou suis je obligé de définir une hauteur suivant les différents breakpoint?
Et si oui... je fais comment?

J'ai essayé de rajouter des h-xxx à plusieurs endroits par.. aucun résultat

2) Quand mon écran devient plus petit (taille moyenne), ma barre de navigation étant fixe, elle a tendance à se positionner devant le carrousel.
Comment faire pour que ce qui doit se trouver sous la navigation, reste sous la navigation?

3) Mon bouton toggle est situé à gauche. Comment le placer à droite?
Et comment faire pour que lui aussi ne passe pas devant le texte (dans le cas présent "TEXTE IMPORTANT")
J'ai essayé de placer des start-end à différents endroits et en fait... non ça ne marche pas

Ci-dessous le code la la page:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site</title> <!-- A modifier ---------------------------------------------------------------------------------------------------------------------------------------------->
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/14273d579a.js" crossorigin="anonymous"></script>
 
	<!-- Feuille de style perso -->
	<link rel="stylesheet" href="styleperso.css"/>
</head>
 
<body>
 
    <header>
				<nav class="navbar navbar-expand-md fixed-top navbar-light">
					<div class="container" id="style_header_navbar">
						<a class="navbar-brand text-uppercase fw-bold" href="#">
								<span class="bg-warning bg-gradient p-1 rounded-3 text-dark">Texte important</span> 
								<em class = "text-white">
								Ceci est le nom de mon site
								</em>
						</a>
						<button class="navbar-toggler fixed-top m-2 bg-warning start-end" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
								aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
							<ul class="nav  nav-pills navbar-nav text-center">
								<li class="nav-item">
									<a class="nav-link active text-dark bg-warning" href="#">Accueil</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-white" href="#">Lien 1</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-white" href="#">Lien 2</a>
								</li>
								<li class="nav-item">
									<a class="nav-link text-white" href="#">Lien 3</a>
								</li>
							</ul>
						</div>
					</div>
				</nav>
 
    </header>
 
    <main>
 
	<!-- Barre de séparation -->
	<section class = "mt-5"> 
		<div class="py-1 w-100" id="style_header_barre_2">
        </div>
	</section>
 
	<!-- Carroussel -->
	<?php include ("carroussel/carroussel.php"); // Insertion du code carroussel ici ?>
 
 
	<section>
		<div class = "container">
			<div class="bg-light mt-1">
				<div class="bg-light mt-1">
				<p class = "text-center"> Ici il y aura un super texte</p>
			</div>
		</div>
	</section>
 
    </main>
 
    <footer class = "fixed-bottom">
       <div class = "container">
			<strong class = "text-warning">Pied de page</strong>
		</div>
    </footer>
 
	<!-- Script pour le menu de navigation responsive -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
                crossorigin="anonymous"></script>
 
</body>
 
</html>

D'avance merci pour votre aide et vos conseils

**BOU59000** · 16/08/2022, 16h11

Bonjour,

J'avance dans ma compréhension du Bootstrap ou.. je recule.. cela dépend du point de vue

Le positif:
. Le toogler est désormais à droite

. j'ai inséré un "logo" sans que ca explose trop la mis en forme

Nom : Monsite001.PNG
Affichages : 84
Taille : 20,8 Ko

Nom : Monsite002.PNG
Affichages : 91
Taille : 13,3 Ko

Le négatif...
Pour arriver à ce résultat j'ai du modifier le code et... il y a quelques effets secondaire lorsque la navigation est affichée sur un grand écran

Je voudrais que le menu de navigation soit aligné avec le logo et le nom du site comme cela:
Nom : Monsite003.PNG
Affichages : 84
Taille : 27,6 Ko

Et finalement il apparait en décalé:
Nom : Monsite004.PNG
Affichages : 82
Taille : 46,3 Ko

Le code actuel:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site</title> <!-- A modifier ---------------------------------------------------------------------------------------------------------------------------------------------->
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/14273d579a.js" crossorigin="anonymous"></script>
 
	<!-- Feuille de style perso -->
	<link rel="stylesheet" href="styleperso.css"/>
</head>
 
<body>
 
    <header>
				<nav class="navbar navbar-expand-lg fixed-top navbar-light">
					<div class="container" id="style_header_navbar">
						<div class = "row">
							<div class = "col">
								<img src="LOGO_Site.png" alt="logo" width="10%">
								<span class="bg-warning bg-gradient p-1 rounded-3 text-dark">Texte important</span> 
								<em class = "text-white">
								Ceci est le site
								</em>
								<button class="navbar-toggler position-absolute top-0 end-0 m-3 start-end bg-warning" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
										aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
									<span class="navbar-toggler-icon"></span>
								</button>
								<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
									<ul class="nav  nav-pills navbar-nav text-center">
										<li class="nav-item">
											<a class="nav-link active text-dark bg-warning" href="#">Accueil</a>
										</li>
										<li class="nav-item">
											<a class="nav-link text-white" href="#">Lien 1</a>
										</li>
										<li class="nav-item">
											<a class="nav-link text-white" href="#">Lien 2</a>
										</li>
										<li class="nav-item">
											<a class="nav-link text-white" href="#">Lien 3</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</nav>
 
    </header>
 
    <main>
 
	<!-- Espacement -->
	<section class = "mt-5"> 
	<div class="py-1 w-100"></div>
	</section>
 
	<!-- Barre de séparation -->
	<section class = "mt-5"> 
		<div class="py-1 w-100" id="style_header_barre_2">
        </div>
	</section>
 
	<!-- Carroussel -->
	<?php include ("carroussel/carroussel.php"); // Insertion du code carroussel ici ?>
 
 
	<section>
		<div class = "container">
			<div class="bg-light mt-1">
				<div class="bg-light mt-1">
				<p class = "text-center"> Ici il y aura un super texte</p>
			</div>
		</div>
	</section>
 
    </main>
 
    <footer class = "fixed-bottom">
       <div class = "container">
			<strong class = "text-warning">Pied de page</strong>
		</div>
    </footer>
 
	<!-- Script pour le menu de navigation responsive -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
                crossorigin="anonymous"></script>
 
</body>
 
</html>

Pour régler ce soucis, j'ai voulu inclure la navigation dans un .col-3 en donnant de fait un col-9 pour la partie logo + nom du site...
Dans ce cas de figure tout est aligné mais comme c'était à prévoir, le menu s'ouvre dans... une col-3 et non sur la totalité de la row

Bien:
Nom : Monsite005.PNG
Affichages : 77
Taille : 38,2 Ko

Nom : Monsite005.PNG
Affichages : 77
Taille : 38,2 Ko

Et pas bien:
Nom : Monsite006.PNG
Affichages : 84
Taille : 13,0 Ko

Le code:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site</title> <!-- A modifier ---------------------------------------------------------------------------------------------------------------------------------------------->
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
 
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/14273d579a.js" crossorigin="anonymous"></script>
 
	<!-- Feuille de style perso -->
	<link rel="stylesheet" href="styleperso.css"/>
</head>
 
<body>
 
    <header>
				<nav class="navbar navbar-expand-lg fixed-top navbar-light">
					<div class="container" id="style_header_navbar">
						<div class = "row">
							<div class = "col-9">
								<img src="LOGO_Site.png" alt="logo" width="10%">
								<span class="bg-warning bg-gradient p-1 rounded-3 text-dark">Texte important</span> 
								<em class = "text-white">
								Ceci est le site
								</em>
								</div>
								<div class="col-3 pt-3">
								<button class="navbar-toggler position-absolute top-0 end-0 m-3 start-end bg-warning" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
										aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
									<span class="navbar-toggler-icon"></span>
								</button>
								<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
									<ul class="nav  nav-pills navbar-nav text-center">
										<li class="nav-item">
											<a class="nav-link active text-dark bg-warning" href="#">Accueil</a>
										</li>
										<li class="nav-item">
											<a class="nav-link text-white" href="#">Lien 1</a>
										</li>
										<li class="nav-item">
											<a class="nav-link text-white" href="#">Lien 2</a>
										</li>
										<li class="nav-item">
											<a class="nav-link text-white" href="#">Lien 3</a>
										</li>
									</ul>
								</div>
								</div>
							</div>
						</div>
					</div>
				</nav>
 
    </header>
 
    <main>
 
	<!-- Espacement -->
	<section class = "mt-5"> 
	<div class="py-1 w-100"></div>
	</section>
 
	<!-- Barre de séparation -->
	<section class = "mt-5"> 
		<div class="py-1 w-100" id="style_header_barre_2">
        </div>
	</section>
 
	<!-- Carroussel -->
	<?php include ("carroussel/carroussel.php"); // Insertion du code carroussel ici ?>
 
 
	<section>
		<div class = "container">
			<div class="bg-light mt-1">
				<div class="bg-light mt-1">
				<p class = "text-center"> Ici il y aura un super texte</p>
			</div>
		</div>
	</section>
 
    </main>
 
    <footer class = "fixed-bottom">
       <div class = "container">
			<strong class = "text-warning">Pied de page</strong>
		</div>
    </footer>
 
	<!-- Script pour le menu de navigation responsive -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
                crossorigin="anonymous"></script>
 
</body>
 
</html>

Et la sur cette partie la, je ne vois plus trop ce que je peux faire désormais

D'avance merci pour votre aide.

[BootStrap] Affichage d'une barre de navigation

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager