- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
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:
P粉5187995572023-09-15 00:28:55
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 Isu markup lain: jangan gunakan lebih awal dan anda tidak menutup semua reka letak
（反之亦然）；不要将多个段落放在同一个 元素中，并避免使用 .row 放置为另一个 .row 的直接子级（您应该将其包装在 .col
yang sama , dan elakkan menggunakan teg
; jangan sekali-kali meletakkan balas0