780 lines
40 KiB
Plaintext
780 lines
40 KiB
Plaintext
- var theme_customizer = 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
|
||
| Bootstrap Basic Tables
|
||
ol.breadcrumb
|
||
li.breadcrumb-item
|
||
a(href='index.html')
|
||
| Home
|
||
li.breadcrumb-item Tables
|
||
li.breadcrumb-item Bootstrap Tables
|
||
li.breadcrumb-item.active Basic Tables
|
||
.col-sm-6
|
||
include ../../components/bookmark
|
||
// Container-fluid starts
|
||
.container-fluid
|
||
.row
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Basic Table
|
||
span
|
||
| Use a class
|
||
code table
|
||
| to any table.
|
||
.table-responsive
|
||
table.table
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
th(scope='col') Role
|
||
th(scope='col') Country
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Alexander
|
||
td Orton
|
||
td @mdorton
|
||
td Admin
|
||
td USA
|
||
tr
|
||
th(scope='row') 2
|
||
td John Deo
|
||
td Deo
|
||
td @johndeo
|
||
td User
|
||
td USA
|
||
tr
|
||
th(scope='row') 3
|
||
td Randy Orton
|
||
td the Bird
|
||
td @twitter
|
||
td admin
|
||
td UK
|
||
tr
|
||
th(scope='row') 4
|
||
td Randy Mark
|
||
td Ottandy
|
||
td @mdothe
|
||
td user
|
||
td AUS
|
||
tr
|
||
th(scope='row') 5
|
||
td Ram Jacob
|
||
td Thornton
|
||
td @twitter
|
||
td admin
|
||
td IND
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Inverse Table
|
||
span
|
||
| Use a class
|
||
code table-inverse
|
||
| inside table element.
|
||
.table-responsive
|
||
table.table.table-inverse
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
th(scope='col') Role
|
||
th(scope='col') Country
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Alexander
|
||
td Orton
|
||
td @mdorton
|
||
td Admin
|
||
td USA
|
||
tr
|
||
th(scope='row') 2
|
||
td John Deo
|
||
td Deo
|
||
td @johndeo
|
||
td User
|
||
td USA
|
||
tr
|
||
th(scope='row') 3
|
||
td Randy Orton
|
||
td the Bird
|
||
td @twitter
|
||
td admin
|
||
td UK
|
||
tr
|
||
th(scope='row') 4
|
||
td Randy Mark
|
||
td Ottandy
|
||
td @mdothe
|
||
td user
|
||
td AUS
|
||
tr
|
||
th(scope='row') 5
|
||
td Ram Jacob
|
||
td Thornton
|
||
td @twitter
|
||
td admin
|
||
td IND
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Inverse Table with Primary background
|
||
span
|
||
| Use a class
|
||
code .bg-info, .bg-success, .bg-warning and .bg-danger classes.
|
||
| with light text on dark backgrounds inside table element.
|
||
br
|
||
| To set the light background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal
|
||
.table-responsive
|
||
table.table.table-striped.bg-primary
|
||
thead.tbl-strip-thad-bdr
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
th(scope='col') Role
|
||
th(scope='col') Country
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Alexander
|
||
td Orton
|
||
td @mdorton
|
||
td Admin
|
||
td USA
|
||
tr
|
||
th(scope='row') 2
|
||
td John Deo
|
||
td Deo
|
||
td @johndeo
|
||
td User
|
||
td USA
|
||
tr
|
||
th(scope='row') 3
|
||
td Randy Orton
|
||
td the Bird
|
||
td @twitter
|
||
td admin
|
||
td UK
|
||
tr
|
||
th(scope='row') 4
|
||
td Randy Mark
|
||
td Ottandy
|
||
td @mdothe
|
||
td user
|
||
td AUS
|
||
tr
|
||
th(scope='row') 5
|
||
td Ram Jacob
|
||
td Thornton
|
||
td @twitter
|
||
td admin
|
||
td IND
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Hoverable rows
|
||
span
|
||
| Use a class
|
||
code table-hover
|
||
| to enable a hover state on table rows within a
|
||
code tbody
|
||
| .
|
||
.table-responsive
|
||
table.table.table-hover
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
th(scope='col') Role
|
||
th(scope='col') Country
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Alexander
|
||
td Orton
|
||
td @mdorton
|
||
td Admin
|
||
td USA
|
||
tr
|
||
th(scope='row') 2
|
||
td John Deo
|
||
td Deo
|
||
td @johndeo
|
||
td User
|
||
td USA
|
||
tr
|
||
th(scope='row') 3
|
||
td Randy Orton
|
||
td the Bird
|
||
td @twitter
|
||
td admin
|
||
td UK
|
||
tr
|
||
th(scope='row') 4
|
||
td Randy Mark
|
||
td Ottandy
|
||
td @mdothe
|
||
td user
|
||
td AUS
|
||
tr
|
||
th(scope='row') 5
|
||
td Ram Jacob
|
||
td Thornton
|
||
td @twitter
|
||
td admin
|
||
td IND
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Contextual classes
|
||
span
|
||
| Use contextual classes to color table rows or individual cells. you may use Classes
|
||
code table-primary
|
||
| ,
|
||
code table-secondary
|
||
| ,
|
||
code table-success
|
||
| ,
|
||
code table-info
|
||
| ,
|
||
code table-warning
|
||
| ,
|
||
code table-danger
|
||
| ,
|
||
code table-light
|
||
| ,
|
||
code table-active
|
||
| in
|
||
code tr
|
||
.table-responsive
|
||
table.table
|
||
thead
|
||
tr
|
||
th(scope='col') Class
|
||
th(scope='col') Heading
|
||
th(scope='col') Heading
|
||
tbody
|
||
tr.table-primary
|
||
th(scope='row') Primary
|
||
td Cell
|
||
td Cell
|
||
tr.table-secondary
|
||
th(scope='row') Secondary
|
||
td Cell
|
||
td Cell
|
||
tr.table-success
|
||
th(scope='row') Success
|
||
td Cell
|
||
td Cell
|
||
tr.table-info
|
||
th(scope='row') Info
|
||
td Cell
|
||
td Cell
|
||
tr.table-warning
|
||
th(scope='row') Warning
|
||
td Cell
|
||
td Cell
|
||
tr.table-danger
|
||
th(scope='row') Danger
|
||
td Cell
|
||
td Cell
|
||
tr.table-light
|
||
th(scope='row') Light
|
||
td Cell
|
||
td Cell
|
||
tr.table-active
|
||
th(scope='row') Active
|
||
td Cell
|
||
td Cell
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Text or background utilities
|
||
span
|
||
| Regular table background variants are not available with the inverse table, however, you may use Classes
|
||
code bg-dark
|
||
| ,
|
||
code bg-warning
|
||
| ,
|
||
code bg-success
|
||
| ,
|
||
code bg-info
|
||
| ,
|
||
code bg-danger
|
||
| ,
|
||
code bg-primary
|
||
| ,
|
||
code bg-secondary
|
||
| ,
|
||
code bg-light
|
||
| in
|
||
code td
|
||
.table-responsive
|
||
table.table.table-borderedfor
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') Heading
|
||
th(scope='col') Heading
|
||
tbody
|
||
tr.table-active
|
||
td.bg-primary 1
|
||
td.bg-primary primary
|
||
td.bg-primary primary
|
||
tr.table-active
|
||
td.bg-secondary 2
|
||
td.bg-secondary secondary
|
||
td.bg-secondary secondary
|
||
tr
|
||
td.bg-success 3
|
||
td.bg-success success
|
||
td.bg-success success
|
||
tr
|
||
td.bg-info 4
|
||
td.bg-info info
|
||
td.bg-info info
|
||
tr
|
||
td.bg-warning 5
|
||
td.bg-warning warning
|
||
td.bg-warning warning
|
||
tr
|
||
td.bg-danger 6
|
||
td.bg-danger danger
|
||
td.bg-danger danger
|
||
tr.table-active
|
||
td.bg-light 7
|
||
td.bg-light light
|
||
td.bg-light light
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Table head options
|
||
span
|
||
| Similar to tables and dark tables, use the modifier classes
|
||
code .thead-dark
|
||
| to make
|
||
code thead
|
||
| appear light or dark gray.
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table
|
||
thead.thead-dark
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Mark
|
||
td Otto
|
||
td @mdo
|
||
tr
|
||
th(scope='row') 2
|
||
td Jacob
|
||
td Thornton
|
||
td @fat
|
||
tr
|
||
th(scope='row') 3
|
||
td Larry
|
||
td the Bird
|
||
td @twitter
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Table head options
|
||
span
|
||
| Similar to tables and dark tables, use the modifier classes
|
||
code .bg-*
|
||
| and
|
||
code .thead-light
|
||
| to make
|
||
code thead
|
||
| appear light or dark gray.
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table
|
||
thead.thead-light
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Mark
|
||
td Otto
|
||
td @mdo
|
||
tr
|
||
th(scope='row') 2
|
||
td Jacob
|
||
td Thornton
|
||
td @fat
|
||
tr
|
||
th(scope='row') 3
|
||
td Larry
|
||
td the Bird
|
||
td @twitter
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Striped Row
|
||
span
|
||
| Use
|
||
code .table-striped
|
||
| to add zebra-striping to any table row within the
|
||
code
|
||
| . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table.table-striped
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Mark
|
||
td Otto
|
||
td @mdo
|
||
tr
|
||
th(scope='row') 2
|
||
td Jacob
|
||
td Thornton
|
||
td @fat
|
||
tr
|
||
th(scope='row') 3
|
||
td Larry
|
||
td the Bird
|
||
td @twitter
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Striped Row with Inverse Table
|
||
span
|
||
| Use
|
||
code .table-striped
|
||
| to add zebra-striping to any table row within the
|
||
code
|
||
| . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table.table-inverse.table-striped
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Mark
|
||
td Otto
|
||
td @mdo
|
||
tr
|
||
th(scope='row') 2
|
||
td Jacob
|
||
td Thornton
|
||
td @fat
|
||
tr
|
||
th(scope='row') 3
|
||
td Larry
|
||
td the Bird
|
||
td @twitter
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Caption
|
||
span
|
||
| A
|
||
code <caption>
|
||
| functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table
|
||
caption List of users
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') First Name
|
||
th(scope='col') Last Name
|
||
th(scope='col') Username
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Mark
|
||
td Otto
|
||
td @mdo
|
||
tr
|
||
th(scope='row') 2
|
||
td Jacob
|
||
td Thornton
|
||
td @fat
|
||
tr
|
||
th(scope='row') 3
|
||
td Larry
|
||
td the Bird
|
||
td @twitter
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Responsive Tables
|
||
span
|
||
| A
|
||
code <caption>
|
||
| functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 2
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 3
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
.col-sm-12
|
||
.card
|
||
.card-header
|
||
h5 Breckpoint Specific
|
||
span
|
||
| Use
|
||
code .table-responsive{-sm|-md|-lg|-xl}
|
||
| functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table.table-responsive-sm
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 2
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 3
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table.table-responsive-sm
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 2
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 3
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table.table-responsive-sm
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 2
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 3
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
.card-block.row
|
||
.col-sm-12.col-lg-12.col-xl-12
|
||
.table-responsive
|
||
table.table.table-responsive-sm
|
||
thead
|
||
tr
|
||
th(scope='col') #
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
th(scope='col') Table heading
|
||
tbody
|
||
tr
|
||
th(scope='row') 1
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 2
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
tr
|
||
th(scope='row') 3
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
td Table cell
|
||
// Container-fluid Ends
|
||
include ../../components/footer
|
||
include ../../components/footer-files
|