用bootstrap 4在html页面中设计我的 Jmeter 板

o2rvlv0m 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(2)|浏览(125)

我需要帮助，请，使用Bootstrap 4样式我的HTML Jmeter 板。
图片下面的代码是我想它看起来像.
换句话说，我希望文本尽可能大，如果可能的话，用很少的白色空间，看起来不混乱在一起。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #table1 tr td {
            font-size: 100px;
        }

        .widgetLabel {
            font-size: 100px;
        }

        .mainNumber {
            font-size: 800px;
        }
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <table id="table1" class="table table-bordered">
                    <tr><td><div>widget 1</div><div>55</div></td></tr>
                    <tr><td><div>widget 2</div><div>55</div></td></tr>
                    <tr><td><div>widget 3</div><div>55</div></td></tr>
                </table>
            </div>
            <div class="col-9 d-flex flex-column align-items-center justify-content-center">
                <div class="widgetLabel">Widget</div><div class="mainNumber">55</div>
            </div>
        </div>
    </div>
</body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/77247348/designing-my-dashboard-in-html-page-with-bootstrap-4

2条答案

按热度按时间

j5fpnvbx1#

这是相当接近-我没有去找一个圆形的字体，但是。

.block-of-things {
  font-size: 3em;
}

.custom-big-font {
  line-height: 0.5em;
  font-size: 0.75em;
}

.custom-huge-number {
  font-size: 5em;
  line-height: 0.75em;
}

.table.table-bordered {
  font-size: 2em;
}

.widget-header {
  background-color: #6AA84F;
  font-size: 0.5em;
}

.widget-number {
  line-height: 0.9em!important;
  font-size: 1.5em!important;
}

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

<div class="container-fluid">
  <div class="row">
    <div class="col-4">
      <table class="table table-bordered">
        <tr>
          <td class="border border-secondary m-0 p-0">
            <div class="border border-secondary text-center text-white text-capitalize widget-header">widget a</div>
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div>
          </td>
        </tr>
        <tr class="m-0 p-0">
          <td class="border border-secondary m-0 p-0 w-25 container-fluid justify-content-center">
            <div class="border border-secondary text-center text-white text-capitalize widget-header">widget b</div>
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div>
          </td>
        </tr>
        <tr class="m-0 p-0">
          <td class="border border-secondary m-0 p-0 w-25 container-fluid justify-content-center">
            <div class="text-center text-white  text-capitalize widget-header">widget c</div>
            <div class="h1 m-0 p-0 font-weight-bold text-center widget-number">55</div>
          </td>
        </tr>
      </table>
    </div>
    <div class="border border-secondary block-of-things m-0 p-2 col-8 d-flex flex-column align-items-center justify-content-start">
      <div class="text-center m-0 p-0 custom-big-font">Widget</div>
      <div class=" m-0 p-0 font-weight-bold text-center custom-huge-number">55</div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-10-14

uhry853o2#

您可以添加一个事件侦听器来动态调整字体大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #table1 tr td {
            font-size: 80px; /* Decrease the font size */
            padding: 10px; /* Add padding for better spacing */
        }

        .widgetLabel {
            font-size: 80px; /* Decrease the font size */
            background-color: green; /* Add green background color */
            color: white; /* Set text color to white for visibility */
            padding: 10px; /* Add padding for better appearance */
            text-align: center; /* Center text horizontally */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%; /* Center text vertically */
        }

        .mainNumber {
            font-size: 200px; /* Initial font size */
            max-height: 100%; /* Ensure it doesn't exceed parent height */
            overflow: hidden; /* Hide overflow if necessary */
            display: flex;
            align-items: center;
            justify-content: center; /* Center main number both vertically and horizontally */
            margin: 0; /* Remove margin to reduce space */
        }

        .right-widget-label {
            height: auto; /* Reset height to auto for the right widget label */
            width: 100%;
        }

        /* Set container height to 100vh (viewport height) */
        .container-fluid {
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 3fr; /* Define a grid with two columns */
        }

        /* Style the left column */
        .left-column {
            display: flex;
            flex-direction: column;
            justify-content: top;
            align-items: center;
            margin:10px;
            height: 100vh;
        }

        /* Style the right column */
        .right-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 1383px;
            margin:10px;
        }
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="left-column">
            <table id="table1" class="table table-bordered">
                <tr><td><div class="widgetLabel">widget 1</div><div class="mainNumber">55</div></td></tr>
                <tr><td><div class="widgetLabel">widget 2</div><div class="mainNumber">55</div></td></tr>
                <tr><td><div class="widgetLabel">widget 3</div><div class="mainNumber">55</div></td></tr>
            </table>
        </div>
        <div class="right-column  table-bordered">
            <div class="widgetLabel right-widget-label">Widget</div>
            <div class="mainNumber" id="mainNumber">55</div>
        </div>
    </div>

    <script>
        // JavaScript to dynamically adjust the font size of mainNumber
        window.addEventListener('resize', function() {
            var mainNumber = document.getElementById('mainNumber');
            var container = mainNumber.parentElement;
            var availableHeight = container.clientHeight;
            var fontSize = availableHeight * 0.9; // Adjust the factor as needed
            mainNumber.style.fontSize = fontSize + 'px';
        });

        // Initial font size adjustment
        window.dispatchEvent(new Event('resize'));
    </script>
</body>
</html>

赞(0）回复(0）举报 2023-10-14

我来回答

用bootstrap 4在html页面中设计我的 Jmeter 板

2条答案

相关问题

热门标签

最新问答