18010 sujets

Questions générales et questions de débutants

Bootstrap

Bonjour à tous,
Je souhaite que ces blocs, quand je réduis la fenêtre se mette les un en dessus des autres,
avec bootstrap.
Merci de m'éclairer



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Eshop essai</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap.css" />
</head>
<body>

<div id="conteneur" class="container text-center">

<div class="haut">
<div class="row">
<div class="col-3 fond_violet">
<div class="hautgauche">hautgauche</div>
</div>
<div class="col-3 offset-sm-1 fond_bleu">
<div class="millieuhaut">millieuhaut</div>
</div>
<div class="col-3 offset-sm-1 fond_rouge">
<div class="hautdroit">hautdroit</div>
</div>
</div>
</div>

<div class="bas">
<div class="row">
<div class="col-3 fond_violet">
<div class="basgauche">basgauche</div>
</div>
<div class="col-3 offset-sm-1 fond_bleu">
<div class="millieubas">millieubas</div>
</div>
<div class="col-3 offset-sm-1 fond_rouge">
<div class="basdroit">basdroit</div>
</div>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>





/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

body{
margin: 0 auto;

}

.fond_rouge{background: red;}
.fond_rose{background: pink;}
.fond_bleu{background: blue;}
.fond_orange{background: orange;}
.fond_lime{background: lime;}
.fond_violet{background: purple;}
.fond_bleu{background: blue;}
.fond_rouge{background: red;}
.fond_orange{background: orange;}
.fond_jaune{background: yellow ;}
.fond_bleu{background: blue;}
.fond_vert{background: green;}
.fond_gris{background: grey;}


#conteneur{
width: 100%;

}

.hautgauche{
height: 176px;

}


.basgauche{
height: 176px;
}

.bas{
margin-top: 30px;
}
Bonjour,
je vous invite à consulter cette page avant d'utiliser bootstrap.
Bootstrap est basé sur un système de grille en douze colonnes. Vous devez manipuler les colonnes pour un affichage sur smartphone, tablette et écran d'ordinateur.
Suivez ce petit tuto et vous parviendrez à déplacer vos div l'une en dessous de l'autre lorsque vous réduirez votre fenêtre.
Par rapport à ce que vous avez fait auparavant, il est inutile de mettre des margin négatives. Repartez de 0.
Dans cette exemple, les références sont sur trois colonnes si vous réduisez la fenêtre elles passent sur une seule colonne.
Attention vous appelez deux fois la feuille de style bootstrap dans votre html :

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap.css" />

Il faudra aussi appeler les js de bootstrap.
En espérant vous avoir aidé.
Bon courage
Sujet clos
Aller à