xidedix
92 lines
3.1 KiB
Vue
92 lines
3.1 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div class="animated fadeIn">
|
|
<b-row>
|
|
<b-col>
|
|
<b-card
|
|
header-tag="header"
|
|
footer-tag="footer">
|
|
<div slot="header">
|
|
<i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
|
|
<div class="card-header-actions">
|
|
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
|
<small class="text-muted">docs</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
|
<p>For more information visit website</p>
|
|
<b-btn variant="primary" href="#">More Info</b-btn>
|
|
</b-jumbotron>
|
|
</div>
|
|
</b-card>
|
|
</b-col>
|
|
<b-col>
|
|
<b-card
|
|
header-tag="header"
|
|
footer-tag="footer">
|
|
<div slot="header">
|
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
|
<small>with slots</small>
|
|
</div>
|
|
<div>
|
|
<b-jumbotron>
|
|
<template slot="header">
|
|
Bootstrap 4
|
|
</template>
|
|
<template slot="lead">
|
|
This is a simple hero unit, a simple jumbotron-style component for
|
|
calling extra attention to featured content or information.
|
|
</template>
|
|
<hr class="my-4">
|
|
<p>
|
|
It uses utility classes for typography and spacing to space content
|
|
out within the larger container.
|
|
</p>
|
|
<b-btn variant="primary" href="#">Do Something</b-btn>
|
|
<b-btn variant="success" href="#">Do Something Else</b-btn>
|
|
</b-jumbotron>
|
|
</div>
|
|
</b-card>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row>
|
|
<b-col>
|
|
<b-card
|
|
header-tag="header"
|
|
footer-tag="footer">
|
|
<div slot="header">
|
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
|
<small>variants</small>
|
|
</div>
|
|
<div>
|
|
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
|
|
<template slot="header">
|
|
Bootstrap 4
|
|
</template>
|
|
<template slot="lead">
|
|
This is a simple hero unit, a simple jumbotron-style component for
|
|
calling extra attention to featured content or information.
|
|
</template>
|
|
<hr class="my-4">
|
|
<p>
|
|
It uses utility classes for typography and spacing to space content
|
|
out within the larger container.
|
|
</p>
|
|
</b-jumbotron>
|
|
</div>
|
|
</b-card>
|
|
</b-col>
|
|
</b-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'jumbotrons'
|
|
}
|
|
</script>
|
|
|