BootStrap4：内容显示

已于 2023-03-28 17:47:20 修改
阅读量403 收藏 1
点赞数
文章标签： css html 前端
于 2023-03-28 17:46:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzc70919700/article/details/129820030
版权

一、标题

1.1、样式

bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。
效果：

在这里插入图片描述

源代码：

<body class="container">
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
</body>

1.2、辅助标题文本

使用附带的实用类从Bootstrap 重新创建小的辅助标题文本。

效果：
在这里插入图片描述

源代码：

<body>
    <div class="container">
        <h3>
            Fancy display heading
            <small class="text-muted">
                With faded secondary text
            </small>
        </h3>
    </div>
</body>

扩展：文本强调色

效果：
在这里插入图片描述

源代码：

<body class="container">
    <p class="text-muted">这个是text-muted属性的强调色！</p>
    <p class="text-primary">这个是text-primary属性的强调色！</p>
    <p class="text-success">这个是text-success属性的强调色！</p>
    <p class="text-info"> 这个是text-info属性的强调色！</p>
    <p class="text-warning">这个是text-warning属性的强调色！</p>
    <p class="text-danger">这个是text-danger属性的强调色！</p>
</body>

二、段落

通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <p class="lead">
        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
    </p>
</body>

三、对齐

  • .text-center：文本居中对齐
  • .text-right：文本右对齐

样式效果：
在这里插入图片描述

源代码：

<body class="container">
    <blockquote class="blockquote">
        <p class="mb-0 text-center">爱上一个地方，就应该背上包去旅行，走得更远。</p>
        <footer class="blockquote-footer text-right">
            出自商务印书馆的 <cite title="Source Title">《新华字典》</cite>
        </footer>
    </blockquote>
</body>

四、列表

4.1、无样式列表

在ul(或ol）上使用.list-unstyled可以删除列表项目上默认的list-style以及左外边距，这只生效于在直接子列表项目上，不影响你嵌套的子列表。

样式效果：

在这里插入图片描述

源代码：

<body class="container">
    <ul class="list-unstyled">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Nulla volutpat aliquam velit
            <ul>
                <li>Phasellus iaculis neque</li>
            </ul>
        </li>
        <li>Faucibus porta lacus fringilla vel</li>
    </ul>
</body>

4.2、逐行式或多列并排式布局

  • .list-inline：多行
  • .list-inline-item：多列

样式效果：
在这里插入图片描述

源代码：

<body class="container">
	<ul class="list-inline">
	    <li class="list-inline">列表之一</li>
	    <li class="list-inline">列表之二</li>
	    <li class="list-inline">列表之三</li>
	</ul>
	<ul class="list-inline">
	    <li class="list-inline-item">列表之一</li>
	    <li class="list-inline-item">列表之二</li>
	    <li class="list-inline-item">列表之三</li>
	</ul>
</body>

五、图片

5.1、响应式图片

给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

样式效果：

在这里插入图片描述

源代码：

<img src="1.jpg" class="img-fluid" alt="Responsive image" >

5.2、缩略图处理

使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式

样式效果：
在这里插入图片描述

源代码：

<img src="..." alt="..." class="img-thumbnail">

5.3、图像对齐处理

对于.block属性的块状图片，我们也可以使用 浮动定义规范 或 文字对齐规范，来实现对图像的对齐、浮动控制，带.block块属性的图片，可以自动获得 .mx-auto 的位置对齐属性。

样式效果：
在这里插入图片描述

源代码：

<img src="..." class="rounded float-left" alt="..."> 
<img src="..." class="rounded float-right" alt="...">

样式效果：
在这里插入图片描述

源代码：

<img src="..." class="rounded mx-auto d-block" alt="...">

六、表格

6.1、Head表头处理

  • .thead-light：浅色（灰色）表头
  • .thead-dark：深色（黑色）表头

样式效果：

在这里插入图片描述

源代码：

<body class="container">
    <table class="table">
        <thead class="thead-dark">
        <tr> <th>Firstname</th> <th>Lastname</th><th>Email</th></tr>
        </thead>
        <tbody>
        <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td>   </tr>
        <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr>
        <tr> <td>July</td> <td>Dooley</td><td>july@example.com</td> </tr>
        </tbody>
    </table>
</body>

6.2、条纹表格

使用 .table-striped 样式定义 ，可以产生逐行颜色强烈对比的表格样式（以及增加反转）。
样式效果：
在这里插入图片描述

源代码：

<table class="table table-striped">
      <thead >
             <tr> <th>Firstname</th> <th>Lastname</th><th>Email</th></tr>
      </thead>
      <tbody>
             <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td>   </tr>
             <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr>
             <tr> <td>July</td> <td>Dooley</td><td>july@example.com</td> </tr>
      </tbody>
</table>

6.3、边框表格

添加 .table-bordered 类可以产生表格边框与间隙系统。

样式效果：
在这里插入图片描述

源代码：

<table class="table table-bordered">
      <thead >
             <tr> <th>Firstname</th> <th>Lastname</th><th>Email</th></tr>
      </thead>
      <tbody>
             <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td>   </tr>
             <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr>
             <tr> <td>July</td> <td>Dooley</td><td>july@example.com</td> </tr>
      </tbody>
</table>

6.4、悬停效果表格

将 .table-hover 定义到 上，可以产生行悬停效果（鼠标移到行上会出现状态提示）。

效果样式：
在这里插入图片描述

源代码：

<table class="table table-hover">
      <thead >
             <tr> <th>Firstname</th> <th>Lastname</th><th>Email</th></tr>
      </thead>
      <tbody>
             <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td>   </tr>
             <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr>
             <tr> <td>July</td> <td>Dooley</td><td>july@example.com</td> </tr>
      </tbody>
</table>

6.5、紧缩表格

添加 .table-sm 可以将表格的padding值缩减一半，使表格更加紧凑。

样式效果：
在这里插入图片描述

源代码：

<table class="table table-sm">
      <thead >
             <tr> <th>Firstname</th> <th>Lastname</th><th>Email</th></tr>
      </thead>
      <tbody>
             <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td>   </tr>
             <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr>
             <tr> <td>July</td> <td>Dooley</td><td>july@example.com</td> </tr>
      </tbody>
</table>

6.6、响应式表格

可在.table上加入.table-responsive获得响应式表现。

样式效果：
在这里插入图片描述

源代码：

<div class="table-responsive">
     <table class="table"> 
           ... 
     </table> 
</div>
Java秦老师
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap4--页面基本设置
zxn200125的博客
12-14 1310
bootstrap中页面排版基本设置和相关css类的介绍
Bootstrap4:Bootstrap4
04-11
Bootstrap4是中国最流行的前端开发框架之一，由Twitter的开发者创建并开源。这个框架极大地简化了网页设计和响应式布局的工作，让开发者能够快速构建美观、响应式的网站。Bootstrap4是其系列版本中的一个重要升级，...
Bootstrap学习笔记系列6-----Bootstrap文本显示
aitukang0425的博客
11-23 611
通过对文本或者链接添加下面的类，会使其展示不同的颜色，如果文本是个链接，鼠标移动到文本上，颜色会变暗。 text-muted柔和的文本（深色） text-primary 表示基础的文本（蓝色） text-success 表示成功信息的文本（绿色） text-info 表示查看过信息的文本（深蓝色） text-warning承载值得注意信息的文本（土黄色） text-danger 表示危...
Bootstrap 4 中文开发手册 Display property（显示属性）
极客神殿
09-05 624
通过我们的显示实用程序快速响应地切换组件的显示值。包括对一些更常见的值的支持，以及一些额外功能，用于控制打印时的显示。 共同的display价值 display属性接受了一些值，我们用实用程序类支持其中的许多值。我们故意不提供每个价值作为实用工具，所以我们支持： .d-none .d-inline .d-inline-block .d-block .d-table .d-table-cell .d-flex .d-inline-flex 通过将任何类应用到您选择的元素来使用它们。例如，下面介绍如何使用内
Bootstrap(文本)
weixin_45886797的博客
04-06 196
Bootstrap(标题设置) 标题 bootstrap对h1~h6的标题效果进行了覆盖 提供对应样式类名为非标题元素设置样式 .h1~h6 副标题 small标签 或(.small)类名 例如:hello 段落 通过.lead 可以突出强调内容(加大，加粗文本字号) 例:hello 小字号 加粗 斜体 文本强调(实际为提示颜色) 提示灰（text-muted）、主要蓝（text-primary）、成功绿（text-success）、信息蓝（text-info）、警告黄（text-warning）、危险
SpringBoot整合BootStrap4实现表格数据展示
菜鸟逆袭之路
06-11 2392
一、前言 看过第十四篇的SpringBoot用Restful风格实现增删改查并使用MyBatis逆向工程 以下部分代码可以直接逆向工程哈，快速开发。 此篇对于逆向工程就不赘述了 二、准备工作 2.1 MySql创建一张学生表 DROP TABLE IF EXISTS `student`; CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `sname` varchar(255) CHARACTER SET u.
bootstrap4:bootstrap4的练习代码
05-10
在"bootstrap4:bootstrap4的练习代码"这个主题中，我们主要关注的是如何使用Bootstrap 4来创建功能丰富的网页。 Bootstrap 4的核心特点包括网格系统、排版、表单、按钮、导航及其他交互元素。以下是一些关键知识点...
jekyll-bootstrap4：具有Jekyll简约示例站点的Bootstrap 4
02-04
**jekyll-bootstrap4** 是一个基于 **Jekyll** 和 **Bootstrap 4** 的项目，它为用户提供了构建静态网站的快速起点。Jekyll 是一个静态站点生成器，它使用 Markdown 和 Liquid 模板语言将文本内容转化为静态 HTML ...
Bootstrap4:使用bootstape4的电子商务网站
05-23
7. **网格系统**：Bootstrap4 的12列网格系统可以帮助组织内容，实现灵活的布局。例如，可以在大屏幕上展示三列商品，在小屏幕上变为单一列。 8. **字体图标**：Bootstrap4 集成了 Glyphicons 和 FontAwesome 字体...
Bootstrap练习：百度登录框
11-03
模态框在Bootstrap中是一个非常有用的组件，它可以在不离开当前页面的情况下显示额外的内容。在这个练习中，我们可能会看到一个HTML结构，其中包含了一个触发模态框显示的按钮和一个隐藏的模态框容器。按钮通过数据...
Bootstrap对段落和文本的设置(与段落-和文本相关的类)
最新发布
昊虹AI笔记
10-07 607
Bootstrap对段落和文本的设置(与段落-和文本相关的类)
Bootstrap系列之文本（Text）
老__L的博客
06-03 2080
文本（Text）
Bootstrap4笔记
Akio的博客
08-30 705
Bootstrap4就相當於一個css库，已经封装好了的，只要把class名改成bootstrap对应的名字，就会自动渲染css样式 移动设备优先 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示： &lt;meta name="viewport" content="width=d...
全面解析Bootstrap排版使用方法（文字样式）
wb1597063760的博客
07-25 535
2、行高为1.42857143http://（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。有了文字样式，使得排版效果更清晰简洁，希望大家在自己的作品中多使用一些简单大方的文字样式，使作品脱颖而出，更加具有吸引力。.text-primary：主要，使用蓝色（#428bca）
bootstrap table 文本溢出鼠标悬浮提示完整内容
yypraaa的博客
09-28 1190
1.添加样式，文本溢出省略显示 table{ width:120px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:.
bootStrap-table鼠标放到方格上自动弹出全部信息
hyj
11-28 528
$(function () { $('#id').bootstrapTable({ ... columns: [{ ... ,{ title: '列名', field: 'text', ...
bootstrap中六种表格样式
weixin_34337381的博客
11-29 1556
表格表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： LESS版本，对...
Bootstrap中六种表格样式
weixin_30420305的博客
12-06 451
表格 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。 同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： ☑ LESS版本，...
bootstrap框架列表组和折叠使用实现侧边导航栏
weixin_52657749的博客
04-16 1437
bootstrap框架列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: 12345<ul class="list-group">  <li class="list-group-item">First item</li>  <li ...
处理Bootstrap-table 内容显示太多问题
05-05
如果Bootstrap-table中的内容过多，可以考虑以下几个解决方案： 1. 分页：使用Bootstrap-table自带的分页功能，将内容分为多个页面进行展示，避免一次性显示过多内容。 2. 搜索：在Bootstrap-table中添加搜索功能，让用户可以根据关键词搜索到所需内容，缩短展示内容的范围。 3. 筛选：使用Bootstrap-table的筛选功能，让用户可以根据特定的过滤条件筛选所需内容。 4. 折叠：对于一些较长的内容，可以使用折叠功能进行隐藏，用户可以点击展开查看。 5. 简化内容：如果内容过多，可以考虑对内容进行简化，只保留必要的信息，避免过多冗余内容的干扰。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值