update
This commit is contained in:
@@ -0,0 +1,332 @@
|
||||
- var theme_customizer = true;
|
||||
- var sidebar = true;
|
||||
- var slick = true;
|
||||
- var header_slider = true;
|
||||
- var animate = true;
|
||||
- var scrollbar = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
include ../../components/taptop
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper.compact-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-title
|
||||
.row
|
||||
.col-6
|
||||
h4
|
||||
| Grid
|
||||
.col-6
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
svg.stroke-icon
|
||||
use(href='../assets/svg/icon-sprite.svg#stroke-home')
|
||||
li.breadcrumb-item Ui Kits
|
||||
li.breadcrumb-item.active Grid
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Grid Options
|
||||
p.mt-1.f-m-light
|
||||
| Bootstrap grid system allow all six breakpoints, and any breakpoints
|
||||
| you can customize.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table.table.table-bordered.table-striped
|
||||
thead
|
||||
tr
|
||||
th
|
||||
th.text-center
|
||||
| Extra small
|
||||
br
|
||||
small <576px
|
||||
th.text-center
|
||||
| Small
|
||||
br
|
||||
small ≥576px
|
||||
th.text-center
|
||||
| Medium
|
||||
br
|
||||
small ≥768px
|
||||
th.text-center
|
||||
| Large
|
||||
br
|
||||
small ≥992px
|
||||
th.text-center
|
||||
| Extra large
|
||||
br
|
||||
small ≥1200px
|
||||
th.text-center
|
||||
| Extra extra large
|
||||
br
|
||||
small.digits ≥1400px
|
||||
tbody
|
||||
tr
|
||||
th.text-nowrap(scope='row') Grid behavior
|
||||
td Horizontal at all times
|
||||
td(colspan='5') Collapsed to start, horizontal above breakpoints
|
||||
tr
|
||||
th.text-nowrap(scope='row') Max container width
|
||||
td None (auto)
|
||||
td 540px
|
||||
td 720px
|
||||
td 960px
|
||||
td 1140px
|
||||
td 1320px
|
||||
tr
|
||||
th.text-nowrap(scope='row') Class prefix
|
||||
td
|
||||
code .col-
|
||||
td
|
||||
code .col-sm-
|
||||
td
|
||||
code .col-md-
|
||||
td
|
||||
code .col-lg-
|
||||
td
|
||||
code .col-xl-
|
||||
td
|
||||
code .col-xxl-
|
||||
tr
|
||||
th.text-nowrap(scope='row') # of columns
|
||||
td(colspan='6') 12
|
||||
tr
|
||||
th.text-nowrap(scope='row') Gutter width
|
||||
td(colspan='6') 1.5rem (.75rem on left and right)
|
||||
tr
|
||||
th.text-nowrap(scope='row') Nestable
|
||||
td(colspan='6') Yes
|
||||
tr
|
||||
th.text-nowrap(scope='row') Offsets
|
||||
td(colspan='6') Yes
|
||||
tr
|
||||
th.text-nowrap(scope='row') Column ordering
|
||||
td(colspan='6') Yes
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Grid For Column
|
||||
p.mt-1.f-m-light
|
||||
| You may use predefined grid classes. Using
|
||||
code .col-md-*
|
||||
| you can set the grid system.
|
||||
.card-body.grid-showcase
|
||||
.row
|
||||
.col-md-1.text-center
|
||||
span col-md-1
|
||||
.col-md-2.text-center
|
||||
span col-md-2
|
||||
.col-md-2.text-center
|
||||
span col-md-2
|
||||
.col-md-3.text-center
|
||||
span col-md-3
|
||||
.col-md-4.text-center
|
||||
span col-md-4
|
||||
.col-md-5.text-center
|
||||
span col-md-5
|
||||
.col-md-7.text-center
|
||||
span col-md-7
|
||||
.col-md-6.text-center
|
||||
span col-md-6
|
||||
.col-md-6.text-center
|
||||
span col-md-6
|
||||
.col-md-8.text-center
|
||||
span col-md-8
|
||||
.col-md-4.text-center
|
||||
span col-md-4
|
||||
.col-md-9.text-center
|
||||
span col-md-9
|
||||
.col-md-3.text-center
|
||||
span col-md-3
|
||||
.col-md-10.text-center
|
||||
span col-md-10
|
||||
.col-md-2.text-center
|
||||
span col-md-2
|
||||
.col-md-12.text-center
|
||||
span col-md-12
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Vertical Alignment
|
||||
p.mt-1.f-m-light
|
||||
| You can use the
|
||||
code align-items-*
|
||||
| class
|
||||
| to set the Vertical alignment.
|
||||
.card-body.grid-showcase.mb-0
|
||||
.row
|
||||
.col-lg-4
|
||||
.row.grid-vertical.align-items-start.m-1.g-2.bg-light
|
||||
.col-6
|
||||
span.bg-white one column
|
||||
.col-6
|
||||
span.bg-white two column
|
||||
.col-lg-4
|
||||
.row.grid-vertical.align-items-center.m-1.g-2.bg-light
|
||||
.col-6
|
||||
span.bg-white one column
|
||||
.col-6
|
||||
span.bg-white two column
|
||||
.col-lg-4
|
||||
.row.grid-vertical.align-items-end.m-1.g-2.bg-light
|
||||
.col-6
|
||||
span.bg-white one column
|
||||
.col-6
|
||||
span.bg-white two column
|
||||
.card-footer
|
||||
.table-responsive
|
||||
table.w-100
|
||||
tbody
|
||||
tr
|
||||
th Class
|
||||
th Value of the class
|
||||
tr
|
||||
td
|
||||
code .align-items-*
|
||||
td start / center / end / baseline / stretch
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Horizontal Alignment
|
||||
p.mt-1.f-m-light
|
||||
| You can use the
|
||||
code justify-content-*
|
||||
| class
|
||||
| to set the horizontal alignment.
|
||||
.card-body.grid-showcase.grid-align
|
||||
.row.justify-content-start.bg-light
|
||||
.col-5
|
||||
span.bg-white.text-dark One column
|
||||
.col-5
|
||||
span.bg-white.text-dark Two column
|
||||
.row.justify-content-center.bg-light
|
||||
.col-5
|
||||
span.bg-white.text-dark One column
|
||||
.col-5
|
||||
span.bg-white.text-dark Two column
|
||||
.row.justify-content-end.bg-light
|
||||
.col-5
|
||||
span.bg-white.text-dark One column
|
||||
.col-5
|
||||
span.bg-white.text-dark Two column
|
||||
.card-footer
|
||||
.table-responsive
|
||||
table.w-100
|
||||
tbody
|
||||
tr
|
||||
th Class
|
||||
th Value of the class
|
||||
tr
|
||||
td
|
||||
code .justify-content-*
|
||||
td
|
||||
| start / center / end / around / between
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Nesting
|
||||
p.mt-1.f-m-light
|
||||
| To nest your content with the default grid, add a new
|
||||
code .row
|
||||
| and set
|
||||
| of
|
||||
code .col-sm-*
|
||||
| columns within an existing
|
||||
code .col-sm-*
|
||||
| column.
|
||||
.card-body.grid-showcase
|
||||
.row.g-3
|
||||
.col-3
|
||||
span Level 1: .col-3
|
||||
.col-9
|
||||
span.pb-0
|
||||
.row.g-2
|
||||
.col-5
|
||||
span.border.border-2 Level 2: .col-5
|
||||
.col-7
|
||||
span.border.border-2 Level 2: .col-7
|
||||
.col-8
|
||||
span.pb-0
|
||||
.row.g-2
|
||||
.col-sm-2.col-4
|
||||
span.border.border-2 Level 1: .col-2
|
||||
.col-sm-10.col-8
|
||||
span.border.border-2 Level 1: .col-10
|
||||
.col-4
|
||||
span Level 2: .col-4
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Order
|
||||
p.mt-1.f-m-light
|
||||
| Using
|
||||
code .order
|
||||
| class, you can set the order position.
|
||||
.card-body.grid-showcase
|
||||
.row.g-2
|
||||
.col-3.order-3
|
||||
span First Item (order-3)
|
||||
.col-5.order-first
|
||||
span Second Item (order-first)
|
||||
.col-4.order-last
|
||||
span Third Item (order-last)
|
||||
.col-3.order-2
|
||||
span Fourth Item (order-2)
|
||||
.col-sm-2.col-4.order-5
|
||||
span fifth Item (order-5)
|
||||
.col-sm-6.col-4.order-4
|
||||
span sixth Item (order-4)
|
||||
.card-footer
|
||||
.table-responsive
|
||||
table.w-100
|
||||
tbody
|
||||
tr
|
||||
th Class
|
||||
th Value of the class
|
||||
tr
|
||||
td
|
||||
code .order-*
|
||||
td first / 2 / 3 / 4 / 5 / last
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h4 Offset
|
||||
p.mt-1.f-m-light
|
||||
| You can offset the grid column using
|
||||
code .offset-
|
||||
| grid class.
|
||||
.card-body.grid-showcase
|
||||
.row.g-2
|
||||
.col-sm-5.col-4.offset-sm-3.offset-2
|
||||
span col-5 offset-3
|
||||
.col-sm-2.col-4.offset-sm-2.offset-1
|
||||
span col-2 offset-2
|
||||
.col-sm-4.col-5.offset-2
|
||||
span col-4 offset-2
|
||||
.col-sm-3.col-4.offset-sm-2.offset-1
|
||||
span col-3 offset-2
|
||||
.card-footer
|
||||
.table-responsive
|
||||
table.w-100
|
||||
tbody
|
||||
tr
|
||||
th Class
|
||||
th Value of the class
|
||||
tr
|
||||
td
|
||||
code .offset-*
|
||||
td 1 / 2 / ... / 11 / 12
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
Reference in New Issue
Block a user