2016-01-06 19:11:28 -05:00
|
|
|
.well.container-fluid
|
|
|
|
|
h1 Bootstrap CSS
|
|
|
|
|
|
|
|
|
|
.row
|
|
|
|
|
.col-sm-6
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#tables.panel-title(href="#tables") Tables
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
mixin table-content
|
|
|
|
|
tr
|
|
|
|
|
th #
|
|
|
|
|
th First Name
|
|
|
|
|
th Last Name
|
|
|
|
|
th Username
|
|
|
|
|
tr
|
|
|
|
|
th 1
|
|
|
|
|
td Mark
|
|
|
|
|
td Otto
|
|
|
|
|
td @mdo
|
|
|
|
|
tr
|
|
|
|
|
th 2
|
|
|
|
|
td Jacob
|
|
|
|
|
td Thornton
|
|
|
|
|
td @fat
|
|
|
|
|
tr
|
|
|
|
|
th 3
|
|
|
|
|
td Larry
|
|
|
|
|
td the Bird
|
|
|
|
|
td @twitter
|
|
|
|
|
|
|
|
|
|
h3 Basic
|
|
|
|
|
table.table
|
|
|
|
|
+table-content
|
|
|
|
|
|
|
|
|
|
h3 Bordered
|
|
|
|
|
table.table.table-bordered
|
|
|
|
|
+table-content
|
|
|
|
|
|
|
|
|
|
h3 Striped
|
|
|
|
|
table.table.table-striped
|
|
|
|
|
+table-content
|
|
|
|
|
|
|
|
|
|
.col-sm-6
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#tables.panel-title(href="#tables") Tables
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
|
|
|
|
|
h3 Hover
|
|
|
|
|
table.table.table-hover
|
|
|
|
|
+table-content
|
|
|
|
|
|
|
|
|
|
h3 Condensed
|
|
|
|
|
table.table.table-condensed
|
|
|
|
|
+table-content
|
|
|
|
|
|
|
|
|
|
h3 Context
|
|
|
|
|
table.table
|
|
|
|
|
tr.active
|
|
|
|
|
td Active
|
|
|
|
|
tr.success
|
|
|
|
|
td Success
|
|
|
|
|
tr.info
|
|
|
|
|
td Info
|
|
|
|
|
tr.warning
|
|
|
|
|
td Warning
|
|
|
|
|
tr.danger
|
|
|
|
|
td Danger
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#headers.panel-title(href="#headers") Headers
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
h1 Header 1
|
|
|
|
|
small.spl secondary text
|
|
|
|
|
h2 Header 2
|
|
|
|
|
small.spl secondary text
|
|
|
|
|
h3 Header 3
|
|
|
|
|
small.spl secondary text
|
|
|
|
|
h4 Header 4
|
|
|
|
|
small.spl secondary text
|
|
|
|
|
h5 Header 5
|
|
|
|
|
small.spl secondary text
|
|
|
|
|
h6 Header 6
|
|
|
|
|
small.spl secondary text
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#user-input.panel-title(href="#user-input") User input
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
kbd ctrl + ,
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#horizontal-rule.panel-title(href="#horizontal-rule") Horizontal Rule
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
div Text above
|
|
|
|
|
hr
|
|
|
|
|
div Text below
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#forms.panel-title(href="#forms") Forms
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
h3 Default
|
|
|
|
|
.form
|
|
|
|
|
.form-group
|
|
|
|
|
label.control-label Input
|
|
|
|
|
input.form-control
|
|
|
|
|
|
|
|
|
|
.form-group
|
|
|
|
|
label.control-label Textarea
|
|
|
|
|
textarea.form-control
|
|
|
|
|
.help-block Help block
|
|
|
|
|
|
|
|
|
|
.form-group
|
|
|
|
|
label.control-label Select
|
|
|
|
|
select.form-control
|
|
|
|
|
option Option 1
|
|
|
|
|
option Option 2
|
|
|
|
|
|
|
|
|
|
.form-group
|
|
|
|
|
label Disabled
|
|
|
|
|
input.form-control(disabled=true)
|
|
|
|
|
|
|
|
|
|
.form-group.has-error
|
|
|
|
|
label.control-label Validation error
|
|
|
|
|
input.form-control
|
|
|
|
|
|
|
|
|
|
.form-group
|
|
|
|
|
label Large input
|
|
|
|
|
input.form-control.input-lg
|
|
|
|
|
|
|
|
|
|
.form-group
|
|
|
|
|
label Small input
|
|
|
|
|
input.form-control.input-sm
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#buttons.panel-title(href="#buttons") Buttons
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
div
|
|
|
|
|
button.btn.btn-default Default
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-primary Primary
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-success Success
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-info Info
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-warning Warning
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-danger Danger
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-default(disabled=true) Disabled
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
hr
|
|
|
|
|
|
|
|
|
|
div
|
|
|
|
|
button.btn.btn-default.btn-lg Large
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-default Default
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-default.btn-sm Small
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-default.btn-xs Extra small
|
|
|
|
|
|
|
|
|
|
hr
|
|
|
|
|
|
|
|
|
|
div
|
|
|
|
|
button.btn.btn-default.btn-illustrated Default illustrated
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-primary.btn-illustrated Primary illustrated
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-success.btn-illustrated Success illustrated
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-info.btn-illustrated Info illustrated
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-warning.btn-illustrated Warning illustrated
|
|
|
|
|
span.spr
|
|
|
|
|
button.btn.btn-danger.btn-illustrated Danger illustrated
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#contextual-text.panel-title(href="#contextual-text") Contextual text
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
p.text-muted Muted text
|
|
|
|
|
p.text-primary Primary text
|
|
|
|
|
p.text-success Success text
|
|
|
|
|
p.text-info Info text
|
|
|
|
|
p.text-warning Warning text
|
|
|
|
|
p.text-danger Danger text
|
|
|
|
|
|
|
|
|
|
h1 Bootstrap Components
|
|
|
|
|
|
|
|
|
|
.row
|
|
|
|
|
.col-sm-3
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#dropdowns.panel-title(href="#dropdowns") Dropdowns
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
.btn-group
|
|
|
|
|
button.btn.btn-default.dropdown-toggle(data-toggle="dropdown") Dropdown Button
|
|
|
|
|
ul.dropdown-menu
|
|
|
|
|
li
|
|
|
|
|
a Action
|
|
|
|
|
li
|
|
|
|
|
a Another action
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#navs.panel-title(href="#navs") Navs
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
ul.nav.nav-tabs
|
|
|
|
|
li.active
|
|
|
|
|
a Home
|
|
|
|
|
li
|
|
|
|
|
a Profile
|
|
|
|
|
li
|
|
|
|
|
a Message
|
|
|
|
|
|
|
|
|
|
hr
|
|
|
|
|
|
|
|
|
|
ul.nav.nav-pills
|
|
|
|
|
li.active
|
|
|
|
|
a Home
|
|
|
|
|
li
|
|
|
|
|
a Profile
|
|
|
|
|
li
|
|
|
|
|
a Message
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#navbars.panel-title(href="#navbars") Navbars
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
nav.navbar.navbar-default
|
|
|
|
|
.container-fluid
|
|
|
|
|
.navbar-header
|
|
|
|
|
button.navbar-toggle.collapsed(data-toggle="collapse", data-target="#main-nav")
|
|
|
|
|
span.glyphicon.glyphicon-option-horizontal
|
|
|
|
|
a.navbar-brand Brand
|
|
|
|
|
|
|
|
|
|
.collapse.navbar-collapse#main-nav
|
|
|
|
|
ul.nav.navbar-nav
|
|
|
|
|
li.active
|
|
|
|
|
a Link
|
|
|
|
|
li
|
|
|
|
|
a Link
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#breadcrumbs.panel-title(href="#breadcrumbs") Breadcrumbs
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
ol.breadcrumb
|
|
|
|
|
li Home
|
|
|
|
|
li Library
|
|
|
|
|
li.active Data
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#labels.panel-title(href="#labels") Labels
|
|
|
|
|
.panel-body
|
|
|
|
|
span.label.label-default default
|
|
|
|
|
span.spr
|
|
|
|
|
span.label.label-primary primary
|
|
|
|
|
span.spr
|
|
|
|
|
span.label.label-success success
|
|
|
|
|
span.spr
|
|
|
|
|
span.label.label-info info
|
|
|
|
|
span.spr
|
|
|
|
|
span.label.label-warning warning
|
|
|
|
|
span.spr
|
|
|
|
|
span.label.label-danger danger
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#alerts.panel-title(href="#alerts") Alerts
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
.alert.alert-success Success
|
|
|
|
|
.alert.alert-info Info
|
|
|
|
|
.alert.alert-warning Warning
|
|
|
|
|
.alert.alert-danger Danger
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#progress-bars.panel-title(href="#progress-bars") Progress Bars
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
strong Default
|
|
|
|
|
.progress
|
|
|
|
|
.progress-bar(style="width: 50%")
|
|
|
|
|
|
|
|
|
|
strong Striped Active
|
|
|
|
|
.progress.progress-striped.active
|
|
|
|
|
.progress-bar(style="width: 50%")
|
|
|
|
|
|
|
|
|
|
strong Contextual
|
|
|
|
|
.progress
|
|
|
|
|
.progress-bar.progress-bar-success(style="width: 25%") Success
|
|
|
|
|
.progress-bar.progress-bar-info(style="width: 25%") Info
|
|
|
|
|
.progress-bar.progress-bar-warning(style="width: 25%") Warning
|
|
|
|
|
.progress-bar.progress-bar-danger(style="width: 25%") Danger
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#list-groups.panel-title(href="#list-groups") List Groups
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
ul.list-group
|
|
|
|
|
li.list-group-item List group item 1
|
|
|
|
|
li.list-group-item List group item 2
|
|
|
|
|
li.list-group-item List group item 3
|
|
|
|
|
|
|
|
|
|
.panel.panel-info
|
|
|
|
|
.panel-heading
|
|
|
|
|
.panel-title Info Panel w/Title
|
|
|
|
|
.panel-body And body
|
|
|
|
|
.panel-footer And footer
|
|
|
|
|
|
|
|
|
|
.panel.panel-primary
|
|
|
|
|
.panel-heading
|
|
|
|
|
.panel-title Primary Panel w/Title
|
|
|
|
|
.panel-body And body
|
|
|
|
|
.panel-footer And footer
|
|
|
|
|
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
.panel-title Default Panel w/Title
|
|
|
|
|
.panel-body And body
|
|
|
|
|
.panel-footer And footer
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-success
|
|
|
|
|
.panel-heading
|
|
|
|
|
.panel-title Success Panel w/Title
|
|
|
|
|
.panel-body And body
|
|
|
|
|
.panel-footer And footer
|
|
|
|
|
|
|
|
|
|
.panel.panel-warning
|
|
|
|
|
.panel-heading
|
|
|
|
|
.panel-title warning Panel w/Title
|
|
|
|
|
.panel-body And body
|
|
|
|
|
.panel-footer And footer
|
|
|
|
|
|
|
|
|
|
.panel.panel-danger
|
|
|
|
|
.panel-heading
|
|
|
|
|
.panel-title Danger Panel w/Title
|
|
|
|
|
.panel-body And body
|
|
|
|
|
.panel-footer And footer
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#wells.panel-title(href="#wells") Wells
|
|
|
|
|
|
|
|
|
|
.panel-body
|
|
|
|
|
.well Well!
|
|
|
|
|
.well.well-lg Large well!
|
|
|
|
|
.well.well-sm Small well!
|
|
|
|
|
|
|
|
|
|
h1 Bootstrap JavaScript
|
|
|
|
|
|
|
|
|
|
.row
|
|
|
|
|
.col-sm-6
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#modals.panel-title(href="#modals") Default Modal
|
|
|
|
|
|
|
|
|
|
.panel-body(style="background: lightgrey")#modal-1
|
|
|
|
|
include /templates/core/modal-base
|
|
|
|
|
|
|
|
|
|
.col-sm-6
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a.panel-title Plain Modal
|
|
|
|
|
|
|
|
|
|
.panel-body(style="background: lightgrey")#modal-2
|
|
|
|
|
include /templates/core/modal-base
|
|
|
|
|
|
|
|
|
|
.row
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#tooltips.panel-title(href="#tooltips") Tooltips
|
|
|
|
|
|
|
|
|
|
.panel-body
|
2016-01-06 19:33:50 -05:00
|
|
|
button#tooltip.btn.btn-default(title="tooltip text!", data-placement="right", data-trigger="click") Button w/Tooltip
|
2016-01-06 19:11:28 -05:00
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#popovers.panel-title(href="#popovers") Popovers
|
|
|
|
|
|
|
|
|
|
.panel-body
|
2016-01-06 19:33:50 -05:00
|
|
|
button#popover.btn.btn-default(title="Popover title" data-content="Popover content" data-trigger="click") Button w/Popover
|
2016-01-06 19:11:28 -05:00
|
|
|
|
|
|
|
|
|
|
|
|
|
h1 jQuery UI
|
|
|
|
|
|
|
|
|
|
.row
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#autocomplete.panel-title(href="#autocomplete") Autocomplete
|
|
|
|
|
|
|
|
|
|
.panel-body
|
2016-01-06 19:33:50 -05:00
|
|
|
input#tags
|
2016-01-06 19:11:28 -05:00
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#slider.panel-title(href="#slider") Slider
|
|
|
|
|
|
|
|
|
|
.panel-body
|
2016-01-06 19:33:50 -05:00
|
|
|
#slider-example
|
2016-01-06 19:11:28 -05:00
|
|
|
|
|
|
|
|
h1 Other
|
|
|
|
|
|
|
|
|
|
.row
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#gems.panel-title(href="#gems") Gems
|
|
|
|
|
.panel-body
|
|
|
|
|
.gem.gem-20
|
|
|
|
|
.gem.gem-25
|
|
|
|
|
.gem.gem-30
|
|
|
|
|
.gem.gem-40
|
|
|
|
|
.gem.gem-60
|
|
|
|
|
|
|
|
|
|
.col-sm-3
|
|
|
|
|
.panel.panel-default
|
|
|
|
|
.panel-heading
|
|
|
|
|
a#no-border-image.panel-title(href="#no-border-image") No Border Image
|
|
|
|
|
|
|
|
|
|
.panel-body
|
