Comment combler l'écart entre l'image et la barre de progression sur un grand écran à l'aide du système Bootstrap Grid ?-Questions et réponses sur le réseau chinois PHP

Comment combler l'écart entre l'image et la barre de progression sur un grand écran à l'aide du système Bootstrap Grid ?

P粉409742142 2023-09-14 10:56:03 voir 876

CSS3

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 :

Your Answer

soumettre

1 réponse

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
prématurément et vous n'avez pas fermé toutes les mises en page 代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。
Autres problèmes de balisage : n'utilisez pas 元素内使用（反之亦然）；不要将多个段落放在同一个元素中，并避免使用标签；切勿将 .row 放置为另一个 .row 的直接子级（您应该将其包装在 .col à l'intérieur d'un élément


 (ou vice versa) ; ne mettez pas plusieurs paragraphes dans le même élément 
 ; , et évitez d'utiliser la balise 
 ; ne placez jamais .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. 🎜

2023-09-15 00:28:55

soumettre