Laissez-moi d'abord vous montrer l'idée de cette image : Image (1) Sur cette image, nous voyons que dans l'écran md/lg, la barre de progression est située sous l'image et le texte est sur le côté droit de celle-ci.
Dans l'image (2), sur les petites tailles d'écran, le texte vient en deuxième position et la barre de progression en dernière :
Ce que j'essaie de faire, c'est ce code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon cv - </title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!--main container-->
<header>
<h1>Bentouhami Faisal</h1>
</header>
<!-- Menu Navbar-->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<a class="navbar-brand" href="index.html">Mon Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="formation.html">Formations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="exprience.html">Expérience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!--end Navbar-->
<!--header container-->
<div class="container">
<div class="row row-cols-auto">
<!-- Picture -->
<div class="col-sm-12 col-md-3">
<img src="images/mon_cv_photo.jpg" alt="Photo de Portfolio" class="rounded-circle">
</div>
<div class="col-sm-8">
<h2 class="intro-text">
<p><b> Développeur Full Stack</b></h2></p>
<p class="intro-text">
36 ans <br> tant que développeur Full Stack, je possède une expertise complète dans
la
conception, le développement et la maintenance d'applications web. <br> Avec une solide
formation en informatique de gestion et une passion pour la programmation, je suis
capable
de
gérer tous les aspects d'un projet, tant sur le plan front-end que back-end.
Grâce à ma maîtrise des langages de programmation tels que HTML, CSS, JavaScript, ainsi
que des frameworks populaires tels que React et Angular, je peux créer des interfaces
utilisateur attrayantes et réactives.<br>
En tant que Full Stack développeur, je suis également à l'aise avec les technologies de
développement back-end telles que Node.js et Python, ce qui me permet de créer des API
performantes et de mettre en place des architectures logicielles robustes. <br>Je suis
également
familier avec les concepts de déploiement et d'hébergement, et je peux travailler avec
des
outils tels que Docker et AWS pour assurer une mise en production fluide et sécurisée.
<br>En résumé, en tant que développeur Full Stack, je suis en mesure de concevoir,
développer et
optimiser des applications web complètes, offrant une expérience utilisateur
exceptionnelle
et
des fonctionnalités performantes. Je suis passionné par mon métier et je m'efforce
constamment
de rester à jour avec les dernières tendances et les meilleures pratiques du
développement
web.
</p>
</div>
</div>
<!-- Progression bars -->
<div class="row">
</div>
<div class="col-3">
<div class="row">
<div class="col-3">
<img src="images/java.png" alt="Java" class="img-fluid">
</div>
<div class="col-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
</div>
</div>
<!-- Compétence : C# -->
<div class="row">
<div class="col-3">
<img src="images/c-sharp.png" alt="C#" class="img-fluid">
</div>
<div class="col-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100">70%</div>
</div>
</div>
</div>
<!-- Compétence : HTML -->
<div class="row">
<div class="col-3">
<img src="images/html-5.png" alt="HTML" class="img-fluid">
</div>
<div class="col-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90"
aria-valuemin="0" aria-valuemax="100">90%</div>
</div>
</div>
</div>
<!-- Compétence : CSS -->
<div class="row">
<div class="col-3">
<img src="images/css-3.png" alt="CSS" class="img-fluid">
</div>
<div class="col-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85"
aria-valuemin="0" aria-valuemax="100">85%</div>
</div>
</div>
</div>
<!-- Compétence : Bootstrap -->
<div class="row">
<div class="col-3">
<img src="images/bootstrap.png" alt="Bootstrap" class="img-fluid">
</div>
<div class="col-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
</div>
</div>
<!-- Compétence : Php -->
<div class="row">
<div class="col-3">
<img src="images/php.png" alt="Php" class="img-fluid">
</div>
<div class="col-9">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
</script>
<!--end 1st container-->
</body>
</html>
Peignez en rouge là où la barre de progression devrait être.
Le problème c'est que lorsque je suis sur grand écran le texte est trop gros et cela crée un vide blanc entre l'image et la barre de progression poussant la ligne de progression !
Jetez un oeil à cet écran :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Une façon d'implémenter ce "système de grille utilisant Bootstrap" (en fait, ce n'est pas exactement un système de grille, mais un système flexible) est de placer la barre de progression deux fois dans le code (une fois après l'image et une fois après le texte) et affichez-les/masquez à l'aide des classes utilitaires d'affichage (documentation v4, documentation v5).
Il devrait y avoir
.d-none.d-md-block，文字下面的应该有.d-block.d-md-nonecode> sous l'image.Si vous souhaitez qu'ils s'échangent à différents points d'arrêt, changez
md更改为sm或lg.Si vous appliquez l'affichage par défaut de cet élément à "flex", utilisez la classe
*-block替换为*-flex.Voyez-le en action ici.
Vous pouvez également copier le texte (au lieu de la barre de progression) et appliquer la même technique.
Remarque :
Le principal inconvénient de cette technique est qu'elle rend l'application/suppression d'écouteurs d'événements aux éléments répétés ou à leurs descendants trop complexe.
Cependant, certains frameworks frontaux (Vue, React) fournissent des composants « portail » intégrés qui sont essentiellement capables de restituer leur contenu dans l'élément cible et d'être placés à différents emplacements dans le DOM en fonction de la logique du contrôleur sans perdre d'événements (le les éléments ne sont pas détruits, mais déplacés). Autant que je sache, Angular ne fournit pas cette fonctionnalité prête à l'emploi. Il existe peut-être un plugin pour cela.
Cette mise en page peut également être réalisée en utilisant du CSS personnalisé si les trois éléments sont des enfants du même élément parent, en utilisant
display: grid并定义grid-template-区域（或grid-template-rows和grid-template-columns) Responsive sur l'élément parent. Mais cela signifie abandonner le système de grille Bootstrap du conteneur et devoir écrire votre propre CSS pour contrôler la largeur des colonnes de manière réactive.Il n'est pas clair d'après le croquis que vous avez réalisé si vous souhaitez que le texte puisse défiler sur mobile, alors que l'image est fixée en haut et la barre de progression est fixée en bas. Cela créera sans aucun doute une expérience utilisateur problématique. Une meilleure expérience utilisateur sur les appareils mobiles consiste à rendre la page entière défilable.
Marquage invalide (HTML) : Vous avez fermé le titre代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。
-
(ou vice versa) ; ne mettez pas plusieurs paragraphes dans le même élément
prématurément et vous n'avez pas fermé toutes les mises en pageAutres problèmes de balisage : n'utilisez pas
à l'intérieur d'un élément（反之亦然）；不要将多个段落放在同一个元素中，并避免使用
.row放置为另一个.row的直接子级（您应该将其包装在.col; , et évitez d'utiliser la balise
.row comme enfant direct d'un autre 🎜.row (vous devez l'envelopper dans 🎜.col ). Et assurez-vous que votre code passe la validation HMTL. 🎜 🎜 🎜 🎜 🎜J'ai corrigé tout ce qui est mentionné dans l'exemple fourni ci-dessus. 🎜; ne placez jamais