Bootstrap Jumbotron

最新推荐文章于 2024-08-30 06:23:43 发布

weixin_34008805

最新推荐文章于 2024-08-30 06:23:43 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000006832865

本文介绍如何使用 Jumbotron 来展示重要信息。通过简单的 HTML 结构和 Bootstrap 类，可以使内容更加突出。文中提供了两个示例，展示了如何根据需求调整布局。

可以使用Jumbotron呈现需求非常显眼的重要信息。

像是这样，把需要呈现的内容放到div元素内，并且设置它的class为jumbotron：

<div class="jumbotron">
    <div class="container">
        <h1>title</h1>
        <p>content</p>
        <p><a href="#"  class="btn btn-primary btn-lg">Run</a></p>
    </div> 
</div>

如果希望这些内容不是左右充满页面，而是流出空间并加上圆角的话，可以把jumbotron放到一个container内：

<div class="container">
    <div class="jumbotron">
        <h1>title</h1>
        <p>content</p>
        <p><a href="#"  class="btn btn-primary btn-lg">Run</a></p>
    </div>
</div>