Bootstrap [Question niveau débutant) par extan - page 1

Salut à tous !
Je débute en Bootstrap, pour un exo je dois refaire le logo Space Invaders:

https://activitejeuxvideo.wikispaces.com/file/view/space_invader.png/258867366/space_invader.png

Voilou mon code :

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

Et la 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! et tips !

extan

15 août 2017 à 18:26:51

18 août 2017 à 20:14:21

Un peu d'aide ! SVP merci

25 août 2017 à 22:54:04

Personne ? :ange:

Lamecarlate

25 août 2017 à 23:24:55

Bonjour,

il est un peu surprenant, ton exercice. Exiger Bootstrap pour faire de la reproduction d'image… disons que l'outil n'est pas vraiment adapté.

Tu utilises la grille de Bootstrap, qui est explicitement en pourcentages et donc variable. Tu peux éventuellement cumuler des ".col-*" pour changer le nombre de colonnes suivant les breakpoints (xs, sm, md, lg). Plus d'infos ici : https://getbootstrap.com/docs/3.3/css/#grid-example-mixed-complete

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Bootstrap [Question niveau débutant)

Bootstrap [Question niveau débutant)

Supprimer

Modérer

Signaler le message aux modérateurs