Biar saya tunjukkan idea gambar ini dahulu: Gambar (1) Dalam gambar ini kita lihat bahawa dalam skrin md/lg, bar kemajuan terletak di bawah gambar dan teks berada di sebelah kanannya.
Dalam gambar (2), pada saiz skrin kecil, teks berada di tempat kedua dan bar kemajuan berada di tempat terakhir:
Apa yang saya cuba lakukan ialah kod ini:
<!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>
Cat merah di mana bar kemajuan sepatutnya.
Masalahnya ialah apabila saya berada dalam skrin besar, teks terlalu besar dan ini mewujudkan kekosongan putih antara gambar dan bar kemajuan menolak garis kemajuan!
Lihat skrin ini:
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Salah satu cara untuk melaksanakan "sistem grid menggunakan Bootstrap" ini (sebenarnya, ini bukan sistem grid, tetapi sistem flex) adalah dengan meletakkan bar kemajuan dua kali dalam kod (sekali selepas imej dan sekali selepas teks) dan tunjukkan/sembunyikannya menggunakan kelas utiliti paparan (v4 dokumentasi, v5 dokumentasi).
Perlu ada
.d-none.d-md-block，文字下面的应该有.d-block.d-md-nonekod> di bawah gambar.Jika anda mahu mereka bertukar pada titik putus yang berbeza, tukar
md更改为sm或lg.Jika anda menggunakan paparan lalai elemen ini untuk "flex", gunakan kelas
*-block替换为*-flex.Lihat ia beraksi di sini.
Sebagai alternatif, anda boleh menyalin teks (bukan bar kemajuan) dan menggunakan teknik yang sama.
Nota:
Kelemahan utama teknik ini ialah ia menjadikan pengaplikasian/penyingkiran pendengar acara kepada elemen berulang atau keturunannya terlalu rumit.
Walau bagaimanapun, beberapa rangka kerja bahagian hadapan (Vue, React) menyediakan komponen "portal" terbina dalam yang pada asasnya dapat memaparkan kandungannya dalam elemen sasaran dan diletakkan di lokasi yang berbeza dalam DOM berdasarkan logik pengawal tanpa kehilangan peristiwa ( The elemen tidak dimusnahkan, tetapi dipindahkan). Setakat yang saya tahu, Angular tidak menyediakan fungsi ini di luar kotak. Mungkin terdapat pemalam untuk ini, walaupun.
Reka letak ini juga boleh dicapai menggunakan CSS tersuai jika ketiga-tiga elemen adalah anak kepada elemen induk yang sama, menggunakan
display: grid并定义grid-template-区域（或grid-template-rows和grid-template-columns) Responsif pada elemen induk. Tetapi ini bermakna meninggalkan sistem grid Bootstrap bekas dan perlu menulis CSS anda sendiri untuk mengawal lebar lajur secara responsif.Tidak jelas daripada lakaran yang anda buat sama ada anda mahu teks boleh ditatal pada mudah alih, manakala imej ditetapkan di bahagian atas dan bar kemajuan ditetapkan di bahagian bawah. Ini sudah pasti akan mewujudkan pengalaman pengguna yang bermasalah. Pengalaman pengguna yang lebih baik pada peranti mudah alih ialah menjadikan keseluruhan halaman boleh ditatal.
Penanda tidak sah (HTML): Anda menutup tajuk代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。
-
(atau sebaliknya); jangan letakkan berbilang perenggan dalam elemen
lebih awal dan anda tidak menutup semua reka letakIsu markup lain: jangan gunakan
dalam elemen（反之亦然）；不要将多个段落放在同一个元素中，并避免使用
.row放置为另一个.row的直接子级（您应该将其包装在.colyang sama , dan elakkan menggunakan teg
.row sebagai anak langsung 🎜.row yang lain (anda harus membungkusnya dengan 🎜.col ). Dan pastikan kod anda melepasi pengesahan HMTL. 🎜 🎜 🎜 🎜 🎜Saya telah menetapkan semua yang dinyatakan dalam contoh yang disediakan di atas. 🎜; jangan sekali-kali meletakkan