1024问

Bootstrap 超大屏幕（Jumbotron）

Iola ·
更新时间:2024-11-14
· 938 次阅读

Bootstrap 超大屏幕（Jumbotron）

本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

创建一个带有 class .jumbotron. 的容器
。 除了更大的

，字体粗细 font-weight 被减为 200。

下面的实例演示了这点：

实例

欢迎登陆页面！

这是一个超大屏幕（Jumbotron）的实例。

学习更多


结果如下所示：

超大屏幕（Jumbotron）

为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class，如下面的实例所示：

实例

欢迎登陆页面！

这是一个超大屏幕（Jumbotron）的实例。

学习更多


结果如下所示：

全宽的超大屏幕（Jumbotron）



bootstrap

1024 个赞
编辑 举报
需要 登录 后方可回复, 如果你还没有账号请 注册新账号
相关文章
Linux下netstat命令的一些常见用法
Fidelia 2021-03-30
826
Bootstrap5的断点与容器的具体使用
Tricia 2021-12-15
944
bootstrap实现轮播图效果
Tanya 2021-12-15
615
bootstrap Table的使用方法总结
Wanda 2021-12-15
816
Django+Bootstrap实现计算器的示例代码
Rhea 2021-12-16
1140
Linux开机启动过程详解(bootstrap)
Tertia 2022-01-28
1740
Bootstrap4 加载效果
Tia 2022-05-04
579
Bootstrap4 滚动监听(Scrollspy)
Petunia 2022-09-29
367
Bootstrap4 Flex（弹性）布局
Hellens 2022-09-29
239
Bootstrap4 多媒体对象
Belle 2022-09-29
1008
在ASP.Net Core应用程序中使用Bootstrap4
Tina 2022-10-03
839
Jquery+bootstrap实现表格行置顶置底上移下移操作详解
Xanthe 2022-10-23
759
Bootstrap table列上下移动效果
Eleanor 2022-10-23
1763
Vue项目中使用Bootstrap
Meta 2022-10-25
1576
Django中引入bootstrap的详细图文详解
Tanisha 2022-11-10
1481
Nacos-SpringBoot框架启动不加载bootstrap.yml的解决
Antonia 2022-11-23
1421
爬虫训练前端基础Bootstrap5排版表格图像
Rhea 2023-02-26
6
SpringBoot项目集成Swagger和swagger-bootstrap-ui及常用注解解读
Agnes 2023-04-02
285
NCCL深度学习Bootstrap网络连接建立源码解析
Fawn 2023-04-20
501
express框架+bootstrap美化ejs模板实例分析
Oria 2023-05-18
1397