Partage

Exercices du cours Bootstrap / Vos questions

<< 1 ... 38 39 40 ... 48 >>

27 avril 2017 à 2:23:24

Salut à tous j'ai un soucis au niveau de l’exercice 1 de la partie HTML5 où il faut citer les animaux préférés:

mon soucis est au niveau de Ajoutez une liste ordonnée à 3 puces au moins de vos animaux préférés et de Mettez en valeur (emphase forte) le premier animal de la liste.

j'ai bien écrit mes codes mais on ne valide pas. quel est le problème.

cordialement

LeGigachampi

Cora_

28 avril 2017 à 12:51:17

Bonjour,

Après avoir bien pataugé et réglé quelques soucis je me lance...

Je suis sur le premier exercice Bootstrap et je rencontre 2 soucis:

1. La dernière photo ne marge pas en haut sur smartphone (j'ai pourtant appliqué les mêmes propriétés CSS que les 2 autres ...)

2. Mes icones (Font Awsome: FB, Twitter etc): Je cherche à réduire leur taille et les centrer sur les boutons quand je passe en mode smartphone.

Je peux vous laisser mon code...

Merci de m'aider

Voici à quoi ressemblent mes logos.

Je peux donner mon code en MP pour éviter de le poster ici.

-
Edité par Cora_ 28 avril 2017 à 13:07:21

rolandabanda

28 avril 2017 à 14:22:30

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'>

<!--[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>

-
Edité par rolandabanda 28 avril 2017 à 14:31:25

Never Forget that you are the best

Cora_

28 avril 2017 à 14:58:25

Ok pour les boutons, je me suis compliqué la vie.

En revanche pour les images sans marge, j'ai le même code que toi et pas de marge ... Je ne comprend pas :/

rolandabanda

28 avril 2017 à 15:05:35

dans l'exercice il fallait que les images n'aient pas de marges c'est la classe container-fluid qui annule les marges.... mais si tu veux les marges remplace la classe "container-fluid" par "container" c'est dans la première div juste sous l'ouverture du <body>

Never Forget that you are the best

Cora_

28 avril 2017 à 15:18:13

Je parle des marges "entre" les 2 dernières images (regarde ma photo)

rolandabanda

28 avril 2017 à 15:36:50

ok!!!

normalement c'est ce morceau de code qui doit fonctionner

@media (min-width: 768px) {

#left{

padding: 0;

}

#side1 {

padding: 10px 5px 0 0;

}

#side2 {

padding: 10px 0 0 5px;

}

regarde bien si ces images ont les classes des propriétés css ci-dessus!!!

ou alors essaie aussi avec un autre navigateur

Never Forget that you are the best

JRelland

8 mai 2017 à 10:39:29

Bonjour, je connais ces sites là mais il y en a certainement d'autres :

http://www.bootply.com/new

http://www.layoutit.com/

https://bootstrapstudio.io/

Bonjour, après une très courte lecture, http://www.layoutit.com/build m'apparaît le plus intuitif ?

Cordialement - Best Regards - 再见. José Relland

rolandabanda

9 mai 2017 à 9:47:11

cool merci #JRELLAND c'est une autre façon d'aller plus vite aussi dans la conception des sites avec bootstrap

Never Forget that you are the best

doctore57870

10 mai 2017 à 8:41:46 - Message modéré pour le motif suivant : Les insultes ne sont pas tolérées

Jean-Yff

10 mai 2017 à 23:42:31

Bonjour,

Les trois sites cités au-dessus ils sont payant ou gratuits?

Jean-Yff

rolandabanda

11 mai 2017 à 11:46:54

ces sites gratuits

Never Forget that you are the best

campbelkra

11 mai 2017 à 17:26:35

moi je suis nouveau et je veux apprendre pas quoi je commence

safouin

11 mai 2017 à 17:38:52

Je suis un débutant en codage

Je cherche un code html pouvant me permettre , lorsque je clique sur le bouton Enregistrer non seulement l'enregistrement passe mais que le bouton se transforme en bouton modifier afin de faire la modif

Jean-Yff

11 mai 2017 à 19:55:55

@rolandabanda Merci mais le 3 semble un peu cher quand même, bootstrap 4 arrivera bientôt donc il n'y a pas le feu.

@campbelcra Perso j'ai commencé par html5 et css3 de Mathieu Nebra, le cours est bien ficelé et pose bien des bases solides pour la suite.

Jean-Yff

Marishard

11 mai 2017 à 21:44:40 - Message modéré pour le motif suivant : Message complètement hors sujet

KOTO DIOULDE

rolandabanda

12 mai 2017 à 13:29:09

commence par le cours "Comprendre le web" apres HTML/CSS3

Never Forget that you are the best

VoiDoS

15 mai 2017 à 13:22:32

Bonjour,

j'ai debuté " prenez en main bootstrap ", et ai adapté les classes css depreciées aux actuelles( v4.0.0-alpha.6 ) pour suivre "Les premiers pas".

Mais inevitablement des le premier quiz, ma version ne colle pas à celle du cour...

Alors que d' apres bootstrap :

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Alors quelques question me viennent..

Ai- je mal compris la question ?
Serait ce possible de mettre à jours ? ( et d' eventuellement corriger la note si j'ai correct ? )
Dois je m' attendre à d' autre surprise en poursuivant les exercices ?

* Et je n' ai pas trouvé d' équivalent à la classe " visible-*-* " (qui n' existe pas dans mon css), suis je passé à coté ou dois je utiliser une combinaison des classes " hidden-*-* " ?

( ex : pour arriver à un " visible-md " rien de mieux que " hidden-sm-down hidden-lg-up " ?)

-
Edité par VoiDoS 15 mai 2017 à 13:34:14

rolandabanda

15 mai 2017 à 14:56:40

le cours prenez en main bootstrap est sur la version de bootstrap 3 qui prend en compte 4 devices or Bootstrap v4 alpha a ajouté une autre varieté de device les plus petits inférieurs à 576px

Never Forget that you are the best

VoiDoS

15 mai 2017 à 16:42:25

Merci pour ton indication,

donc faute à mon ide qui me charge par default bootstrap 4 :euh:

Au cas où d'autres tomberai dans ce cas, la page de migration m' à confirmé l'utilisation des classes " hidden ".

Cependant, je suis intrigué par deux dates..

jeudi 9 mars 2017 -> Date de mise à jours du cours
26 Juin 2014 -> Date de sortie de la version 3.2 depuis laquelle la classe " visible-md " est depreciée

ça nous fait quand même trois ans (à trois mois pres..) et quelques versions d' ecart.

Du coup, bien que je puisse repondre sans trop me tromper à deux de mes questions, la seconde reste d' actualité (

Serait ce possible de mettre à jours ? ( et d' eventuellement corriger la note si j'ai correct ? ))

Ou tout au moins indiquer dans le titre du cours la version qu' il concerne ? ( ce qui pourrai avertir les inattentif tel que moi )

-
Edité par VoiDoS 15 mai 2017 à 16:47:47

SlawTech

16 mai 2017 à 9:56:07

Tu peux contester ta note auprès du service client openclassroom en envoyant un mail à leur adresse de contact (je l'ai pas en tête). Si ta demande est acceptée, il "ré-ouvriront" simplement ton exercice et tu pourra le refaire (pense à sauvegarder les bonnes réponses quelque part ;))

-
Edité par SlawTech 16 mai 2017 à 9:57:23

EmilienBe

16 mai 2017 à 16:50:52

Bonjour à tous !

Je fais un site internet à l'aide de bootstrap et je suis à la fin. Je viens de me rendre compte que mon carrousel ne s'affiche pas du tout sur Firefox et internet Exploreur, mais sur chrome il est niquel ... Aidez moi s'il vous plaît !

Voici mon code :

<header id="myCarousel" class="carousel slide">

        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">

                <div class="fill" style="background-image:url('img/banniere5.jpg');"></div>
                <div class="carousel-caption">
                    <h1 class="titre">Les Vadrouilleuses</h1>
                </div>
            </div>
            <div class="item">

                <div class="fill" style="background-image:url('img/banniere3.jpg');"></div>
                <div class="carousel-caption">
                    <h1 class="titre">Les Vadrouilleuses</h1>
                </div>
            </div>
            <div class="item">

                <div class="fill" style="background-image:url('img/banniere4.jpg');"></div>
                <div class="carousel-caption">
                    <h1 class="titre">Les Vadrouilleuses</h1>
                </div>
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </header>

VoiDoS

16 mai 2017 à 21:21:57

ok, merci Kingwals, mais tant pis pour la note, c'serait plus une suggestion qu' une réclamation de mettre la version dans la question

J' n' ai pas utilisé de carousel bootstrap encore, mais tes div sont vide Emilien ?

as tu tenté de leurs imposé une hauteur ou de mettre une image plutot qu 'un background ?

<div id="jAiUnBackgroud" style="height: tailleImage px;backround: url("");">
<div>

edit : apres essai on vois les image en fixant une hauteur à ta classe "fill", mais peut être quelque chose à faire en js...

Ici ils mettent les img en "dur", ça permet de "mieux" gerer les dimenssions (puis d' y mettre un text alternatif si l' image n'est pas dispo

-
Edité par VoiDoS 16 mai 2017 à 22:02:26

Jean-Yff

18 mai 2017 à 16:01:54

Bonjour,

J'en suis arrivé à "fenêtre modale" sur fond gris, je n'ai pas le fond gris. Merci pour vos idées.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>" fenetre modale"</title>
    <link href="assets/../../css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { padding-top: 20px; }
    </style>
  </head>
  <body>
    <div class="container">      
      <button data-toggle="modal" href="#infos" class="btn btn-primary">Informations</button>
      <div class="modal" id="infos">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Plus d'informations</h4>
            </div>
            <div class="modal-body">
              Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés...
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="assets/../../js/jquery.js"></script>
    <script src="assets/../../js/bootstrap.min.js"></script>
  </body>
</html>

-
Edité par Jean-Yff 18 mai 2017 à 16:11:38

Jean-Yff

lunita13

18 mai 2017 à 17:59:47

je ne sais pas du tt si cela t'aideras car je ne suis pas bootstrap en ce moment mais est-ce que tu as essayé, à tous hasard, dans les balises style de mettre:body{ background-color:#6C6A6A;} par exemple.

Jean-Yff

18 mai 2017 à 20:08:07

RE bonjour,

résolu, je n'avais pas la bonne version merci à ceux qui m'ont lu et répondu.

-
Edité par Jean-Yff 18 mai 2017 à 20:10:24

Jean-Yff

Delgesu

19 mai 2017 à 17:06:17

Je ne sais pas si le concepteur du cours passe encore ici, mais s'il voit ceci: FÉLICITATIONS ! J'utilisais Bootstrap depuis quelques temps, et le cours m'a présenté l'outil sous une toute autre dimension. Notamment une utilisation fine dans le dynamisme. ça me confirme ce que j'avais lu ailleurs: Bootstrap est plus que "cosmétique" - c'est une manière de restructurer le DOM en fait.

Edit:

Intégrateur est un vrai métier. Je peine avec l'exo 2. La photo en bas à droite (en mode ordinateur) déborde vers le bas, et en mode téléphone les boutons du bas ne prennent pas la taille voulue, mais la taille tablette !!

Voici le lien du GIST si quelqu'un veut jeter un oeil:

https://gist.github.com/Delgesu2/4a4628c8efb17d76ba596f9cb1d6dc30#file-index-html

Merci