असल में मैं छवि में दिखाए गए आउटपुट को प्राप्त करने की कोशिश कर रहा हूं, लेकिन टैग में सही संपादन नहीं ढूंढ पा रहा हूं।

To be achieved

अब तक मैंने अधिकांश वेबपेज बनाने की कोशिश की है और इस वर्तमान स्थिति को हासिल किया है ताकि आप पैनल शीर्षक देख सकें और पैनल संरेखण पिछली तस्वीर के समान नहीं है।

present situation

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>

<!-- CREATE THE REPORT LAYOUT ACCORDING TO GIVEN SPECIFICATIONS  -->
<!-- HINT :- Use PANEL,bootstrap alerts, List and UL concepts -->
<div class="container">
    <h2>Automatic tasks report</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
        <h2>Execution Log Information</h2>
        <div class="panel-body">
            <ul class="list group">
                <li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
                <li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
                <li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
                <li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
            </ul>
        </div>
        <div class="panel-footer">End of execution log information</div>
    </div>
</div>

</body>
</html>
1
user14237108 21 अप्रैल 2021, 17:09

2 जवाब

सबसे बढ़िया उत्तर

मुझे लगता है कि आपको केवल पैनल-बॉडी डिवीजन में निष्पादन लॉग जानकारी संलग्न करने की आवश्यकता है ताकि इसमें समान अंतर हो, और फिर बाईं ओर ul के लिए पैडिंग समायोजित करें, नीचे नया पैनल-बॉडी, और h2 टैग का निचला मार्जिन, सभी 0 तक।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <h2>Automatic tasks report</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
        <div class="panel-body" style="padding-bottom: 0;">
            <h2 style="margin-bottom: 0;">Execution Log Information</h2>
        </div>
        
        <div class="panel-body">
            <ul class="list group" style="padding-left: 0;">
                <li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
                <li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
                <li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
                <li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
            </ul>
        </div>
        <div class="panel-footer">End of execution log information</div>
    </div>
</div>

संदर्भ के लिए, आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं, इसलिए टैग शायद बूटस्ट्रैप -4 के बजाय ट्विटर-बूटस्ट्रैप -3 होना चाहिए।

0
Rich DeBourke 21 अप्रैल 2021, 17:37

अपने प्रश्नों को हल करें। कृपया मेरे कोड लाइन को लाइन से फॉलो करें और अंत में आपको अपना उत्तर मिल जाएगा।

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>

<!-- CREATE THE REPORT LAYOUT ACCORDING TO GIVEN SPECIFICATIONS  -->
<!-- HINT :- Use PANEL,bootstrap alerts, List and UL concepts -->
<div class="container">
    <h2>Automatic tasks report</h2>
    <div class="panel panel-default">
        <div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
        <h2>Execution Log Information</h2>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item">Total tasks run<span class="badge">12</span></li>
                <li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
                <li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
                <li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
            </ul>
        </div>
        <div class="panel-footer">End of execution log information</div>
    </div>
</div>

</body>
</html>
1
Gleb Kemarsky 22 मई 2021, 22:28