大屏幕html,Bootstrap 超大屏幕

本篇文章帮大家学习Bootstrap 超大屏幕,包含了Bootstrap 超大屏幕使用方法、操作技巧、实例演示和注意事项,有一定的学习价值,大家可以用来参考。

本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:创建一个带有 class .jumbotron. 的容器

除了更大的

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

下面的实例演示了这点:html>

Bootstrap 实例 - 超大屏幕(Jumbotron)

欢迎登陆页面!

这是一个超大屏幕(Jumbotron)的实例。

学习更多

结果如下所示:

2a80068eeab9d0238142b5f79ecdef6b.png

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

Bootstrap 实例 - 超大屏幕(Jumbotron)

欢迎登陆页面!

这是一个超大屏幕(Jumbotron)的实例。

学习更多

结果如下所示:

0fe5d0dac3991112dcd893c29353b806.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap提供了一个Jumbotron组件,可以用于在页面上显示重要的信息或者是引导用户注意。 Jumbotron组件可以让文本容易阅读,同时可以在背景上添加一张大图或者一段视频。下面是一个Jumbotron的基本模板代码: ```html <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> ``` 使用Jumbotron组件,可以通过添加`.jumbotron`类来创建一个Jumbotron。在这个例子,我们添加了一个大标题、一些文本和一个按钮。按钮使用了Bootstrap的`.btn`和`.btn-primary`类来样式化。 如果你想要让Jumbotron更适合大屏幕的显示,可以在外层容器上添加`.container-fluid`类。这将使Jumbotron组件扩展到整个屏幕宽度。下面是一个示例代码: ```html <div class="container-fluid"> <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> ``` 这样,Jumbotron组件就可以在超大屏幕上显示了。注意:由于Jumbotron组件会扩展到整个屏幕宽度,因此在使用时需要注意页面排版和响应式设计的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值