Salut à tous !
Je débute en Bootstrap, pour un exo pour une école je dois refaire le logo Space Invaders;
https://activitejeuxvideo.wikispaces.com/file/view/space_invader.png/258867366/space_invader.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sapce Invaders</title>
</head>
<div class="container">
<div class="row fluide">
<div class="col-xs-1 col-xs-push-2 ligne3"></div>
<div class="col-xs-1 col-xs-push-8 ligne3"></div>
</div>
<div class="row ">
<div class="col-xs-1 col-xs-push-3 ligne3"></div>
<div class="col-xs-1 col-xs-push-7 ligne3"></div>
</div>
<div class="row ">
<div class="col-xs-8 col-xs-push-2 ligne3"></div>
</div>
<div class="row ">
<div class="col-xs-2 col-xs-push-1 ligne3"></div>
<div class="col-xs-4 col-xs-push-2 ligne3"></div>
<div class="col-xs-2 col-xs-push-3 ligne3"></div>
</div>
<div class="row">
<div class="col-xs-12 ligne3"></div>
</div>
<div class="row">
<div class="col-xs-1 ligne3"></div>
<div class="col-xs-8 col-xs-push-1 ligne3"></div>
<div class="col-xs-1 col-xs-push-2 ligne3"></div>
</div>
<div class="row">
<div class="col-xs-1 ligne3"></div>
<div class="col-xs-1 col-xs-push-1 ligne3"></div>
<div class="col-xs-1 col-xs-push-7 ligne3"></div>
<div class="col-xs-1 col-xs-push-8 ligne3"></div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-push-3 ligne3"></div>
<div class="col-xs-2 col-xs-push-5 ligne3"></div>
</div>
</div>
</html>
Partie CSS
.fluide{
margin-top: 15px;
}
.ligne3{
background-color: firebrick;
height: 97.5px;
/*width: 97.5px;*/
}
Sur écran large cela s'ffiche bien mais sur un smartphone ou tablette cela se compresse, l'image est toujours reconnaissable mais bon... est-ce possible de mieux faire? c'est à dire que les proportions de l'image reste la même quel que soit le mode d'affchage? je dois réussir en utilisant uniquement Bootstrap
Ils sont un peu fou dans ton école..
Tout ça ne te servira strictement à rien. C'est d'ailleurs la première fois que j'entends un tel exercice.
Par ailleurs bootstrap est passé en version 4 bêta, flexbox.
La version 3 et la grille que tu utilises seront délaissés.
Ah oui! tu veux dire que la grille va devenir obsolète?
Après je pense que l'exo cherche à voir si on pige bien la grille et le "placement" de nos différentes div
Sinon tu penses que je peux mieux faire pour le responsive de mon logo?
svg
l'école d'enculé
Le 15 août 2017 à 23:51:43 O[m]egatypez a écrit :
Ils sont un peu fou dans ton école..Tout ça ne te servira strictement à rien. C'est d'ailleurs la première fois que j'entends un tel exercice.
Par ailleurs bootstrap est passé en version 4 bêta, flexbox.
La version 3 et la grille que tu utilises seront délaissés.
Oai après ça reste un système de grille, c'est juste des media queries, donc rien n'empêche de tourner sur la version 3 c'est juste un fichier css
utilise col-md-offset si tu veux pousser