Se connecter

Informatique

Création de sites web

Sujet : [BootStrap] question niveau débutant
1
extan
Niveau 8
14 août 2017 à 20:46:53

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 :)

Pseudo supprimé
Niveau 10
15 août 2017 à 23:51:43

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
.

extan
Niveau 8
16 août 2017 à 18:15:50

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?

20_cent_2017
Niveau 10
16 août 2017 à 19:36:27

svg

lopezmaxime
Niveau 6
22 août 2017 à 18:41:47

l'école d'enculé :rire:

lopezmaxime
Niveau 6
22 août 2017 à 18:42:30

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 https://image.noelshack.com/fichiers/2017/21/1495823618-risitas596.png

lopezmaxime
Niveau 6
22 août 2017 à 18:46:05

utilise col-md-offset si tu veux pousser https://image.noelshack.com/fichiers/2017/21/1495823618-risitas596.png

1
Sujet : [BootStrap] question niveau débutant
   Retour haut de page
Consulter la version web de cette page