ednow

0%

bootstrap

发表于 更新于
本文字数： 9.4k 阅读时长 ≈ 9 分钟

bootstrap

一个前端ui框架

accordion

参考文献

加载友好

占位块

参考文献

转圈圈

参考文献

提示

参考文献

布局

上传文件

参考文献

在高分辨率的手机下响应式失效

<meta name="viewport" content="width=device-width, initial-scale=1">

MDN

参考文献

class

align-items-center

居中

参考文献

spcing

参考文献

form-control

class="form-control" 是 Bootstrap 中的一个 class，它用于表示一个表单控件的样式。

在 Bootstrap 中，有许多与表单相关的 class，但 form-control 是其中最常用的之一。它可以应用于以下类型的表单控件:

  1. <input>：适用于文本输入框（如文本框、密码框、邮箱框等）。
  2. <textarea>：适用于文本域。
  3. <select>：适用于下拉菜单。
  4. <button>：适用于按钮。

form-control 的作用是通过添加样式，使表单控件具有一致的外观。它会为控件添加一些边框、填充和背景颜色，以及其他一些细节样式。这样，可以确保整个表单在各种设备上都有一致的外观，并提供更好的用户体验。

使用示例：

1
2
3
4
5
6
7
8
<input type="text" class="form-control" placeholder="请输入用户名">
<textarea class="form-control" rows="3" placeholder="请输入描述信息"></textarea>
<select class="form-control">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>
<button type="button" class="btn btn-primary form-control">提交</button>

在以上示例中，每个表单控件都添加了 form-control class，以使它们的外观与其他表单控件保持一致。

加这个class找不到图片(Image not found)
没有加这个class找不到图片(Image not found)

input-group-text

同form-control

加了这个class找不到图片(Image not found)
没有加这个class找不到图片(Image not found)

monospace

monospace是一种字体样式，其中每个字符的宽度都相等，并且每个字符占用相同的空间。这意味着每个字符的宽度都是固定的，无论是字母、数字还是符号，都具有相同的宽度。这与其他字体样式，如proportional fonts（比例字体），不同，后者中每个字符的宽度可以根据字符的形状和大小而变化。Monospace字体通常用于编程、打印文档、终端和文本编辑器等需要垂直对齐的应用程序中，因为它们的规则宽度可以提供更好的排版和对齐效果。

“Mono-“是来自希腊语单词”monos”的前缀，意思是”单一的”、”独特的”或”唯一的”。在许多情况下，”Mono-“被用作前缀，以表示某事物具有单一的特性、或者只有一个组成部分。以下是一些常见的使用示例：

  1. Monotheism（一神论）：相信只存在一个神的宗教信仰。
  2. Monopoly（垄断）：指某个公司或组织对特定产品或服务的市场具有独家控制权。
  3. Monocle（单片眼镜）：一种只有一个镜片的眼镜，通常用于矫正视力。
  4. Monochrome（单色）：指只使用一种颜色或多种不同的灰度来表示图像的表现方式。
  5. Monologue（独白）：指只有一个人参与的演讲或表演。

这只是一些例子，”Mono-“作为前缀在不同的场合中可以有不同的用法和意义。

z-index

在Bootstrap中，z-index是一种CSS属性，用于控制HTML元素在垂直方向上的层叠顺序。z-index属性定义了元素在堆叠上下文中的层级关系。具有更高z-index值的元素将覆盖具有较低z-index值的元素。

在Bootstrap中，z-index属性可以在CSS类中通过设置其值来使用。例如，可以使用类似z-index: 100;的样式规则来指定具有较高层叠顺序的元素。这对于在复杂的布局中管理叠加元素，例如导航菜单、弹出框等，非常有用。

需要注意的是，如果要正确使用z-index属性，建议将元素的position属性设置为”relative”、”absolute”或”fixed”，这样z-index属性才会生效。

总结：在Bootstrap中，z-index是一种CSS属性，用于控制元素的层叠顺序。通过设置z-index属性的值，可以控制元素在堆叠上下文中的层级关系。

attribute

for

在Bootstrap中，<for>用于创建一个表单或其他元素的”for”属性。该属性指定了与标签关联的表单元素。对于辅助性标签（如<label>）来说，它们可以通过”for”属性将标签与特定的表单元素进行关联，从而在用户点击标签时，触发关联元素的操作（例如，选中一个复选框或单选按钮）。

举个例子，假设有一个复选框和一个标签，我们希望点击标签时选中复选框。我们可以使用for属性将标签与复选框关联起来，如下所示：

1
2
<label for="checkbox">点击我选中复选框</label>
<input type="checkbox" id="checkbox">

在上述例子中，label标签的for属性值应与checkbox复选框的id属性值一致，这样在点击标签时，复选框就会被选中。

通过使用for属性，我们可以实现更好的用户交互和可访问性，提升用户体验。

aria-label

Aria 是 Accessible Rich Internet Applications 的缩写，意为“无障碍富互联网应用程序”。Aria 是一组用于 Web 开发的规范和属性，旨在提供更好的无障碍性和可访问性，使得有特殊需求的用户（如视力障碍者、听力障碍者等）能够更好地使用互联网应用程序。

Bootstrap 的 Aria-label 属性用于指定一个元素的无障碍可见标签。Aria-label 可以用来添加语义化的描述，帮助屏幕阅读器用户更好地理解页面的内容。

Aria-label 属性的作用包括：

  1. 提供更好的可访问性：对于无法通过其他方式表达其含义的元素，可以使用 Aria-label 属性来提供更具描述性的标签，以便屏幕阅读器能够正确读取和理解。
  2. 增强互动元素的可访问性：对于需要用户操作的互动元素（如按钮、链接等），使用 Aria-label 属性可以描述其作用和目的，使屏幕阅读器用户更容易了解如何与这些元素进行交互。
  3. 改善搜索引擎优化：Aria-label 属性也可以用于搜索引擎优化，提供更准确、更具描述性的标签，有助于搜索引擎正确理解和索引页面内容。

总而言之，Bootstrap 的 Aria-label 属性可以帮助开发者提升页面的可访问性，使页面更易于使用和理解，无障碍用户也能够更好地享受网站的功能和内容。

bootstrap-table

参考文献1

代码详情
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dashboard | Nadhif - Responsive Admin Template</title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
    </head>
    <style>
        .page-content-wrapper {
            width: 800px;
            position: absolute;
            top: 10%;
            left: 24%;
            background: #fff;
            border: 1px solid #999;
            padding: 3% 0 0 9%;
            display: none;
        }
        .inputstyle {
            width: 60%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
    <body>

        <table id="mytab" class="table table-hover"></table>
        <!-- 新增和修改界面 -->
        <div class="page-content-wrapper">
            <input type="text" class="inputstyle" id="id" style="display: none;">
            <div class="form-group">
                <label>工号:</label> <input type="text" class="inputstyle" id="deviceId">
            </div>
            <div class="form-group">
                <label>姓名:</label> <input type="text" class="inputstyle" id="name">
            </div>
            <div class="form-group">
                <label>电话:</label> <input type="text" class="inputstyle" id="phone">
            </div>
            <div class="form-group">
                <label>公司:</label> <input type="text" class="inputstyle" id="organName">
            </div>


            <div class="modal-footer">
                <button type="button" class="btn default" data-dismiss="modal" id="close">关闭</button>
                <button type="button" class="btn blue" id="addBtn">保存</button>

            </div>
        </div>

        <script>
            $('#mytab').bootstrapTable({
                method: 'get',
                url: "test.json", // 请求路径
                striped: true, // 是否显示行间隔色
                pageNumber: 1, // 初始化加载第一页
                pagination: true, // 是否分页
                sidePagination: 'client', // server:服务器端分页|client：前端分页
                pageSize: 5, // 单页记录数
                pageList: [5, 20, 30],
                // showRefresh : true,// 刷新按钮
                queryParams: function(params) { // 上传服务器的参数
                    var temp = {

                    };
                    return temp;
                },
                columns: [{
                    title: 'id',
                    field: 'id',
                    visible: false
                }, {
                    title: '工号',
                    field: 'deviceId',

                }, {
                    title: '姓名',
                    field: 'name',

                }, {
                    title: '联系电话',
                    field: 'phone'
                }, {
                    title: '公司部门',
                    field: 'organName'
                }, {
                    title: '操作',
                    field: 'id',
                    formatter: option
                }]
            })

            // 定义删除、更新按钮
            function option(value, row, index) {
                var htm = "";
                htm = '<button id="upd"  onclick="update(\'' + escape(JSON.stringify(row)) + '\')">修改</button>';
                return htm;
            }

            function update(row) {
                $(".page-content-wrapper").show();
                var data = JSON.parse(unescape(row))
                $('#deviceId').val(data.deviceId)
                $('#name').val(data.name)
                $('#phone').val(data.phone)
                $('#organName').val(data.organName)

            }
            $("#close").on("click", function() {
                $(".page-content-wrapper").hide();
            })
        </script>
    </body>

</html>

test.json

代码详情
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
[
    {
        "id": 1,
        "deviceId": "43445",
        "name": "王小婷",
        "phone": "1567865475",
        "organName": "字节跳动"
    },  {
        "id": 2,
        "deviceId": "53456",
        "name": "最帅的坏兔子",
        "phone": "1567865475",
        "organName": "腾讯" 
    },{
        "id": 3,
        "deviceId": "2345",
        "name": "阿强",
        "phone": "1567865475",
        "organName": "360" 
    },{
        "id": 4,
        "deviceId": "2345",
        "name": "阿花",
        "phone": "1567865475",
        "organName": "百度" 
    },
    {
        "id": 5,
        "deviceId": "2345",
        "name": "阿奶",
        "phone": "1567865475",
        "organName": "蚂蚁金服" 
    },{
        "id": 5,
        "deviceId": "2345",
        "name": "阿狗",
        "phone": "1567865475",
        "organName": "阿里" 
    }
]

参考文献

参考文献2

参考文献

bootstrap创建元素

bootstrap.Toast.getOrCreateInstance

参考文献

ICON

bootstrap官方

参考文献

修改

GOOGLE

黑暗模式开关

日间模式icon

代码详情
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<style>
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
</style>

<span class="material-symbols-outlined">
sunny
</span>

夜间模式icon

代码详情
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17


<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />

<style>
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
</style>

<span class="material-symbols-outlined">
bedtime
</span>