Sujet : [BootStrap] question niveau débutant
DébutPage précedente
1
Page suivantePage suivante
extan
MP
Niveau 8
13 août 2017 à 20:53:07
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
il doit être responsive, doit nécessairement s'afficher sur tout support donc j'ai fait ceci :
<!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 :)
Merci des futurs conseils!
MP
Niveau 8
14 août 2017 à 14:00:56
Un peu d'aide sportive
😢 merci.!
20_cent_2017
MP
Niveau 10
14 août 2017 à 17:13:13
Regarde svg ou canevas
DébutPage précedente
1
Page suivantePage suivante
Répondre
Sous-forums
Infos 0 connecté(s)