331 lines
17 KiB
Plaintext
331 lines
17 KiB
Plaintext
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Grid
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Base
|
|
li.breadcrumb-item.active Grid
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid.grid-wrrapper
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Grid Options
|
|
span Bootstrap grid allows building an equal height flexbile blocks easily
|
|
.card-body
|
|
p
|
|
| While Bootstrap uses
|
|
code em
|
|
| or
|
|
code rem
|
|
| for defining most sizes,
|
|
code px
|
|
| are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the
|
|
a(href='javascript:void(0)') font size
|
|
| .
|
|
.table-responsive
|
|
table.table.table-bordered.table-striped
|
|
thead
|
|
tr
|
|
th
|
|
th.text-center
|
|
| Extra small
|
|
br
|
|
small.digits <576px
|
|
th.text-center
|
|
| Small
|
|
br
|
|
small.digits ≥576px
|
|
th.text-center
|
|
| Medium
|
|
br
|
|
small.digits ≥768px
|
|
th.text-center
|
|
| Large
|
|
br
|
|
small.digits ≥992px
|
|
th.text-center
|
|
| Extra large
|
|
br
|
|
small.digits ≥1200px
|
|
tbody
|
|
tr
|
|
th.text-nowrap(scope='row') Grid behavior
|
|
td Horizontal at all times
|
|
td(colspan='4') Collapsed to start, horizontal above breakpoints
|
|
tr
|
|
th.text-nowrap(scope='row') Max container width
|
|
td None (auto)
|
|
td.digits 540px
|
|
td.digits 720px
|
|
td.digits 960px
|
|
td.digits 1140px
|
|
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-
|
|
tr
|
|
th.text-nowrap(scope='row') # of columns
|
|
td(colspan='5') 12
|
|
tr
|
|
th.text-nowrap(scope='row') Gutter width
|
|
td(colspan='5') 30px (15px on each side of a column)
|
|
tr
|
|
th.text-nowrap(scope='row') Nestable
|
|
td(colspan='5') Yes
|
|
tr
|
|
th.text-nowrap(scope='row') Offsets
|
|
td(colspan='5') Yes
|
|
tr
|
|
th.text-nowrap(scope='row') Column ordering
|
|
td(colspan='5') Yes
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Grid Column
|
|
.card-body.grid-showcase
|
|
p
|
|
| Using a single set of
|
|
code .col-md-*
|
|
| grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any
|
|
code .row
|
|
| .
|
|
.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.pb-0
|
|
h5 Setting one column width
|
|
.card-body.grid-showcase
|
|
p
|
|
| Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
|
|
.row
|
|
.col
|
|
span 1 of 3
|
|
.col-6
|
|
span 2 of 3 (wider)
|
|
.col
|
|
span 3 of 3
|
|
.row
|
|
.col
|
|
span 1 of 3
|
|
.col-5
|
|
span 2 of 3 (wider)
|
|
.col
|
|
span 3 of 3
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Vertical alignment
|
|
.card-body.grid-showcase.grid-align
|
|
p Use flexbox alignment utilities to vertically and horizontally align columns.
|
|
.row
|
|
.col.align-self-start
|
|
span One of three columns
|
|
.col.align-self-center
|
|
span One of three columns
|
|
.col.align-self-end
|
|
span One of three columns
|
|
.row.align-items-start
|
|
.col
|
|
span One of three columns
|
|
.col
|
|
span One of three columns
|
|
.col
|
|
span One of three columns
|
|
.row.align-items-center
|
|
.col
|
|
span One of three columns
|
|
.col
|
|
span One of three columns
|
|
.col
|
|
span One of three columns
|
|
.row.align-items-end
|
|
.col
|
|
span One of three columns
|
|
.col
|
|
span One of three columns
|
|
.col
|
|
span One of three columns
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Horizontal alignment
|
|
.card-body.grid-showcase.grid-align
|
|
p Use flexbox alignment utilities to vertically and horizontally align columns.
|
|
.row.justify-content-start
|
|
.col-4
|
|
span One of two columns
|
|
.col-4
|
|
span One of two columns
|
|
.row.justify-content-center
|
|
.col-4
|
|
span One of two columns
|
|
.col-4
|
|
span One of two columns
|
|
.row.justify-content-end
|
|
.col-4
|
|
span One of two columns
|
|
.col-4
|
|
span One of two columns
|
|
.row.justify-content-around
|
|
.col-4
|
|
span One of two columns
|
|
.col-4
|
|
span One of two columns
|
|
.row.justify-content-between
|
|
.col-4
|
|
span One of two columns
|
|
.col-4
|
|
span One of two columns
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Nesting Column
|
|
.card-body.grid-showcase
|
|
p Use flexbox alignment utilities to vertically and horizontally align columns.
|
|
.row
|
|
.col-sm-9
|
|
span Level 1: .col-sm-9
|
|
.row
|
|
.col-8.col-sm-6
|
|
span Level 2: .col-8 .col-sm-6
|
|
.col-4.col-sm-6
|
|
span Level 2: .col-4 .col-sm-6
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Order
|
|
.card-body.grid-showcase
|
|
p
|
|
| Use
|
|
code .order-
|
|
| classes for controlling the
|
|
strong visual order
|
|
| of your content. These classes are responsive, so you can set the
|
|
code order
|
|
| by breakpoint (e.g.,
|
|
code .order-1.order-md-2
|
|
| ). Includes support for
|
|
code 1
|
|
| through
|
|
code 12
|
|
| across all five grid tiers.
|
|
.row
|
|
.col
|
|
span First, but unordered
|
|
.col.order-12
|
|
span Second, but last
|
|
.col.order-1
|
|
span Third, but first
|
|
.row
|
|
.col.order-last
|
|
span First, but last
|
|
.col
|
|
span Second, but unordered
|
|
.col.order-first
|
|
span Third, but first
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Offset
|
|
.card-body.grid-showcase
|
|
p
|
|
| Move columns to the right using
|
|
code .offset-md-*
|
|
| classes. These classes increase the left margin of a column by
|
|
code *
|
|
| columns. For example,
|
|
code .offset-md-4
|
|
| moves
|
|
code .col-md-4
|
|
| over four columns.
|
|
.row
|
|
.col-md-4
|
|
span .col-md-4
|
|
.col-md-4.offset-md-4
|
|
span .col-md-4 .offset-md-4
|
|
.row
|
|
.col-md-3.offset-md-3
|
|
span .col-md-3 .offset-md-3
|
|
.col-md-3.offset-md-3
|
|
span .col-md-3 .offset-md-3
|
|
.row
|
|
.col-md-6.offset-md-3
|
|
span .col-md-6 .offset-md-3
|
|
.row
|
|
.col-sm-5.col-md-6
|
|
span .col-sm-5 .col-md-6
|
|
.col-sm-5.offset-sm-2.col-md-6.offset-md-0
|
|
span .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
|
|
.row
|
|
.col-sm-6.col-md-5.col-lg-6
|
|
span .col-sm-6 .col-md-5 .col-lg-6
|
|
.col-sm-6.col-md-5.offset-md-2.col-lg-6.offset-lg-0
|
|
span .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|