woothu
83 lines
2.9 KiB
Vue
83 lines
2.9 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div class="animated fadeIn">
|
|
<CRow>
|
|
<CCol>
|
|
<CCard>
|
|
<CCardHeader 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>
|
|
</CCardHeader>
|
|
<div>
|
|
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
|
<p>For more information visit website</p>
|
|
<CButton variant="primary" href="#">More Info</CButton>
|
|
</CJumbotron>
|
|
</div>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol>
|
|
<CCard>
|
|
<CCardHeader slot="header">
|
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
|
<small>with slots</small>
|
|
</CCardHeader>
|
|
<div>
|
|
<CJumbotron header="Bootstrap 4" lead="">
|
|
<p slot="lead" 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>
|
|
<CButton variant="primary" href="#">Do Something</CButton>
|
|
<CButton variant="success" href="#">Do Something Else</CButton>
|
|
</CJumbotron>
|
|
</div>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
<CRow>
|
|
<CCol>
|
|
<CCard>
|
|
<CCardHeader slot="header">
|
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
|
<small>variants</small>
|
|
</CCardHeader>
|
|
<div>
|
|
<CJumbotron variant="info"
|
|
text-variant="white"
|
|
border-variant="dark"
|
|
header="Bootstrap 4">
|
|
|
|
<p slot="lead" 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>
|
|
</CJumbotron>
|
|
</div>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'jumbotrons'
|
|
}
|
|
</script>
|