美文网首页
Bootstrap组件 - 超大屏幕、页头

Bootstrap组件 - 超大屏幕、页头

作者: 蝴蝶结199007 | 来源:发表于2017-06-15 18:07 被阅读18次

超大屏幕
.jumbotron,这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,请把此组件放在所有 .container 元素的外面,并在组件内部添加一个 .container 元素。

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

页头
.page-header,页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

相关文章

网友评论

      本文标题:Bootstrap组件 - 超大屏幕、页头

      本文链接:https://www.haomeiwen.com/subject/qteuqxtx.html