Believemy logo purple
Connexion
Discussions

Sur l'utilisation de bootstrap

Image

Bonjour,

Louis Nicolas Voilà une simple question quel est la version de bootstrap utiliser dans le projet Météo API 

j'ai installer le CDN 4.1.3 mais je ne connait pas la version existe t'il une astuce pour connaitre la version

sa marche mais tout et décale j'ai changer les valeur col-md c'est compétement décaler sur la gauche

je réalise se projet avec VisualSCode.

Bonne journée.

4 réponses
Image
Louis-Nicolas Leuillet
Le 09/11/2022 à 19:10

Hello Didier.

La version utilisée est 4.1.3 : https://codepen.io/believemy/pen/MWYKVVx

Si tout est décalé, il y a peut-être un petit souci dans ton code ? Tu veux que je regarde ?

Image
Le 09/11/2022 à 21:44

Voici donc le code HTML & CSS

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-   
                q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
                 crossorigin="anonymous"></script>
                <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3
                /dist/umd/popper.min.js" integrity="sha384- 
                 ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"      
                  crossorigin="anonymous"></script>
<script    src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="style.css">
    <title>API / Meteo</title>
</head>
    <body>
        <div class="container">
  
            <div class="row justify-content-center">
          
            <div class="col-md-8">
            <!-- Titre -->
            <h1 class="text-center mt-5">Météo</h1>
            
            <!-- Ville / Temperature -->
            <div class="text-center">
              <span id="ville">paris</span>
              
              <div id="temperature">
                <span id="temperature_label">
                  xx.x
                </span> °C
              </div>
            </div>
          </div>
          
        </div>
        
        <div class="row justify-content-center">  
          <div class="col-md-8 text-center">
            <!-- Changer de ville -->
            <div id="changer" class="mt-2 text-center p-3 text-white
                     font-weight-bold text-uppercase d-inline-block">
              Changer de ville
            </div>
          </div>
        </div>
    </div>
      <script src="script.js"></script>
    </body>
    </html>
Image
Le 09/11/2022 à 21:45

& CSS

html, body {
    background: #2980B9;
    background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
    background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
    min-width: 400px;
  }
  
  #ville {
    text-transform: capitalize;
  }
  
  #temperature {
    font-size: 4em;
  }
  
  #changer {
    background: rgba(178, 223, 251, .3);
    cursor: pointer;
  }
Image
Louis-Nicolas Leuillet
Le 10/11/2022 à 08:25

Pour moi tout s'affiche très bien https://codepen.io/believemy/pen/jOKBPRo
Peut-être que je loupe quelque chose ?

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 9 novembre 2022 15:24
Dernière activité le 9 novembre 2022 15:24
Cours : Le Programme Rocket