let first show you the idea in this picture: Picture (1) in this picture we see that the progress bars are under the picture in md/lg screens, and the text is on its right.
and in picture(2) the text gose second and the progress bars gose last in small screen size:
我try 做的是以下代码:
<!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>
在进度条应该显示的位置用红色表示.
问题是，当我在大屏幕上时，文本太大了，在图片和进度条之间创建了一个黑白，导致进度行被挤了起来！ 请看下面的屏幕: