640 lines
39 KiB
Plaintext
640 lines
39 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
|
|
| Table Components
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Tables
|
|
li.breadcrumb-item Bootstrap Tables
|
|
li.breadcrumb-item.active Table Components
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
// Table Row Starts
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 UI Components
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered
|
|
tbody
|
|
tr
|
|
td Button
|
|
td.w-50
|
|
button.btn.btn-primary Default Button
|
|
td
|
|
span
|
|
| Bootstrap includes six predefined button styles, each serving its own semantic purpose.
|
|
tr
|
|
td Round Buttons
|
|
td
|
|
button.btn.btn-pill.btn-primary Default Button
|
|
td
|
|
span
|
|
| Use
|
|
code .btn-pill
|
|
| class to button for Round Buttons.
|
|
tr
|
|
td Button dropdowns
|
|
td
|
|
button.btn.btn-primary.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Primary
|
|
.dropdown-menu
|
|
h6.dropdown-header Dropdown header
|
|
a.dropdown-item(href='javascript:void(0)') Action
|
|
a.dropdown-item(href='javascript:void(0)') Another action
|
|
a.dropdown-item(href='javascript:void(0)') Something else here
|
|
.dropdown-divider
|
|
a.dropdown-item(href='javascript:void(0)') Separated link
|
|
td
|
|
span
|
|
| Use
|
|
code .dropdown-toggle
|
|
| class to button for Dropdown-toggle.
|
|
tr
|
|
td Basic Button group
|
|
td
|
|
.btn-group
|
|
button.btn.btn-primary Primary
|
|
button.btn.btn-secondary Secondary
|
|
button.btn.btn-danger Danger
|
|
button.btn.btn-warning Warning
|
|
td
|
|
span
|
|
| Use
|
|
code btn-group
|
|
| class to button for
|
|
code div
|
|
| .
|
|
tr
|
|
td Buttons with Icon
|
|
td
|
|
button.btn.btn-primary
|
|
i.fa.fa-info-circle
|
|
| Primary
|
|
td
|
|
span
|
|
| Bootstrap includes six predefined button styles, each serving its own semantic purpose.
|
|
tr
|
|
td Icon Button
|
|
td
|
|
button.btn.btn-primary
|
|
i.fa.fa-camera
|
|
td
|
|
span Simple Icon Button
|
|
tr
|
|
td Loading Buttons
|
|
td
|
|
button.btn.btn-primary
|
|
i.fa.fa-spin.fa-spinner.me-2
|
|
| Expand UP
|
|
td
|
|
span Expand Animation Buttons
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Alerts
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered
|
|
tbody
|
|
tr
|
|
td Basic Alert
|
|
td.w-50
|
|
.alert.alert-primary
|
|
p.font-light
|
|
strong Success!
|
|
| Indicates a successful or positive action.
|
|
td
|
|
p
|
|
span
|
|
| Alerts are available for any length of text, as well as an optional dismiss button. Add
|
|
code alert alert-primary
|
|
| ,
|
|
code alert alert-secondary
|
|
| ,
|
|
code alert alert-success
|
|
| ,
|
|
code alert alert-info
|
|
| classes for alert with all theme colors.
|
|
tr
|
|
td Alerts with Links
|
|
td
|
|
.alert.alert-primary
|
|
p.font-light
|
|
strong Success!
|
|
| You should
|
|
a.alert-link(href='javascript:void(0)') read this message
|
|
| .
|
|
td
|
|
p
|
|
span
|
|
| Alerts are available for any length of text, as well as an optional dismiss button. Add
|
|
code alert alert-primary
|
|
| ,
|
|
code alert alert-secondary
|
|
| ,
|
|
code alert alert-success
|
|
| ,
|
|
code alert alert-info
|
|
| classes for alert with all theme colors.
|
|
tr
|
|
td Dismissible Alerts
|
|
td
|
|
.alert.alert-secondary.alert-dismissible.fade.show(role='alert')
|
|
p.font-light
|
|
strong Holy !
|
|
| You can check in on some of those fields below.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
td
|
|
span
|
|
| Add a dismiss button and the
|
|
code alert alert-dismissable
|
|
| class, which adds extra padding to the right of the alert and positions the
|
|
code close
|
|
| a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the
|
|
code a
|
|
| element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.
|
|
tr
|
|
td Alerts with icons
|
|
td
|
|
.alert.alert-primary.inverse.alert-dismissible.fade.show(role='alert')
|
|
i.icofont.icofont-heart-alt
|
|
p
|
|
| Good Morning! Start your day with some alerts.
|
|
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
|
td
|
|
span
|
|
| Add a dismiss button and the
|
|
code alert alert-dismissable
|
|
| class, which adds extra padding to the right of the alert and positions the
|
|
code close
|
|
| a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the
|
|
code a
|
|
| element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .in classes.
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Progressbar
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered.checkbox-td-width
|
|
tbody
|
|
tr
|
|
td Default Progress
|
|
td.w-50
|
|
.progress
|
|
.progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
|
|
td
|
|
span
|
|
| Uses a progress bar with class
|
|
code progress-bar
|
|
| and background color
|
|
code bg-primary, bg-secondary
|
|
| also change
|
|
tr
|
|
td Striped Progress
|
|
td
|
|
.progress
|
|
.progress-bar.progress-bar-striped.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
|
|
td
|
|
span
|
|
| Uses a gradient to create a striped effect class.
|
|
code progress-bar-striped
|
|
tr
|
|
td Progress Sizes
|
|
td
|
|
.progress.lg-progress-bar
|
|
.progress-bar.bg-primary(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
|
|
td
|
|
span
|
|
| Different sized progress. For Default progress, class need
|
|
code lg-progress-bar
|
|
| on div.
|
|
// CHECKBOXES Row Starts
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Checkbox
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered.checkbox-td-width
|
|
tbody
|
|
tr
|
|
td Basic Checkbox
|
|
td.w-50
|
|
input#checkbox1(type='checkbox')
|
|
label(for='checkbox1') Default
|
|
td
|
|
span Basic Checkbox
|
|
tr
|
|
td Default Checkbox Squar
|
|
td
|
|
.checkbox.m-squar
|
|
input#checkbox3(type='checkbox')
|
|
label(for='checkbox3') Default
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code .m-squar
|
|
| checkbox.
|
|
tr
|
|
td Basic Skin Check
|
|
td
|
|
.checkbox.checkbox-dark
|
|
input#checkbox-state-dark(type='checkbox')
|
|
label(for='checkbox-state-dark') Brand state
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code checkbox-dark
|
|
| for this style of checkbox.
|
|
tr
|
|
td Flat Skin Check
|
|
td
|
|
.checkbox.checkbox-solid-primary
|
|
input#solid6(type='checkbox', checked='')
|
|
label(for='solid6') checked
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code checkbox-solid-*
|
|
| ,
|
|
code primary, secondary, success, info, warning, danger
|
|
| for this style of checkbox.
|
|
tr
|
|
td Disable Check
|
|
td
|
|
.checkbox.checkbox-solid-primary
|
|
input#solid2(type='checkbox', disabled='')
|
|
label(for='solid2') Disabled
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code disabled
|
|
| ,
|
|
code primary, secondary, success, info, warning, danger
|
|
| for this style of checkbox disable.
|
|
tr
|
|
td Inline Checkbox
|
|
td
|
|
.form-group.m-b-0.m-checkbox-inline
|
|
.checkbox.checkbox-primary
|
|
input#inline-1(type='checkbox')
|
|
label(for='inline-1') Option 1
|
|
.checkbox.checkbox-secondary
|
|
input#inline-2(type='checkbox')
|
|
label(for='inline-2') Option 1
|
|
.checkbox.checkbox-success
|
|
input#inline-3(type='checkbox')
|
|
label(for='inline-3') Option 1
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code disabled
|
|
| ,
|
|
code primary, secondary, success, info, warning, danger
|
|
| for this style of checkbox disable.
|
|
// CHECKBOXES Row Ends
|
|
// Radio Row Starts
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Radio Buttons
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered.radio-first-col-width
|
|
tbody
|
|
tr
|
|
td Basic Radio Buttons
|
|
td.w-50
|
|
input#radio(type='radio')
|
|
label(for='radio') Default radio
|
|
td
|
|
span Basic Radio Buttons
|
|
tr
|
|
td Default Radio
|
|
td
|
|
.radio.radio-primary
|
|
input#radio1(type='radio', name='radio1', value='option1')
|
|
label(for='radio1') Option 1
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code .radio-*
|
|
| and color
|
|
code .radio-*
|
|
code primary , secondary , success , info
|
|
| on Radio.
|
|
tr
|
|
td Checked Radio
|
|
td
|
|
.radio.radio-primary
|
|
input#radio44(type='radio', name='radio1', value='option1', checked='')
|
|
label(for='radio44') Checked
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code checkbox-dark
|
|
| for this style of checkbox.
|
|
tr
|
|
td Flat Skin Check
|
|
td
|
|
.radio.radio-primary
|
|
input#radio33(type='radio', name='radio1', value='option1', disabled='')
|
|
label(for='radio33') Disabled
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code checkbox-solid-*
|
|
| ,
|
|
code primary, secondary, success, info, warning, danger
|
|
| for this style of checkbox.
|
|
tr
|
|
td Inline Checkbox
|
|
td
|
|
.form-group.m-b-0.m-checkbox-inline
|
|
.radio.radio-primary
|
|
input#radioinline1(type='radio', name='radio1', value='option1')
|
|
label(for='radioinline1') Option 1
|
|
.radio.radio-secondary
|
|
input#radioinline2(type='radio', name='radio1', value='option1')
|
|
label(for='radioinline2') Option 1
|
|
.radio.radio-success
|
|
input#radioinline3(type='radio', name='radio1', value='option1')
|
|
label(for='radioinline3') Option 1
|
|
td
|
|
span
|
|
| Wrap with use
|
|
code disabled
|
|
| ,
|
|
code primary, secondary, success, info, warning, danger, light, dark
|
|
| for this style of checkbox disable.
|
|
// Radio Row Ends
|
|
// Select Row Starts
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Select
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered.checkbox-td-width
|
|
tbody
|
|
tr
|
|
td Single Select
|
|
td.w-50
|
|
select#exampleFormControlSelect45.form-control
|
|
option 1
|
|
option 2
|
|
option 3
|
|
option 4
|
|
option 5
|
|
td
|
|
span Use for basic select control.
|
|
tr
|
|
td Disabled Select Mode
|
|
td
|
|
select#exampleFormControlSelect4.form-control(disabled='')
|
|
option 1
|
|
option 2
|
|
option 3
|
|
option 4
|
|
option 5
|
|
td
|
|
span
|
|
| Use for disabled select control add
|
|
code disabled
|
|
| .
|
|
tr
|
|
td Large Select Mode
|
|
td
|
|
select#exampleFormControlSelect1.form-control.form-control-lg.mb-10
|
|
option 1
|
|
option 2
|
|
option 3
|
|
option 4
|
|
option 5
|
|
select#exampleFormControlSelect3.form-control.form-control-sm.mt-5.mb-10
|
|
option 1
|
|
option 2
|
|
option 3
|
|
option 4
|
|
option 5
|
|
td
|
|
span
|
|
| Use for large and small select control add class
|
|
code form-control-*
|
|
code lg, sm
|
|
| .
|
|
tr
|
|
td Example multiple select
|
|
td
|
|
select#exampleFormControlSelect22.form-control(multiple='')
|
|
option 1
|
|
option 2
|
|
option 3
|
|
option 4
|
|
option 5
|
|
td
|
|
span
|
|
| Use for multi select control add code
|
|
code multiple
|
|
| on select.
|
|
// Select Row Ends
|
|
// Input Row Starts
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Input
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered.checkbox-td-width
|
|
tbody
|
|
tr
|
|
td Default Input text
|
|
td.w-50
|
|
input#exampleFormControlInput1.form-control.input-primary(type='email', placeholder='Input text')
|
|
td
|
|
span Use for basic select control.
|
|
tr
|
|
td Input Hover Color
|
|
td.w-50
|
|
input#exampleFormControlInput2.form-control(type='email', placeholder='Input text')
|
|
td
|
|
span
|
|
| Use for basic input color add class
|
|
code input-air-*
|
|
code primary, secondary, success, info
|
|
| .on input
|
|
// Input Row Ends
|
|
// Badges Row Starts
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Badges
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered
|
|
tbody
|
|
tr
|
|
td.pills-component Basic Pills
|
|
td.w-50
|
|
span.badge.badge-primary Primary
|
|
td
|
|
span
|
|
| Use the
|
|
code .badge
|
|
| class, followed by. with badge color use class
|
|
code .badge-*
|
|
code primary , secondary , success , info, warning, danger, light
|
|
| class within element to create default pill.
|
|
tr
|
|
td Label With Icon
|
|
td.w-50.m-5
|
|
.badge.badge-primary.label-square
|
|
i.fa.fa-paperclip.fa-lg.p-r-5
|
|
span.f-14 Primary Label
|
|
td
|
|
span
|
|
| Use the
|
|
code label-square
|
|
| class with
|
|
code div
|
|
// Badges Row Ends
|
|
// Tooltip Row Starts
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Tooltip Triggers
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered
|
|
tbody
|
|
tr
|
|
td Hover
|
|
td.w-50
|
|
button.btn.btn-primary(type='button', data-original-title='btn btn-link btn-lg', title='Hover') Primary
|
|
td
|
|
span Use data-bs-toggle="tooltip" for hover trigger. This is a default trigger
|
|
tr
|
|
td Link
|
|
td.w-50
|
|
a.btn.btn-primary(href='javascript:void(0)', data-bs-toggle='tooltip', title='', role='button', data-original-title='Hooray!') Link
|
|
td
|
|
span
|
|
| Use
|
|
code a href="javascript:void(0)"
|
|
| for link trigger. This is a link trigger
|
|
tr
|
|
td outline button
|
|
td.w-50
|
|
button.btn.btn-outline-primary(type='button', data-original-title='btn btn-outline-danger-2x', title='') Primary
|
|
td
|
|
span
|
|
| Use
|
|
code btn btn-outline-info
|
|
| for outline trigger. and button bold Border use class
|
|
code btn btn-outline-dark-2x
|
|
// Tooltip Row Ends
|
|
// Switch Row Starts
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 SWITCH
|
|
div
|
|
.card-block.row
|
|
.col-sm-12.col-lg-12.col-xl-12
|
|
.table-responsive
|
|
table.table.table-bordered
|
|
tbody
|
|
tr
|
|
td.pills-component Default Switch
|
|
td.w-50
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state
|
|
td
|
|
span
|
|
| Use class
|
|
code switch
|
|
| for label.
|
|
tr
|
|
td Disable Switch
|
|
td.w-50
|
|
label.switch
|
|
input(type='checkbox', disabled='')
|
|
span.switch-state
|
|
td
|
|
span
|
|
| this Disable Switch
|
|
code disabled
|
|
tr
|
|
td Switch Color
|
|
td.w-50
|
|
.media-body.icon-state
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-primary
|
|
td
|
|
span
|
|
| Use class
|
|
code bg-*
|
|
code Primary , Secondary , Success , Info , Warning , Danger
|
|
| in span with icon show switch
|
|
code icon-state
|
|
| on div.
|
|
tr
|
|
td Switch Outline
|
|
td.w-50
|
|
.media-body.icon-state.switch-outline
|
|
label.switch
|
|
input(type='checkbox', checked='')
|
|
span.switch-state.bg-primary
|
|
td
|
|
span
|
|
| Use class
|
|
code switch-outline
|
|
| on div.
|
|
// Switch Row Ends
|
|
// Table Row Ends
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|