使用 Bootstrap 4 在 html 页面中设计我的仪表板

问题描述 投票：0回答：1

我需要帮助，请使用 Bootstrap 4 设计我的 html 仪表板。

代码下面的图片是我想要的样子。

换句话说，我希望文本尽可能大，并且尽可能少留白，并且看起来不会混乱在一起。

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

html css twitter-bootstrap bootstrap-4
1个回答
0
投票

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

<!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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.