Quelqu'un à une info à propos de la sortie du nouveau cours Bootstrap pour la version 4 ?
J'ai lu qu'il était rédigé et moi je suis impatient de le lire pour apprendre les nouveautés parce que la doc en Anglais, c'est gentil mais au bout de 10 lignes, je m'endors en plus de comprendre un mot sur deux ... trois ....
M'enfin, si une gentil personne s'est cassé le C** à faire un gros travail pour nous rendre service, ben se serai bien qu'il soit ajouté à la liste des cours, et je pense même que le cour actuel doit rester en ligne pendant encore pas mal de temps car beaucoup d'entre nous utilise encore la V3.
Bref, j'espère qu'ils ne feront pas une actualisation du cour mais belle et bien une création d'un nouveau cour
J'essaie d'utiliser les icônes de glyphicons mais les classes données sur leur site ne semblent plus correspondent à celles du cour. Du coup je n'arrive pas à me servir de leurs icônes, ils ne sont pas pris en compte. Pour info, j'utilise Bootstrap v3.3.7. Merci pour votre aide.
Concernant l'activité 3, toutes les images du carrousel ont des dimensions de 1280x848 sauf "archi3" qui fait 1275x848, est-ce fait exprès pour qu'on redimensionne les images?
En effet, je me souviens qu'une image n'avait pas les même dimension que les autres.
Perso, je ne me suis pas fait chier, j'ai tout "tronçonner" pour qu'elles aient toutes les mêmes dimensions et éviter le petit "saut" désagréable au changement d'image.
A voir sous réserve si cela fonctionne d'imposer des dimensions directement dans le code, dans l'immédiat, j'ai pas le temps ni l'envie (fatigué) de tester ...
Oui, ce n'est pas un critère de notation apparemment.
Merci.
Pour ceux qui n'ont pas encore fait l'activité 3, la "créativité" est prise en compte, donc quand on vous suggère de changer la police et autres, faites-le.
Bonjour, J'ai un souci avec l'activité 3 : quand j'écris le code du carrousel, on dirait que mon éditeur (notepad++) ne reconnaît pas les attributs "data-ride", "data-target" et "data-slide-to". Ils restent en noir au lieu de s'écrire en rouge, pourtant je pense avoir écrit le code correctement? Au niveau du carrousel, on voit bien les chevrons et les indicateurs, mais ceux-ci ne fonctionnent pas quand on clique dessus.
J'ai réussi à faire fonctionner le carrousel correctement, j'avais écrit "carousel-slide" au lieu de "carousel slide". Par contre notepad++ écrit toujours les attributs en noir. Je ne sais pas du tout ce que ça signifie?
je ne comprends pas la class navbar-nav ! car quand on regarde dans le fichier de Bootstrap, la flex-direction est 'column' donc liste en colonne alors que dans l'exemple, on a une liste en ligne...
Je suis actuellement sur l'activité partie 3 et je voulais savoir si il y avait carte blanche pour les titres des photos dans le carrousel car je ne vois aucune infos à ce sujet.
Le cours Prenez en main Bootstrap se base sur la version 3.3.7 de Bootstrap n'est il pas obsolète ?
La version 4.0.0 est sortie on est à la version 4.1.1 je me demander donc si le cours ne dois pas de nouveau être mis à jour. Comme le dis le créateur du cours le dis dans le chapitre 1 "(le code qu'on a écrit pour une mise en page devient rapidement obsolète pour les nouvelles versions)"
"Le passage à la version 3 a été une petite révolution avec de très nombreux changements, en particulier une refonte complète de la grille. Un site écrit avec la version 2 doit être totalement réécrit pour cette nouvelle version, mais ce n'est évidemment pas une obligation."
je me permets de revenir vers vous concernant l'activité 3 du module "Prenez en main Bootstrap" car après avoir épluché le forum et le web, je n'arrive toujours pas à trouver les solutions à mes divers problèmes et étant novice je vous avoue que je suis un peu perdue et je commence à m'arracher les yeux de la tete !! De plus je suis passé par ce cours pour essayer de valider "Découper er intégrer une maquette" qui est également compliqué pour moi ... Cela fait un bout de temps que je n'avance plus car je suis seule avec mes cours et je souhaiterais vraiment comprendre pour avancer au mieux.
Je vous expose mes questions :
(j'utilise un mac comme support pour info)
Problème n°1 = Lorsque j'ouvre ma page sur Chrome, celle-ci affiche bien l'onglet de navigation lorsque l'on réduit le support. Lorsque je passe sur Safari, aucun ajustement ne se fait et l'onglet n'apparait pas.
Problème n°2 = Je n'arrive pas à décaler mon texte dans la navbar, afin de reproduire l'effet escompté (qui semble être un peu centré), celui-ci se cale à gauche, impossible de le faire changer de place meme en essayant avec des col-* ...
Problème n°3 = qui m'a l'air récurrent sur le forum : les images du carrousel ! Je ne comprends pas pourquoi elles n'occupent pas toute la largeur de l'écran ...? Et les chevrons ne reste pas sur l'image selon la proportion de la taille de l'écran.
Je pense que le restant demandé est correct, mais si toute fois vous observez une erreur dans mon code n'hésitez pas à m'en faire part
Bonne continuation à vous tous et merci par avance pour vos précieux conseils. @bestmomo
Voici mon code de l'activité 3 :
<!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.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 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 {
background: url('assets/img/fond.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.jumbotron {
background-color: rgba(0,0,0.5,0);
}
.navbar-inverse .navbar-brand {
color: dimgrey;
}
.navbar-inverse .navbar-nav > li > a {
color: dimgrey;
}
.container {
padding-right: -15px;
padding-left: -15px;
margin-right: auto;
margin-left: auto;
}
/* Images */
img {
width: 100%;
}
/* Styles pour les tablettes */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Styles pour les écrans moyens et grands */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar">
<div class="container">
<!-- Navigation
================================================== -->
<header class="navbar navbar-inverse navbar-fixed-top">
<a href="#page-top" class="navbar-brand" >La maison de l'architecture</a>
<div class="navbar-header">
<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<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>
</header>
<!-- Caroussel
================================================== -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicateurs d'image affichée -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<!-- Initialisation carousel + titres images -->
<div class="carousel-inner">
<div class="item active"><img src="assets/img/archi1.jpg" alt="Architecture">
<h1 class="carousel-caption">Un désign futuriste</h1>
</div>
<div class="item"><img src="assets/img/archi2.jpg" alt="Architecture">
<h1 class="carousel-caption">Des matériaux uniques au monde</h1>
</div>
<div class="item"><img src="assets/img/archi3.jpg" alt="Architecture">
<h1 class="carousel-caption">De l'originalité avant tout</h1>
</div>
<div class="item"><img src="assets/img/archi4.jpg" alt="Architecture">
<h1 class="carousel-caption">Des technologies de pointe</h1>
</div>
</div>
</div>
<!-- Boutons de défilement du carousel -->
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Corps de page déjà codé
================================================== -->
<div class="container">
<div class="jumbotron row" id="accueil">
<h1 class="text-center">Bienvenue dans notre espace</h1>
<img class="col-sm-12 col-md-5" src="assets/img/accueil.jpg" alt="Accueil">
<p class="col-sm-12 col-md-7">Nous sommes spécialisés dans tous types de constructions et nous prenons en charge les projets de A à Z. Vous pouvez nous confier en toute confiance des projets de toutes dimensions, des plus simples aux plus osés. Notre équipe est efficace, réactive et compétente. Nous entretenons toujours un dialogue de tous les instants avec nos clients. Bien qu'à la pointe de notre activité nous pratiquons des prix rigoureux et adaptés à tous les budgets.</p>
</div>
<div class="jumbotron row" id="qui">
<h1 class="text-center">Une équipe efficace</h1>
<img class="col-sm-12 col-md-5 col-md-push-7" src="assets/img/equipe.jpg" alt="Equipe">
<p class="col-sm-12 col-md-7 col-md-pull-5">Notre équipe est jeune, experte et motivée. Notre entreprise est certifiée ISO 9001. Nous cherchons en permanence à améliorer la qualité de nos services et nous sommes à l'écoute de nos clients.</p>
</div>
<div class="jumbotron" id="contact">
<h1 class="text-center">Un message pour nous ?</h1>
<form class="row">
<div class="form-group col-lg-4">
<input type="email" class="form-control" placeholder="Votre email">
</div>
<div class="form-group col-lg-8">
<textarea class="form-control" rows="3" placeholder="Votre message"></textarea>
</div>
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-default pull-right">Envoyer</button>
</div>
</form>
</div>
</div>
<!-- Pied de page
================================================== -->
<footer class="row text-center">
<a class="btn btn-default" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Javascript de Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
// Scrollspy fluide
$(function () {
$('header a').on('click', function(e) {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(this.hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
});
});
</script>
</body>
</html>
Le cours Prenez en main Bootstrap se base sur la version 3.3.7 de Bootstrap n'est il pas obsolète ?
La version 4.0.0 est sortie on est à la version 4.1.1 je me demander donc si le cours ne dois pas de nouveau être mis à jour. Comme le dis le créateur du cours le dis dans le chapitre 1 "(le code qu'on a écrit pour une mise en page devient rapidement obsolète pour les nouvelles versions)"
"Le passage à la version 3 a été une petite révolution avec de très nombreux changements, en particulier une refonte complète de la grille. Un site écrit avec la version 2 doit être totalement réécrit pour cette nouvelle version, mais ce n'est évidemment pas une obligation."
En attendant de le trouver sur OC
bestmomo a écrit:
Bonjour,
Pour info j'ai commencé à mettre en ligne le cours Bootstrap 4 sur mon blog.
bonjour j'ai un soucis sur l'activité_partie2. Je pense avoir fait une erreur sur l’arrondissement des boutons car je n'obtiens pas le même résultat que sur la photo d'exemple qu'il faut faire. Un autre petit soucis mon logo sur la version tablette passe audessus du tire alors qu'il devrait rester à coté.
Si quelqu'un pourrais éclairer ma lanterne ça serai sympa .
<!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;
}
}
.jumbotron {
text-align: center;
background-color: #eef;
margin-left: 0px;
}
.jumbotron a {
margin-left: 0px;
}
.btn-lg {
width: auto;
height: auto;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="container">
<header class="jumbotron">
<div class="container">
<a href="#" class="col-md-1 hidden-sm hidden-xs"><img src="assets/img/maison.png" alt="logo"></a>
<h1 class="col-md-10">La maison de l'architecte</h1>
</div>
</header>
<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 col-xs-12">
<a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
</div>
<div id="side2" class="col-md-4 col-sm-6 col-xs-12">
<a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
</div>
</nav>
<footer class="jumbotron">
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-flickr fa-2x"></i></a>
<a class="btn btn-primary btn-lg" href="#"><i class="fa fa-spotify fa-2x"></i></a>
</footer>
</div>
</body>
</html>
j'ai une question je viens de faire le premier exercice sur le cour de Bootstrap il fallait faire une page simple avec plusieurs indications et notamment des boutons ronds et quand je regarde dans mon navigateur une fois mon code fini les boutons du footer sont rond alors que dans la correction tous les élèves m'ont dit que les boutons ne sont pas rond? comment est ce possible
abraham.kb98@gmail.com
Rd