bootstrap超大屏幕(19)

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

创建一个带有 class .jumbotron. 的容器 <div>。
除了更大的 <h1>,字体粗细 font-weight 被减为 200。
下面的实例演示了这点:

实例
<div class="container">
   <div class="jumbotron">
        <h1>欢迎登陆页面!</h1>
        <p>这是一个超大屏幕(Jumbotron)的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        学习更多</a>
      </p>
   </div>
</div>
为了获得占用全部宽度且不带圆角的超大屏幕,
请在所有的 .container class 外使用 .jumbotron class,如下面的实例所示:

实例
<div class="jumbotron">
    <div class="container">
        <h1>欢迎登陆页面!</h1>
        <p>这是一个超大屏幕(Jumbotron)的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
        </p>
    </div>
</div>
  • 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、付费专栏及课程。

余额充值