disposition des éléments avec Bootstrap

problème d'affichage

10 juin 2019 à 1:02:25

Bonjour,

je suis actuellement le cours "prenez en main Bootstrap du prof Maurice Chavelli.

le problème est que quand je teste le code du cours j'ai pas le résultat que je devais avoir normalement.

Voici mon code Html

<!DOCTYPE html>
<html>
<head>
	<title>projet yebara</title>
	<link rel="stylesheet" type="text/css" href="css1.css">

 </head>
<body>
	<div class="container"></div>
		
	<div class="container">
  <div class="row">
    <div class="col-md-12">Premier niveau avec 12 colonnes
    <div class="row">
      <div class="col-md-8">Second niveau avec 8 colonnes
      <div class="row">
        <div class="col-md-4">Troisième niveau avec 4 colonnes</div>
        <div class="col-md-6 col-md-offset-2">Troisième niveau avec 6 colonnes
        <div class="row">
          <div class="col-md-3 col-md-offset-1">Quatrième niveau avec 3 colonnes</div>
          <div class="col-md-5 col-md-offset-1">Quatrième niveau avec 5 colonnes</div>
        </div>
        </div>
      </div>
      </div>
      <div class="col-md-4">Second niveau avec 4 colonnes</div>
    </div>
  </div>
</div>
</body>
</html>

et le css

body{
	padding-top: 10%;
}

[class*="col-"], footer{
	background-color: lightgray;
	border: 2px solid black;
	border-radius: 6px;
	text-align: center;
	line-height: 15px;
}
.container{
	padding-right: 15px;
	padding-left: 15px;
	margin-left: auto;
	margin-right: auto;
}

@media(min-width: 768px)
{
	.container{
		width: 750px;
	}
}

@media(min-width: 992px)
{
	.container{
		width: 	970px;
	}
}

@media(min-width: 1200px)
{
	.container{
		width: 1170px;
	}
}

voilà ce que j'obtiens

Merci bien de m'aider.

-
Edité par steph_ntic 11 juin 2019 à 15:24:53

(^_^)

Lamecarlate

10 juin 2019 à 9:39:42

Bonjour,

Manque de recherche

La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.

Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Bootstrap)

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

steph_ntic

10 juin 2019 à 23:23:38

Merci pour la réponse je veillerai a ça dans mes prochain messages

(^_^)

Lamecarlate

11 juin 2019 à 7:52:45

Ce que j'ai écrit est valable pour ce sujet, en plus des prochains.

Et sinon, le problème est probablement que Bootstrap n'est pas chargé dans ton code, il n'y a aucune ligne qui appelle le CSS de Bootstrap. (et tu as deux fois le doctype)

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

steph_ntic

11 juin 2019 à 15:13:42

J'ai fait la remarque pour le doctype, cependant pour le chargement de Bootstrap je pense que j'aurai quelque petits souci vue que Bootstra est a sa version4.3.1 et le cours est a la version 3 si je ne me trempe pas.

(^_^)

Stéphane Gabillon

11 juin 2019 à 15:22:49

Bonjour,

En haut du site officiel, tu peux changer la version et récupérer la version 3.

Et sinon, tu peux lire la doc mais je ne pense pas qu'il y ait grande différence entre les deux (après je me trompe peut être).

L'humain a tord, la machine a toujours raison

steph_ntic

11 juin 2019 à 15:30:05

Je viens de télécharger et d'installer Bootstrap la version 4.3.1 afin de travailler en local

et voici le code Html avec avec le lien du Css Bootstrap

<!DOCTYPE html>
<html>
<head>
	<title>projet yebara</title>
	<link rel="stylesheet" type="text/css" href="css1.css">
	<link rel="stylesheet" type="text/css" href="css_js\css\bootstrap.css">
 </head>
<body>
	<div class="container"></div>
		
	<div class="container">
  <div class="row">
    <div class="col-md-12">Premier niveau avec 12 colonnes
    <div class="row">
      <div class="col-md-8">Second niveau avec 8 colonnes
      <div class="row">
        <div class="col-md-4">Troisième niveau avec 4 colonnes</div>
        <div class="col-md-6 col-md-offset-2">Troisième niveau avec 6 colonnes
        <div class="row">
          <div class="col-md-3 col-md-offset-1">Quatrième niveau avec 3 colonnes</div>
          <div class="col-md-5 col-md-offset-1">Quatrième niveau avec 5 colonnes</div>
        </div>
        </div>
      </div>
      </div>
      <div class="col-md-4">Second niveau avec 4 colonnes</div>
    </div>
  </div>
</div>
</body>
</html>

et j'ai mon rendu qui est là

je pense que ça fonction mais j'ai peur d'être bloqué pour cause de version.

Merci bien de me donner les disposition(réglage) à prendre pour cette nouvelle version

(^_^)

steph_ntic

12 juin 2019 à 20:26:38

Bonsoir à tous, désolé de réveillé le sujet mais ça aurait faire un peu trop de topic pour un même problème.

voilà un peu un projet sur lequel je travail depuis un bon moment.

j'ai un souci au niveau de la disposition des éléments comme vous le voyez sur la figure.

voici le code html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Boguhe ange stephane">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>YeBara</title>

    <!-- Bootstrap core CSS -->
    <link href="css_jsBootstrap\dist\css\bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <link rel="stylesheet" type="text/css" href="yebara1.css">
    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">
    
  
</head>
  
<body>
 

<div class ="container" style="margin-top : 80px">
  <div class="starter-template">
    <h1><u style="color: #00204a;">MES MATIÈRES <u></h1>
    <!--
    <div class="alert alert-warning alert-danger fade show" role="alert">
            <strong>Attention!</strong> vous serez rediriger à la page précedente
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      -->
    </div>
     <nav class="navbar navbar-expand-md navbar-dark bg-secondary fixed-top">
        <a class="navbar-brand" href="https://www.google.ci/">YeBara</a>
        <button class="navbar-toggler bg-company-secondary" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Acceuil<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Recherche" aria-label="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Recherche</button>
    </form>
  </div>
</nav>

  <div class="row">
  <div class="col-md-3">
    <div class="card border-primary mb-3" style="max-width: 18rem;">
      <div class="card-body">
        <h5 class="card-header bg-primary" style="text-align: center;">MATHÉMATIQUES</h5>
        <p class="card-text" style="font-size: 20px;">Vous trouverez ici tous les cours; exercices; et sujet d'examen</p>
        <a href="#" class="btn border-primary">Acceder maintenant !</a>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card border-secondary mb-3" style="max-width: 18rem;">
      <div class="card-body">
        <h5 class="card-header" style="text-align: center;">SVT</h5>
        <p class="card-text" style="font-size: 20px;">Vous trouverez ici tous les cours; exercices; et sujet d'examen</p>
        <a href="#" class="btn border-secondary">Acceder maintenant !</a>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card border-danger mb-3" style="max-width: 18rem;">
      <div class="card-body">
        <h5 class="card-header bg-danger" style="text-align: center;">PHYSIQUE</h5>
        <p class="card-text" style="font-size: 20px;">Vous trouverez ici tous les cours; exercices; et sujet d'examen</p>
        <a href="#" class="btn border-danger">Acceder maintenant !</a>
      </div>
    </div>
  </div> 
  <aside class="col-md-3">
    <div class="card" style="width: 15rem;">
  <img src="Australian_infantry_small_box_respirators_Ypres_1917.jpg" class="card-img-top" alt="Infanterie d'autralie">
  <div class="card-body">
    <h5 class="card-title">PREMIÈRE GUERRE MONDIAL</h5>
    <p class="card-text">La Première Guerre mondiale (surnommée la Grande Guerre) est un conflit majeur qui eut lieu...</p>
    <a href="https://fr.vikidia.org/wiki/Premi%C3%A8re_Guerre_mondiale" class="btn btn-primary" target="blank">En savoir plus</a>
  </div>
  </div>
  </aside>
  <div class="col-md-3">
    <div class="card border-warning mb-3" style="max-width: 18rem;">
      <div class="card-body">
        <h5 class="card-header bg-warning" style="text-align: center;">H-G</h5>
        <p class="card-text" style="font-size: 20px;">Vous trouverez ici tous les cours; exercices; et sujet d'examen</p>
        <a href="#" class="btn border-warning">Acceder maintenant !</a>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card border-info mb-3" style="max-width: 18rem;">
      <div class="card-body">
        <h5 class="card-header bg-info" style="text-align: center;">FRANCAIS</h5>
        <p class="card-text" style="font-size: 20px;">Vous trouverez ici tous les cours; exercices; et sujet d'examen</p>
        <a href="#" class="btn border-info">Acceder maintenant !</a>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card border-success mb-3" style="max-width: 18rem;">
      <div class="card-body">
        <h5 class="card-header bg-success" style="text-align: center;">PHILOSOPHIE</h5>
        <p class="card-text" style="font-size: 20px;">Vous trouverez ici tous les cours; exercices; et sujet d'examen</p>
        <a href="#" class="btn border-success">Acceder maintenant !</a>
      </div>
    </div>
  </div>
</div>
   
<div>
<!--
    <a class="btn btn-outline-danger" href="http://www.google.com" target="blank">Page précedente</a>
    <a class="btn btn-outline-danger" href="http://www.google.com" target="blank">Page suivante</a> 
  </div>
-->
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script scr="css_jsBootstrap\dist\js\popper.min.js"></script>
<script src="css_jsBootstrap\dist\js\bootstrap.bundle.min.js"></script>


</body>
</html>

je suppose que c'est à cause de margin bottom, mais même si je l'ai enlève ça fait déjà un affichage un peu boff et j'aime pas vraiment et de toute façon le row prend la longueur de mon aside qui est considérablement long.

j'aimerai donc que les autres élément se positionne juste à coté de mon aside, si vous avez donc des solutions.

Merci bien

-
Edité par steph_ntic 12 juin 2019 à 20:45:00

(^_^)