Bootstrap-Jumbotron(1) - 芒果文档

📌 相关文章

📜 Bootstrap-Jumbotron(1)

📅 最后修改于: 2023-12-03 14:59:33.584000 🧑 作者: Mango

Bootstrap-Jumbotron

Jumbotron是Bootstrap提供的一个组件，用于在页面中放置突出的信息块，通常用于展示页面的主要内容或者重要通知等。

用法

Jumbotron组件可以通过<div>元素包裹需要展示的内容来实现，使用class="jumbotron"来标记组件。

<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>
</div>

样式

Jumbotron组件的样式可以通过在各自的<div>元素中添加不同的class来实现，以下是一些常用的样式类：

jumbotron-fluid: 将Jumbotron组件的宽度设置为父元素的宽度，通常在需要让Jumbotron组件填充整个屏幕宽度时使用。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

bg-*: 设置组件的背景颜色，*为颜色名。

<div class="jumbotron bg-danger">
  <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>
</div>

text-*: 设置组件内文本的颜色，*为颜色名。

<div class="jumbotron bg-light text-primary">
  <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>
</div>

高级用法

Jumbotron组件也可以与其他的Bootstrap组件配合使用，以实现更丰富的展示效果。

背景图像

可以使用jumbotron组件的内部容器<div class="container">来放置背景图像。

<div class="jumbotron" style="background-image: url('https://cdn.pixabay.com/photo/2021/04/09/01/26/sunflower-6160246_960_720.jpg')">
  <div class="container">
    <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>
  </div>
</div>

按钮

可以在jumbotron组件内添加Button组件来实现交互效果。

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

总结

Jumbotron组件是Bootstrap提供的一个很好用的突出展示信息的工具，通过简单的配置就可以实现丰富的展示效果。在实际开发中，与其他组件配合使用，可以让页面更生动、更有视觉效果。

# Bootstrap-Jumbotron

`Jumbotron`是`Bootstrap`提供的一个组件，用于在页面中放置突出的信息块，通常用于展示页面的主要内容或者重要通知等。

## 用法

`Jumbotron`组件可以通过`<div>`元素包裹需要展示的内容来实现，使用`class="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>
</div>

样式