sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor(Jumbotrons): view rearrange

Browse Source
This commit is contained in:
xidedix
2018-05-24 20:39:55 +02:00
parent 83fde96030
commit 26796fb284
1 changed files with 78 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Jumbotrons.vue
+78 -68
View File
@@ -1,74 +1,84 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<b-card <b-row>
header-tag="header" <b-col>
footer-tag="footer"> <b-card
<div slot="header"> header-tag="header"
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong> footer-tag="footer">
<div class="card-header-actions"> <div slot="header">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank"> <i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
<small class="text-muted">docs</small> <div class="card-header-actions">
</a> <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
</div> <small class="text-muted">docs</small>
</div> </a>
<div> </div>
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2"> </div>
<p>For more information visit website</p> <div>
<b-btn variant="primary" href="#">More Info</b-btn> <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
</b-jumbotron> <p>For more information visit website</p>
</div> <b-btn variant="primary" href="#">More Info</b-btn>
</b-card> </b-jumbotron>
<b-card </div>
header-tag="header" </b-card>
footer-tag="footer"> </b-col>
<div slot="header"> <b-col>
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong> <b-card
<small>with slots</small> header-tag="header"
</div> footer-tag="footer">
<div> <div slot="header">
<b-jumbotron> <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
<template slot="header"> <small>with slots</small>
Bootstrap 4 </div>
</template> <div>
<template slot="lead"> <b-jumbotron>
This is a simple hero unit, a simple jumbotron-style component for <template slot="header">
calling extra attention to featured content or information. Bootstrap 4
</template> </template>
<hr class="my-4"> <template slot="lead">
<p> This is a simple hero unit, a simple jumbotron-style component for
It uses utility classes for typography and spacing to space content calling extra attention to featured content or information.
out within the larger container. </template>
</p> <hr class="my-4">
<b-btn variant="primary" href="#">Do Something</b-btn> <p>
<b-btn variant="success" href="#">Do Something Else</b-btn> It uses utility classes for typography and spacing to space content
</b-jumbotron> out within the larger container.
</div> </p>
</b-card> <b-btn variant="primary" href="#">Do Something</b-btn>
<b-card <b-btn variant="success" href="#">Do Something Else</b-btn>
header-tag="header" </b-jumbotron>
footer-tag="footer"> </div>
<div slot="header"> </b-card>
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong> </b-col>
<small>variants</small> </b-row>
</div> <b-row>
<div> <b-col>
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark"> <b-card
<template slot="header"> header-tag="header"
Bootstrap 4 footer-tag="footer">
</template> <div slot="header">
<template slot="lead"> <i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
This is a simple hero unit, a simple jumbotron-style component for <small>variants</small>
calling extra attention to featured content or information. </div>
</template> <div>
<hr class="my-4"> <b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
<p> <template slot="header">
It uses utility classes for typography and spacing to space content Bootstrap 4
out within the larger container. </template>
</p> <template slot="lead">
</b-jumbotron> This is a simple hero unit, a simple jumbotron-style component for
</div> calling extra attention to featured content or information.
</b-card> </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>
</div> </div>
</template> </template>