社群 學習 工具庫 休閒
搜尋
繁体中文
如何使用 Bootstrap Grid 系統修復大螢幕上圖片和進度條之間的空白？
P粉409742142
P粉409742142 2023-09-14 10:56:03
0
1
619

先向大家展示一下這張圖的想法： 圖(1) 在這張圖中我們看到，在md/lg畫面中，進度條位於圖片下方，文字位於其右側。

在圖片(2)中，在小螢幕尺寸下，文字排在第二位，進度條排在最後：

我試圖要做的是這段程式碼：

<!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>

在進度條應在的位置塗上紅色。

問題是當我在大螢幕中時，文字太大，這會在圖片和進度條之間創建白色白色的情況下推動進度行！ 看看這個畫面：

P粉409742142
P粉409742142

全部回覆(1)
P粉518799557
P粉5187995572023-09-15 00:28:55 1樓

實現這個「使用Bootstrap 的網格系統」的一種方法（實際上，這並不完全是一個網格系統，而是一個彈性系統）是在程式碼中放置進度條兩次（一次在圖片之後和文字之後一次）並使用顯示實用程式類別顯示/隱藏它們（v4 文件、v5 文件）。

圖片下面的應該有.d-none.d-md-block，文字下面的應該有.d-block.d-md-none程式碼>.
如果您希望它們在不同的斷點處交換，請將 md 變更為 sm 或 lg。
如果您套用此元素的預設顯示為“flex”，請將 *-block 替換為 *-flex 類別。

在此處查看其工作情況。

或者，您可以複製文字（而不是進度條）並應用相同的技術。

註解：

  • 此技術的主要缺點是它使向重複元素或其後代套用/刪除事件偵聽器變得過於複雜。
    然而，一些前端框架（Vue、React）提供內建的「門戶」元件，這些元件本質上能夠在目標元素內渲染其內容，並根據控制器邏輯放置在DOM 中的不同位置，而不會丟失事件（元素沒有被破壞，而是被移動）。據我所知，Angular 並沒有提供開箱即用的功能。不過，可能有一個插件。

  • 如果這三個元素都是相同父元素的子元素，則使用自訂CSS 也可以實現此佈局，在父元素上使用display: grid 並定義grid -template-區域（或grid-template-rows和grid-template-columns）響應式。但這意味著放棄該容器的 Bootstrap 網格系統，並且必須編寫自己的 CSS 來回應地控制列寬。

  • 從您製作的草圖中並不清楚您是否希望文字在行動裝置上可捲動，而圖片固定頂部且進度條固定底部。這無疑會產生有問題的使用者體驗。行動裝置上更好的使用者體驗是讓整個頁面可捲動。

  • 您的標記 (HTML) 無效：您過早關閉了標題的

    #，而且您也沒有關閉所有佈局
    代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。

  • #其他標記問題：請勿在 元素內使用

    （反之亦然）；不要將多個段落放在同一個

     元素中，並避免使用
     標籤；切勿將.row 放置為另一個.row 的直接子級（您應該將其包裝在.col 中）。並確保您的程式碼通過 HMTL 驗證。

    • 我已經修復了上面提供的範例中提到的所有內容。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板