333 lines
14 KiB
Plaintext
333 lines
14 KiB
Plaintext
- 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
|