Oui je confirme qu'il vaut mieux prendre le CDN 3.2.0, car pour ma part, je n'arrive pas à reproduire les exemples à partir de Partie 1 "Premiers Pas" / Chapitre 2 "Une grille ?" / Exemple "Une seule rangée".
Bonjour,
La version 3.3 est récente et il faudra un peu de temps pour la mise à jour du cours...
Mais j'ai commencé à tester cette version (la 3.3.1) et pour moi tous les exemples des chapitres 2 et 3 fonctionnent parfaitement parce que la grille n'a pas été modifiée .
Effectivement, rien ne servait de surcharger le CSS de départ. Il me reste 1 truc à régler. Mes boutons "redesignés" pour le téléphone restent en taille large. Pourtant le code est bien encapsulé.
Effectivement, rien ne servait de surcharger le CSS de départ. Il me reste 1 truc à régler. Mes boutons "redesignés" pour le téléphone restent en taille large. Pourtant le code est bien encapsulé.
J'ai un soucis avec l'exercice activité 2,j'ai pratiquement tout fait ,mais je bloque sur le titre H1.
De 992px à 1250px le titre ne tient pas sur une ligne,quelqu'un peut m'aider? merci.
il faut savoir qu'avec bootstrap on definit la rangée par la classe row et celle-ci peut être divisible en plusieurs colonne. dans cet exemple on a le logo et le titre dans la 1ère rangé regarde ce bout code:
Oui c'est ce que j'avais fait au départ,mais du coup le titre n'est plus centré malgré un text-center avec 11 1.Par contre avec 8 2 c'est bien centré mais sur 2 lignes!
par contre ton code présente le même problème lol! (je viens tout juste de le tester)
rolandabanda a écrit:
vérifie si tu as les mêmes propriétés car mon code fonctionne parfaitement!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La maison de l'architecte</title>
<meta name="description" content="Le site de la maison de l'architecture">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/* Styles de base */
body {
font-family: 'Bitter', serif;
background-color: #eef;
color: #259;
}
nav img {
width: 100%;
}
/* Bandeau */
.jumbotron {
background-color: #eef;
margin-bottom: 0;
}
/* Footer */
footer.row {
margin: 20px 0 40px 0;
}
.btn {
width: 50px;
height: 50px;
border-radius: 25px;
padding-top: 10px;
}
/* Styles pour les smartphones */
#left, #side1, #side2 {
padding: 10px 10px 0 10px;
}
/* Styles pour les tablettes */
@media (min-width: 768px) {
#left{
padding: 0;
}
#side1 {
padding: 10px 5px 0 0;
}
#side2 {
padding: 10px 0 0 5px;
}
}
/* Styles pour les écrans moyens et grands */
@media (min-width: 992px) {
#side1, #side2 {
padding: 0 0 10px 10px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<header class="jumbotron row">
<div class="col-sm-2 hidden-xs">
<a href="#"><img src="assets/img/maison.png" alt="logo"></a>
</div>
<div class="col-sm-8 text-center">
<h1>La maison de l'architecte</h1>
</div>
</header>
<nav class="row">
<div id="left" class="col-md-8">
<a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
</div>
<div id="side1" class="col-sm-6 col-md-4">
<a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
</div>
<div id="side2" class="col-sm-6 col-md-4">
<a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
</div>
</nav>
<footer class="row text-center">
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</div>
</body>
</html>
A partir de 992px jusqu'a 1250 px le titre h1 est sur deux ligne, exactement comme mon code
hors dans l'énnoncé il est dit :
grand et moyen écran ça commence à partir de 992px et sur cette image le titre est bien sur une ligne! donc problème!
Salut, bootstrap n'est pas magique,
la classe text-center ne fait rien d'autre qu' un "text-align: center"..
Le texte de ton element est donc centré.. à l'interieur de celui-ci
> le titre n'est plus centré malgré un text-center avec 11 1.
Ton titre est centré dans une div de 11 "collones", il ne sera donc pas centré dans la page, mais un peu à droite faute à la colonne manquante à gauche..
essais 10 cols ? ( pour centrer avec une col manquante à gauche, pourquoi ne pas en laisser une à droite ? )
> Par contre avec 8 2 c'est bien centré mais sur 2 lignes!
'Fectivement', ta div est maintenant centrée, mais à une largeur max de 2/3 de son élement parent( mons son propre padding (colonne)).. soit du jumbotron qui à certainement un beau padding.
Mais comme c'est bien pensé, ton titre voulant rester visible, il se split en lignes des qu' il ne peut plus tenir en largeur..
Donc en solution possible, j' proposerai par exemple de reduire la police lorsque l'espace disponible deviens insuffisant ?
ou elargir le conteneur ?
Comment enlever la petite marge de droite qui fait apparaître une scroll-bar horizontale ? Je pense que ça vient du nav ou du footer mais je ne trouve pas ce qui cause ça.
Pourquoi les 3 images passent en mode 100% de largeur à partir de 767px, alors que le logo lui, disparaît à partir de 766px ?
Voilà, le code.
Merci à vous !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La maison de l'architecte</title>
<meta name="description" content="Le site de la maison de l'architecture">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/* Styles de base */
body {
font-family: 'Bitter', serif;
background-color: #eef;
color: #259;
}
nav img {
width: 100%;
}
/* Styles pour les smartphones */
#left, #side1, #side2 {
padding: 10px 10px 0 10px;
}
/* Styles pour les tablettes */
@media (min-width: 768px) {
#left{
padding: 0;
}
#side1 {
padding: 10px 5px 0 0;
}
#side2 {
padding: 10px 0 0 5px;
}
}
/* Styles pour les écrans moyens et grands */
@media (min-width: 992px) {
#side1, #side2 {
padding: 0 0 10px 10px;
}
}
</style>
</head>
<body>
<div class="container-fluide">
<!-- HEADER -->
<header class="jumbotron row">
<div class="col-sm-2 hidden-xs text-center">
<a href="#"><img src="assets/img/maison.png" alt="logo"></a>
</div>
<div class="col-sm-8 text-center">
<h1>La maison de l'architecte</h1>
</div>
</header>
<!-- NAVIGATION -->
<nav class="row">
<div id="left" class="col-md-8 col-sm-12">
<a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
</div>
<div id="side1" class="col-md-4 col-sm-6">
<a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
</div>
<div id="side2" class="col-md-4 col-sm-6">
<a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
</div>
</nav>
<!-- FOOTER -->
<footer class="text-center row">
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</div>
<!-- STYLE AJOUTES -->
<style type="text/css">
header{margin:0 !important; background-color: #eef !important;}
footer{margin:10px;}
.btn {
width: 50px;
height: 50px;
border-radius: 25px;
padding-top: 10px;}
</style>
</body>
</html>
pour ta 2e question, dans ton code tu a bien spécifier que pour les tables:
l'image Nos réalisations occupe 100% de la ligne (col-sm-12) et
les deux autres images occupent 50% chacun de la ligne suivant (col-sm-6).
Or d'après bootstrap 3, les tablettes ont une taille entre [768px - 991px] donc si l'écran a une taille inférieure à 768px, le contenu de col-sm-6 devient col-xs-12 soit 100% de l'écran
pour le logo chez moi il disparait aussi lorsque l'écran devient inférieur à 768px car hidden-xs = taille < 768px
en ce qui concerne la 1ère question je ne sais pas ce qui cause le scroll-bar horizontale
Je commence juste le cours et j'ai un petit soucis d'affichage. le popup sur "SAT" au chapitre 3 "Un peu de pratique" reste basic et sans fioritures. Je charge bien les css et js en début et fin de fichier mais la mise en forme ne se fait pas.
Le reste de la page est pourtant cohérent avec l'exemple du cours.
Voici le code (je vous passe le milieu de la page que vous connaissez tous ):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap - Prise en main</title>
<!-- Bootstrap -->
<!-- <link href="assets/css/bootstrap.min.css" rel="stylesheet"> -->
<link <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/tuto.css" rel="stylesheet"> -->
<style type="text/css">
[class*="col"] { margin-bottom: 20px; }
img { width: 100%; }
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="page-header">
<h1>Mon amour pour les tigres</h1>
</header>
<section class="row">
<div class="col-lg-12">
<p>
Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux.
</p>
<p>Voici ce qu'en dit le wikipedia :</p>
<blockquote>
Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera.
...
28645 Félins-sur-Loire<br>
</address>
</aside>
<div class="col-sm-8">
<img src="assets/images/photo-tigre.jpg" alt="Tigre">
</div>
</section>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- <script src="assets/js/jquery.min.js"></script> -->
<!-- <script src="assets/js/bootstrap.min.js"></script> -->
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
ok inspecte le mot SAT tu verra qu'il est entouré de la balise inline <abbr>SAT</abbr> et dont son style est défini dans bootstrap.css ligne 52 par abbr[title] {
border-bottom: 1px dotted;
}
mais même si tu comment cette ligne, le mot SAT sera cette fois souligné d'une ligne en pointillés car par défaut les navigateurs soulignent tous les mots entourés de cette balise en pointillés regarde cet exemple https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_abbr_test
J'ai un petit soucis avec l'installation d'un compilateur LESS.
Je suis sur Unbuntu16.04lts et aucun compilateurs ne veut se lancer (crunch2, koala) je ne sais même pas si le système le vois.
Du coup je ne peux pas continuer le cours bootstrap pour faire les exemples et aussi pour plustard.
Si quelqu'un peut m'aider?
Bonsoir. Je pense que tu peux abandonner Crunch et Koala, je n'ai jamais réussi à les lancer. Tu peux installer le compilateur en ligne de commande avec npm :
npm install -g less
Le lien du site officiel avec des exemples d'utilisation : lesscss.org
- Edité par n1col4s 18 juin 2017 à 19:44:08
"In chess, it's called Zugzwang, when the only viable move is not to move."
Le 1er : Concernant le menu de navigation placé dans le "header" il faut le faire disparaitre pour les mobiles et faire apparaitre à la place un menu déroulante qui se rétracte. J'ai réussi à placé l'icône du menu déroulant cependant l'icône ne se place pas sur la même ligne que le titre de mon "header" il se place un peu plus bas, ce qui n'est pas du tout esthétique.
Le 2ème : Concernant le reste de la page il y a des marges à droite et à gauche que je n'arrive pas à supprimer. J'ai bien essayer de créer un style css : /* Enlever marges sur les cotés */ .padding-left-right-0{ padding-left: 0; padding-right: 0; }
En mode tablette, mon titre n'occupe pas deux ligne mais une seule.
Dois -je changer cela avec du style , en mettant une limite en pixel au titre pour le mode tablette, où y as-t-il une classe bootstrap pour arranger ça ?
mon code actuel est celui-ci :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La maison de l'architecte</title>
<meta name="description" content="Le site de la maison de l'architecture">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/* Styles de base */
body {
font-family: 'Bitter', serif;
background-color: #eef;
color: #259;
}
nav img {
width: 100%;
}
/* Styles pour les smartphones */
#left, #side1, #side2 {
padding: 10px 10px 0 10px;
}
/* Styles pour les tablettes */
@media (min-width: 768px) {
#left{
padding: 0;
}
#side1 {
padding: 10px 5px 0 0;
}
#side2 {
padding: 10px 0 0 5px;
}
}
/* Styles pour les écrans moyens et grands */
@media (min-width: 992px) {
#side1, #side2 {
padding: 0 0 10px 10px;
}
header{
margin-top: 50px;
margin-bottom: 50PX;
}
}
.btn-primary {
width: 50px;
height: 50px;
border-radius: 25px;
}
</style>
</head>
<body> <container>
<header class="col-lg-12 col-md12 col-sm-12 col-xs-12">
<a class="pull-left col-lg-2 col-md-2 col-sm-2 hidden-xs" href="#"><img src="assets/img/maison.png" alt="logo"></a>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 text-center"> <h1>La maison de l'architecte</h1>
</header>
<nav class="navbar">
<div id="left" class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
</div>
<div id="side1" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
</div>
<div id="side2" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
</div>
</nav>
<footer>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x" ></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</div>
</footer>
</container>
</body>
</html>
Salut, au niveau de ton titre H1 commence par fermer ta balise </div> et pour modifier le fait que ton titre doit être sur deux lignes en mode tablette dans cette div tu changes la valeur de tes col-sm et col-xs en plus petit essaye avec 10 regarde puis 8 puis 6 etc jusqu'à ce que tu es un résultat concluant.
Salut, au niveau de ton titre H1 commence par fermer ta balise </div> et pour modifier le fait que ton titre doit être sur deux lignes en mode tablette dans cette div tu changes la valeur de tes col-sm et col-xs en plus petit essaye avec 10 regarde puis 8 puis 6 etc jusqu'à ce que tu es un résultat concluant.
Cordialement Thomas.
Merci de votre réponse, j'ai bien fermé la div , et j'ai mis en col-sm-7 , mais le texte ne va pas aussi loin que dans l'exercice .
J'imagine qu'il faut que j'augmente la police de H1 dans le style ?
Bonjour il faut vraiment être précis dans quand chercher l'aide de la communauté je penses que c'est le TP3 et non TP2 hein
pour ta 1ère préoccupation:
tu n'a pas bien compris utilisation des classes bootstrap pour lanavigaion: y a trop d'erreurs
<!-- Navigation
================================================== -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header" <!-- ici on crée un bouton qui va faire apparaître et disparaître les éléments du menu pour les écrans >=768px -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">La maison de l'architecture</a>
</div>
<div class="collapse navbar-collapse"><!-- cette classe permet de cacher les éléments du menu pour les écrans >=768px -->
<ul class="nav navbar-nav">
<li class="hidden"><a href="#page-top"></a></li>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#qui">Qui sommes-nous ?</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div
</nav>
pour ta 2e préoccupation:
il faut respecter les règles de l'art enlève la <div class="container-fluid"> puis la classe '' row que tu as défini dans le header'' et aussi la <div class="container-fluid"> et la <div class="row"> dans la navigation
puis ajoute ceci dans le head <style>img{width:100%}</style> donc tu aura une structure comme celle-ci: