352 lines
12 KiB
Plaintext
352 lines
12 KiB
Plaintext
extends ../_bootstrap
|
|
append styles
|
|
// Bootstrap theme
|
|
+bootswatch("cerulean")
|
|
// Custom styles for this template
|
|
link(href='../css/theme.css', rel='stylesheet')
|
|
block body
|
|
// Fixed navbar
|
|
nav.navbar.navbar-default.navbar-fixed-top
|
|
.container
|
|
.navbar-header
|
|
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
|
|
span.sr-only Toggle navigation
|
|
span.icon-bar
|
|
span.icon-bar
|
|
span.icon-bar
|
|
a.navbar-brand(href='#') Bootswatch theme
|
|
#navbar.navbar-collapse.collapse
|
|
ul.nav.navbar-nav
|
|
li.active
|
|
a(href='#') Home
|
|
li
|
|
a(href='#about') About
|
|
li
|
|
a(href='#contact') Contact
|
|
li.dropdown
|
|
a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
|
|
| Dropdown
|
|
span.caret
|
|
ul.dropdown-menu(role='menu')
|
|
li
|
|
a(href='#') Action
|
|
li
|
|
a(href='#') Another action
|
|
li
|
|
a(href='#') Something else here
|
|
li.divider
|
|
li.dropdown-header Nav header
|
|
li
|
|
a(href='#') Separated link
|
|
li
|
|
a(href='#') One more separated link
|
|
|
|
.container.theme-showcase(role='main')
|
|
// Main jumbotron for a primary marketing message or call to action
|
|
.jumbotron
|
|
h1 Bootswatch Themes example
|
|
p
|
|
| This is a template showcasing the various themes included in Bootswatch. Use it as a starting point to create something more unique by building on or modifying it.
|
|
.page-header
|
|
h1 Buttons
|
|
p
|
|
button.btn.btn-lg.btn-default(type='button') Default
|
|
button.btn.btn-lg.btn-primary(type='button') Primary
|
|
button.btn.btn-lg.btn-success(type='button') Success
|
|
button.btn.btn-lg.btn-info(type='button') Info
|
|
button.btn.btn-lg.btn-warning(type='button') Warning
|
|
button.btn.btn-lg.btn-danger(type='button') Danger
|
|
button.btn.btn-lg.btn-link(type='button') Link
|
|
p
|
|
button.btn.btn-default(type='button') Default
|
|
button.btn.btn-primary(type='button') Primary
|
|
button.btn.btn-success(type='button') Success
|
|
button.btn.btn-info(type='button') Info
|
|
button.btn.btn-warning(type='button') Warning
|
|
button.btn.btn-danger(type='button') Danger
|
|
button.btn.btn-link(type='button') Link
|
|
p
|
|
button.btn.btn-sm.btn-default(type='button') Default
|
|
button.btn.btn-sm.btn-primary(type='button') Primary
|
|
button.btn.btn-sm.btn-success(type='button') Success
|
|
button.btn.btn-sm.btn-info(type='button') Info
|
|
button.btn.btn-sm.btn-warning(type='button') Warning
|
|
button.btn.btn-sm.btn-danger(type='button') Danger
|
|
button.btn.btn-sm.btn-link(type='button') Link
|
|
p
|
|
button.btn.btn-xs.btn-default(type='button') Default
|
|
button.btn.btn-xs.btn-primary(type='button') Primary
|
|
button.btn.btn-xs.btn-success(type='button') Success
|
|
button.btn.btn-xs.btn-info(type='button') Info
|
|
button.btn.btn-xs.btn-warning(type='button') Warning
|
|
button.btn.btn-xs.btn-danger(type='button') Danger
|
|
button.btn.btn-xs.btn-link(type='button') Link
|
|
.page-header
|
|
h1 Tables
|
|
.row
|
|
.col-md-6
|
|
+table(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
|
|
.col-md-6
|
|
+table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
|
|
.row
|
|
.col-md-6
|
|
+table-bordered(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
|
|
.col-md-6
|
|
+table-condensed(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])
|
|
.page-header
|
|
h1 Thumbnails
|
|
img.img-thumbnail(src='../images/thumb.jpg', alt='A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera')
|
|
.page-header
|
|
h1 Labels
|
|
h1
|
|
span.label.label-default Default
|
|
span.label.label-primary Primary
|
|
span.label.label-success Success
|
|
span.label.label-info Info
|
|
span.label.label-warning Warning
|
|
span.label.label-danger Danger
|
|
h2
|
|
span.label.label-default Default
|
|
span.label.label-primary Primary
|
|
span.label.label-success Success
|
|
span.label.label-info Info
|
|
span.label.label-warning Warning
|
|
span.label.label-danger Danger
|
|
h3
|
|
span.label.label-default Default
|
|
span.label.label-primary Primary
|
|
span.label.label-success Success
|
|
span.label.label-info Info
|
|
span.label.label-warning Warning
|
|
span.label.label-danger Danger
|
|
h4
|
|
span.label.label-default Default
|
|
span.label.label-primary Primary
|
|
span.label.label-success Success
|
|
span.label.label-info Info
|
|
span.label.label-warning Warning
|
|
span.label.label-danger Danger
|
|
h5
|
|
span.label.label-default Default
|
|
span.label.label-primary Primary
|
|
span.label.label-success Success
|
|
span.label.label-info Info
|
|
span.label.label-warning Warning
|
|
span.label.label-danger Danger
|
|
h6
|
|
span.label.label-default Default
|
|
span.label.label-primary Primary
|
|
span.label.label-success Success
|
|
span.label.label-info Info
|
|
span.label.label-warning Warning
|
|
span.label.label-danger Danger
|
|
p
|
|
span.label.label-default Default
|
|
span.label.label-primary Primary
|
|
span.label.label-success Success
|
|
span.label.label-info Info
|
|
span.label.label-warning Warning
|
|
span.label.label-danger Danger
|
|
.page-header
|
|
h1 Badges
|
|
p
|
|
a(href='#')
|
|
| Inbox
|
|
span.badge 42
|
|
ul.nav.nav-pills(role='tablist')
|
|
li.active(role='presentation')
|
|
a(href='#')
|
|
| Home
|
|
span.badge 42
|
|
li(role='presentation')
|
|
a(href='#') Profile
|
|
li(role='presentation')
|
|
a(href='#')
|
|
| Messages
|
|
span.badge 3
|
|
.page-header
|
|
h1 Dropdown menus
|
|
.dropdown.theme-dropdown.clearfix
|
|
a#dropdownMenu1.sr-only.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
|
|
| Dropdown
|
|
span.caret
|
|
ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu1')
|
|
li.active(role='presentation')
|
|
a(role='menuitem', tabindex='-1', href='#') Action
|
|
li(role='presentation')
|
|
a(role='menuitem', tabindex='-1', href='#') Another action
|
|
li(role='presentation')
|
|
a(role='menuitem', tabindex='-1', href='#') Something else here
|
|
li.divider(role='presentation')
|
|
li(role='presentation')
|
|
a(role='menuitem', tabindex='-1', href='#') Separated link
|
|
.page-header
|
|
h1 Navs
|
|
ul.nav.nav-tabs(role='tablist')
|
|
li.active(role='presentation')
|
|
a(href='#') Home
|
|
li(role='presentation')
|
|
a(href='#') Profile
|
|
li(role='presentation')
|
|
a(href='#') Messages
|
|
ul.nav.nav-pills(role='tablist')
|
|
li.active(role='presentation')
|
|
a(href='#') Home
|
|
li(role='presentation')
|
|
a(href='#') Profile
|
|
li(role='presentation')
|
|
a(href='#') Messages
|
|
.page-header
|
|
h1 Navbars
|
|
nav.navbar.navbar-default
|
|
.container
|
|
.navbar-header
|
|
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse')
|
|
span.sr-only Toggle navigation
|
|
span.icon-bar
|
|
span.icon-bar
|
|
span.icon-bar
|
|
a.navbar-brand(href='#') Project name
|
|
.navbar-collapse.collapse
|
|
ul.nav.navbar-nav
|
|
li.active
|
|
a(href='#') Home
|
|
li
|
|
a(href='#about') About
|
|
li
|
|
a(href='#contact') Contact
|
|
li.dropdown
|
|
a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
|
|
| Dropdown
|
|
span.caret
|
|
ul.dropdown-menu(role='menu')
|
|
li
|
|
a(href='#') Action
|
|
li
|
|
a(href='#') Another action
|
|
li
|
|
a(href='#') Something else here
|
|
li.divider
|
|
li.dropdown-header Nav header
|
|
li
|
|
a(href='#') Separated link
|
|
li
|
|
a(href='#') One more separated link
|
|
|
|
nav.navbar.navbar-inverse
|
|
.container
|
|
.navbar-header
|
|
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse')
|
|
span.sr-only Toggle navigation
|
|
span.icon-bar
|
|
span.icon-bar
|
|
span.icon-bar
|
|
a.navbar-brand(href='#') Project name
|
|
.navbar-collapse.collapse
|
|
ul.nav.navbar-nav
|
|
li.active
|
|
a(href='#') Home
|
|
li
|
|
a(href='#about') About
|
|
li
|
|
a(href='#contact') Contact
|
|
li.dropdown
|
|
a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
|
|
| Dropdown
|
|
span.caret
|
|
ul.dropdown-menu(role='menu')
|
|
li
|
|
a(href='#') Action
|
|
li
|
|
a(href='#') Another action
|
|
li
|
|
a(href='#') Something else here
|
|
li.divider
|
|
li.dropdown-header Nav header
|
|
li
|
|
a(href='#') Separated link
|
|
li
|
|
a(href='#') One more separated link
|
|
|
|
.page-header
|
|
h1 Alerts
|
|
+alert-success("<strong>Well done!</strong> You successfully read this important alert message.")
|
|
+alert-info("<strong>Heads up!</strong> This alert needs your attention, but it's not super important.")
|
|
+alert-warning("<strong>Warning!</strong> Best check yo self, you're not looking too good.")
|
|
+alert-danger("<strong>Oh snap!</strong> Change a few things up and try submitting again.")
|
|
.page-header
|
|
h1 Progress bars
|
|
+progress-bar(60)
|
|
+progress-bar-info(20)
|
|
+progress-bar-warning(60)
|
|
+progress-bar-danger(80)
|
|
+progress-bar-striped(60)
|
|
.progress
|
|
.progress-bar.progress-bar-success(style='width: 35%')
|
|
span.sr-only 35% Complete (success)
|
|
.progress-bar.progress-bar-warning(style='width: 20%')
|
|
span.sr-only 20% Complete (warning)
|
|
.progress-bar.progress-bar-danger(style='width: 10%')
|
|
span.sr-only 10% Complete (danger)
|
|
.page-header
|
|
h1 List groups
|
|
.row
|
|
.col-sm-4
|
|
ul.list-group
|
|
li.list-group-item Cras justo odio
|
|
li.list-group-item Dapibus ac facilisis in
|
|
li.list-group-item Morbi leo risus
|
|
li.list-group-item Porta ac consectetur ac
|
|
li.list-group-item Vestibulum at eros
|
|
// /.col-sm-4
|
|
.col-sm-4
|
|
.list-group
|
|
a.list-group-item.active(href='#')
|
|
| Cras justo odio
|
|
a.list-group-item(href='#') Dapibus ac facilisis in
|
|
a.list-group-item(href='#') Morbi leo risus
|
|
a.list-group-item(href='#') Porta ac consectetur ac
|
|
a.list-group-item(href='#') Vestibulum at eros
|
|
// /.col-sm-4
|
|
.col-sm-4
|
|
.list-group
|
|
a.list-group-item.active(href='#')
|
|
h4.list-group-item-heading List group item heading
|
|
p.list-group-item-text
|
|
| Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
a.list-group-item(href='#')
|
|
h4.list-group-item-heading List group item heading
|
|
p.list-group-item-text
|
|
| Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
a.list-group-item(href='#')
|
|
h4.list-group-item-heading List group item heading
|
|
p.list-group-item-text
|
|
| Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
|
// /.col-sm-4
|
|
.page-header
|
|
h1 Panels
|
|
.row
|
|
.col-sm-4
|
|
+panel-default("Panel title")
|
|
| Panel content
|
|
+panel-primary("Panel title")
|
|
| Panel content
|
|
.col-sm-4
|
|
+panel-success("Panel title")
|
|
| Panel content
|
|
+panel-info("Panel title")
|
|
| Panel content
|
|
.col-sm-4
|
|
+panel-warning("Panel title")
|
|
| Panel content
|
|
+panel-danger("Panel title")
|
|
| Panel content
|
|
.page-header
|
|
h1 Wells
|
|
.well
|
|
p
|
|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
|
|
.page-header
|
|
h1 Carousel
|
|
+carousel("example-generic",[{image:'../images/carousel/slide1.jpg'},{image:'../images/carousel/slide2.jpg'},{image:'../images/carousel/slide3.jpg',}])
|