BootStrap入门到实战：BootStrap全局CSS样式（三）- 表格、表单、按钮、图片、辅助类

已于 2024-05-19 14:41:16 修改
阅读量1.1k 收藏 20
点赞数 30
分类专栏： BootStrap 文章标签： css bootstrap javascript
于 2024-05-19 13:56:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73765584/article/details/139040886
版权

一. 表格

1. 基本表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 基础表格 -->
        <h2>基础表格</h2>
        <table class="table">
            <tr>
                <td>格1</td>
                <td>格2</td>
            </tr>
            <tr>
                <td>格3</td>
                <td>格4</td>
            </tr>
            <tr>
                <td>格5</td>
                <td>格6</td>
            </tr>
        </table>
</body>
</html>

 效果如下图：

2. 带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框

<table class="table table-bordered">
    ...
</table>

 效果如下图：

3. 条纹状表格

通过 .table-striped 类可以给表格之内的每一行增加斑马条纹样式

<table class="table table-bordered table-striped">
    ...
</table>

 效果如下图：

4. 鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

<table class="table table-bordered table-hover">
    ...
</table>

效果如下图：

5. 紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

<table class="table table-bordered table-condensed">
	...
</table>

效果如下图：

6. 状态类

通过这些状态类可以为行或单元格设置颜色

类描述
.active鼠标悬停在行或单元格上时所设置的颜色
.success标识成功或积极的动作
.info标识普通的提示信息或动作
.warning标识警告或需要用户注意
.danger标识危险或潜在的带来负面影响的动作

 

7. 响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

注意：

使用响应式表格，需用 div 容器包裹 table ，并将 div 容器 使用类名 .table-responsive

<div class="table-responsive">
  <table class="table table-condensed table-bordered">
    <tr class="active">
      <td>这是一条表格内容数据，撑开表格</td>
      <td>这是一条表格内容数据，撑开表格</td>
    </tr>
    <tr class="success">
      <td>这是一条表格内容数据，撑开表格</td>
      <td>这是一条表格内容数据，撑开表格</td>
    </tr>
    <tr class="warning">
      <td>这是一条表格内容数据，撑开表格</td>
      <td>这是一条表格内容数据，撑开表格</td>
    </tr>
    <tr class="danger">
      <td>这是一条表格内容数据，撑开表格</td>
      <td>这是一条表格内容数据，撑开表格</td>
    </tr>
    <tr class="info">
      <td>这是一条表格内容数据，撑开表格</td>
      <td>这是一条表格内容数据，撑开表格</td>
    </tr>
  </table>
</div>

 效果如下图：

二. 表单

1. 基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 基础表单 -->
    <div class="container">
        <form>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div class="checkbox">
                <label>
                 <input type="checkbox"> Check me out
                </label>
            </div>
            <div class="form-group">
                <label for="exampleInputFile">文件传输</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <button class="btn">登录</button>
        </form>
    </div>
</body>
</html>

 效果如下图：

2. 水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-xs-2 control-label">用户名</label>
                <div class="col-xs-10">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-xs-2 control-label">密码</label>
                <div class="col-xs-10">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
        </form>
    </div>
</body>
</html>

效果如下图：

3. 内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

示例：


<div class="container">
    <form class="form-inline">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control" id="monney" placeholder="请输入充值金额">
                <div class="input-group-addon">.00</div>
            </div>
        </div>
    </form>
</div>

效果如下图：

4. 被支持的控件

表单布局实例中展示了其所支持的标准表单控件

4.1 输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

必须添加类型声明,

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

<input type="text" class="form-control" placeholder="Text input">
<input type="password" class="form-control" placeholder="Password input">
...
4.2 文本域

支持多行文本的表单控件。可根据需要改变 rows 属性来获得高度。如下例中，rows="3"表示文本区域将显示3行的高度。

<textarea class="form-control" rows="3"></textarea>
4.3 多选

多选框（checkbox）用于选择列表中的一个或多个选项

4.3.1 普通多选框

示例1：

<form class="form-horizontal">
    <div class="checkbox">
        <label>
            <input type="checkbox" value="1">1
        </label>
        <label>
            <input type="checkbox" value="2">2
        </label>
    </div>
</form>

效果如下图：

4.3.2 创建的禁用状态的复选框

.disabled类用于将复选框设置为禁用状态。

实例2：

<form class="form-horizontal">
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" value="2"  disabled>2
        </label>
    </div>
</form>

 

4.4 单选

单选框（radio）用于从多个选项中只选择一个

4.4.1 普通单选框

示例1：

<div class="radio">
    <label>
        <input type="radio" name="sex" value="male">男
    </label>
    <label>
        <input type="radio" name="sex" value="female">女
    </label>
</div>

 效果如下图：

4.4.2 默认选中

checked属性表示该单选按钮默认被选中

示例2：

<div class="radio">
    <label>
        <input type="radio" name="sex" value="male" checked>男
    </label>
    <label>
        <input type="radio" name="sex" value="female">女
    </label>
</div>

 效果如下图：

4.4.3 单选禁用

.disabled类用于将单选按钮设置为禁用状态

示例3：

<div class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
       Option three is disabled
    </label>
</div>

效果如下图：

5. 表单状态

5.1 焦点状态

我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性

<div class="form-group">
   <div class="col-sm-10">
     <input type="password" class="form-control" id="inputPassword" placeholder="Password">
   </div>
</div>
5.2 禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态

<div class="form-group">
  <div class="col-sm-10">
    <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
  </div>
</div>
5.3 只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
5.4 校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
5.5 控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

三. 按钮

1. 可作为按钮使用的标签或元素

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

各使用场景：

在Bootstrap中，可以使用不同的标签或元素来创建按钮。下面是对每个示例的详细描述：

  1. <a class="btn btn-default" href="#" role="button">Link</a>

    含义：这是一个使用<a>标签创建的按钮。它通常用于创建一个链接，但通过添加class="btn btn-default"和role="button"属性，使其看起来像一个按钮。

    适用：这种用法适用于需要将链接样式为按钮的场景，例如导航栏中的链接。

  2. <button class="btn btn-default" type="submit">Button</button>

    含义：这是一个使用<button>标签创建的按钮。type="submit"表示该按钮是一个提交按钮，当用户点击它时，会提交表单数据。

    适用：这种用法适用于需要创建一个具有提交功能的按钮的场景，例如表单中的提交按钮。

  3. <input class="btn btn-default" type="button" value="Input">

    含义：这是一个使用<input>标签创建的按钮。type="button"表示该输入框是一个按钮，value="Input"定义了按钮上显示的文本。

    适用：这种用法适用于需要创建一个没有特定功能的普通按钮的场景，例如一个简单的操作按钮。

  4. <input class="btn btn-default" type="submit" value="Submit">

    含义：这是一个使用<input>标签创建的提交按钮。type="submit"表示该输入框是一个提交按钮，value="Submit"定义了按钮上显示的文本。

    适用：这种用法适用于需要创建一个具有提交功能的按钮的场景，例如表单中的提交按钮。

总结起来，根据实际场景的不同，我们可以选择使用<a>、<button>或<input>元素来创建按钮，具体取决于是否需要特定的功能（如提交表单）以及按钮的样式和行为需求。

2. 预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>

 效果如下图： 

3. 尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<p>
 <button class="btn btn-primary btn-lg">（大按钮）Large button</button>
 <button class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
 <button class="btn btn-primary">（默认尺寸）Default button</button>
 <button class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
 <button class="btn btn-primary btn-sm">（小按钮）Small button</button>
 <button class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
 <button class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
 <button class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

效果如下图：

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

 效果如下图：

4. 禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果

为 <button> 元素添加 disabled 属性，使其表现出禁用状态

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg"disabled="disabled">Button</button>

 效果如下图：

四. 图片

1. 响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其本质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放

<div class="container">
    <img src="./img/bg1.jpg"  class="img-responsive" alt="风景">
</div>

效果如下图：

2. 图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状

跨浏览器兼容性

请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

    <div class="container">
        <img src="./img/bg2.jpg"  class="img-rounded" alt="风景">
        <img src="./img/bg2.jpg"  class="img-circle" alt="风景">
        <img src="./img/bg2.jpg"  class="img-thumbnail" alt="风景">
    </div>

效果如下图：

五. 辅助类

该包含了以下内容：

  1. 情境文本颜色：使用不同的类名来设置文本的颜色。例如，text-muted、text-primary、text-success等。这些类属于Bootstrap的文本样式部分。

  2. 背景色：使用不同的类名来设置元素的背景颜色。例如，bg-primary、bg-success、bg-info等。这些类同样属于Bootstrap的样式部分。

  3. 关闭按钮：使用close类创建一个关闭按钮，并使用aria-label和aria-hidden属性提供辅助功能。这个类属于Bootstrap的组件部分。

  4. 三角符号：使用caret类创建一个向下的三角符号。这个类也属于Bootstrap的组件部分。

1. 情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样

<p class="text-muted">hello world!</p>
<p class="text-primary">hello world!</p>
<p class="text-success">hello world!</p>
<p class="text-info">hello world!</p>
<p class="text-warning">hello world!</p>    
<p class="text-danger">hello world!</p>
<p class="text-dark">hello world!</p>

效果如下图：

2. 情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样

<p class="bg-primary">hello world!</p>
<p class="bg-success">hello world!</p>
<p class="bg-info">hello world!</p>
<p class="bg-warning">hello world!</p>
<p class="bg-danger">hello world!</p>

 效果如下图：

3. 关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

4. 三角符号

<span class="caret"></span>

林林一928
关注
  • 30
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
BootStrap CSS全局样式和表格样式源码解析
08-31
了解这些基础的BootStrap全局样式和表格样式，能帮助开发者快速创建出美观且响应式的网页布局。BootStrap的源码解析有助于理解其工作原理，便于自定义和扩展。在实际开发中，结合其他组件如按钮、表单、导航等，可以...
bootstrap中六种表格样式
weixin_34337381的博客
11-29 1569
表格表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： LESS版本，对...
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）
m0_69034993的博客
11-05 1万+
状态类设置的是、或元素样式，使用.table-*来设置，可选值包括success、active、primary、secondary、danger、warning、info、light、dark等，同时状态类也适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。例：表格背景颜色示例。
我的天！做Java九个月涨薪7K，这究竟是怎么做到的
2401_83411843的博客
04-12 738
总而言之，面试官问来问去，问的那些Redis知识点也就这么多吧，复习的不够到位，知识点掌握不够熟练，所以面试才会卡壳。将这些Redis面试知识解析以及我整理的一些学习笔记分享出来给大家参考学习《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！大家参考学习还有更多学习笔记面试资料也分享如下：[外链图片转存中…(img-qqGiEtUj-1712925995904)]《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》
bootstrapTable的使用及表格的导出_bootstraptable 导出
2401_84240554的博客
04-13 2532
有toolbar：的样式无toolbar：的样式（2）sidePagination："client"或 “server”：分页方式：client客户端分页，server服务端分页（*）**client客户端分页：**如果是客户端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中没有pageSize和PageNumber这两个属性；server服务端分页：如果是r服务端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中必须有pageSize和PageNumber这两个属性；
BootStrap table的各种样式效果
shenxiaomo1688的博客
02-28 1万+
Bootstrap 表格类样式 ☑ .table：基础表格，为任意<table>添加基本样式 (只有横向分隔线) ☑ .table-striped：斑马线表格 ☑ .table-bordered：带边框的表格 ☑ .table-hover：鼠标悬停高亮的表格 ☑ .table-condensed：紧凑型表格 ☑ .table-responsive：响应式表格...
CSS——响应式网页(Bootstrap)
qq_48613863的博客
04-11 7124
一套代码可以兼容不同的屏幕设备。响应式网页就是在大屏里看是一种布局，在小一点的屏幕看又是另一种布局，在更小的屏幕看又换了一种布局。如图所示： 一、媒体查询 作用：根据条件的不同，设置不同的css样式。 1、写法1 min-width（从小到大），max-width（从大到小） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h
BootStrap智能表单实战系列(三)分块表单配置详解
11-24
Bootstrap 智能表单实战系列的第三部分主要聚焦于分块表单的配置详解。Bootstrap 是一个广泛使用的前端框架，由 Twitter 的 Mark Otto 和 Jacob Thornton 创建，于2011年8月作为开源项目发布在 GitHub 上。该框架...
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
11-22
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的...CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
01-19
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的...CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定
BootStrap智能表单实战系列(九)表单图片上传的支持
09-02
Bootstrap 智能表单实战系列的第九部分专注于表单图片上传功能的实现。Bootstrap 是一个流行的前端开发框架，它提供了快速构建响应式和移动优先的网页应用的工具。这个框架基于 HTML、CSS 和 JavaScript，由 Twitter...
bootstrap--表格（table的各种样式）
ShowTime_Shawn的博客
10-17 1万+
  目录 bootstrap--表格（table的各种样式） Bootstrap 表格类样式 ☑  .table：基础表格，为任意 &lt;table&gt; 添加基本样式 (只有横向分隔线) ☑  .table-striped：斑马线表格 ☑  .table-bordered：带边框的表格 ☑  .table-hover：鼠标悬停高亮的表格 ☑  .table-condensed...
【Java 进阶篇】深入了解 Bootstrap 表格和菜单
繁依Fanyi的博客
10-21 967
表格是用于展示和组织数据的常见元素，它们通常由行和列组成，每个单元格中包含信息。Bootstrap 提供了一系列表格样式，使表格看起来漂亮、一致且易于阅读。菜单是网页上的导航元素，用于帮助用户浏览和导航到不同的页面或功能。Bootstrap 提供了多种菜单组件，如导航栏、下拉菜单和标签页，以满足不同导航需求。尽管 Bootstrap 提供了丰富的表格和菜单组件，但您也可以根据需要进行自定义。您可以使用自己的CSS样式或JavaScript来增强这些元素。您可以通过添加自定义CSS样式来改变表格的外观。
Bootstrap Table数据表格的使用指南
最新发布
2401_84048006的博客
04-14 1363
,columns:[{checkbox: true //多选框},{field: ‘id’, //每列的字段名title: ‘id’, //表头所显示的名字halign: ‘center’, //表头的对齐方式valign: ‘middle’, //表格对齐方式居中order: ‘asc’, //默认排序方式sortable: true, //设置可以排序align: ‘center’ //表格数据对齐方式},{title: ‘姓名’,},{
Boostrap对HTML的表格的设计和优化
昊虹AI笔记
09-14 1202
Boostrap对HTML的表格的设计和优化
01.Bootstrap入门、CSS样式【栅格系统】
weixin_62356088的博客
04-12 776
目录 1. WWW：What、Why、Where 2 1. 响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机) 2 2. 移动设备有限 2 3. 浏览器支持 2 4. 容易上手 2 1. 企业网站、博客、网站后台之类的网站 2 2. 注意：非电商(电商网站分类很多) 2 2. 环境安装 2 3. Bootstrap CSS 3 3.1. 概览 3 3.1.1. H5文档类型 3 3.1.2. 移动设备优先 3 3.1.3. 布局容器 3 3.2. 栅.
Bootstrap CSS 概览
dahanhe的博客
11-15 1092
在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
Bootstrap3.3.6移动优先的全局CSS样式解析
"Bootstrap3.3.6 中文手册-全局CSS样式" Bootstrap 是一个流行的前端开发框架，用于构建响应式和移动设备优先的网站。在3.3.6这个版本中，它提供了一系列全局的CSS样式，使得基本的HTML元素能够通过特定的class得到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林林一928

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值