当前位置： 文江博客话题详情

更改 Bootstrap 表的字体大小

发布于 2025-01-18 13:28:15 字数 3093 浏览 2 评论 0原文

我正在使用 Bootstrap 表功能，这很棒，但我似乎无法更改字体大小。

我正在关注 https 的示例://examples.bootstrap-table.com/index.html#options/loading-font-size.html#view-source 但无论我将大小更改为什么，它都没有效果。

我做错了什么？

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body class="home">
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>
        <script defer>
            let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,
                    loadingFontSize: "30px"
                })
            })
        </script>
    </body>
</html>
原文

I'm using the Bootstrap table functionality which is great but I cannot seem to change the font size.

I'm following the example at https://examples.bootstrap-table.com/index.html#options/loading-font-size.html#view-source but whatever I change the size to, it has no effect.

What am I doing wrong?

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body class="home">
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>
        <script defer>
            let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,
                    loadingFontSize: "30px"
                })
            })
        </script>
    </body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

煮酒 2025-01-25 13:28:16

更正它不会改变表格内容的字体大小，因为您尝试更改加载文本的字体大小。
尝试更改 css 字体大小的值，如下例所示。

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body class="home">
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>
        <script defer>
            let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,
                    loadingFontSize: "60px"
                }).css('font-size', '30px')
            })
        </script>
    </body>
</html>

Correct it won't change the font size of your table content as you are trying to change the font size of Loading text.
Try changing value of css font size like example below.

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body class="home">
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>
        <script defer>
            let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,
                    loadingFontSize: "60px"
                }).css('font-size', '30px')
            })
        </script>
    </body>
</html>
回复 原文
め可乐爱微笑 2025-01-25 13:28:15

您可以使用普通的JavaScript进行样式。我仅在您的JavaScript代码中添加它：

            var tableStyle = document.querySelector('table');            
            tableStyle.classList.add('fs30');

此CSS类：

.fs30 {
  font-size: 30px;
}

然后，您可以完全控制表格中的每个元素。

          let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
          
            var tableStyle = document.querySelector('table');            
            tableStyle.classList.add('fs30');
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,                    
                })
            })
.fs30 {
  font-size: 30px;
}
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body class="home">
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>

    </body>

You can make the styling by using plain javascript. I add only this in your javascript code:

            var tableStyle = document.querySelector('table');            
            tableStyle.classList.add('fs30');

And this css class:

.fs30 {
  font-size: 30px;
}

Then you have full control to change every element in you table.

          let data = [
                {
                    "fieldA": "purple",
                    "fieldB": "minivan",
                    "fieldC": 7,
                },
                {
                    "fieldA": "red",
                    "fieldB": "hatchback",
                    "fieldC": 26,
                }]
          
            var tableStyle = document.querySelector('table');            
            tableStyle.classList.add('fs30');
            var table = $("#btTable")
            $(function() {
                table.bootstrapTable({
                    data: data,                    
                })
            })
.fs30 {
  font-size: 30px;
}
    <head>
        <!-- Bootstrap and Boostrap Table -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    </head>
    <body class="home">
        <div>
            <table id="btTable" class = "table-sm">
            <thead>
                <tr>
                    <th data-field="fieldA" data-sortable="true">Field A</th>
                    <th data-field="fieldB" data-sortable="true">Field B</th>
                    <th data-field="fieldC" data-sortable="true">Field C</th>
                </tr>
            </thead>
            </table>
        </div>

    </body>

回复 原文
~没有更多了~

关于作者

帅的被狗咬

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

尘曦

文章 0 评论 0

在梵高的星空下

文章 0 评论 0

善良天后

文章 0 评论 0

韬韬不绝

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

不美如何

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文