Permalink
Fetching contributors…
Cannot retrieve contributors at this time
1519 lines (1416 sloc) 50.6 KB
---
layout: project
banner_partial: spacer.html.haml
title: Example Swatch
---
/ =========================Announcement=========================
#accordionAnnounce.alert.alert-warning.alert-dismissible
%button.close{"data-dismiss" => "alert", :type => "button"} ×
%h4.alert-heading
.icon.icon-asterisk Announcement!
%p
Use this code for announcing releases, etc. Remove the class .alert-dismissible and the button to make it permanent on the page
%a.alert-link(href="#") You can also add links to this announcement.
/ =========================Masthead=========================
%header.jumbotron.subhead#overview
.row
.col-md-12
%h1 Project Swatch
%p.lead This swatch page shows the styling of various Bootstrap elements.
.subnav
%ul.nav.nav-pills
%li.active<
%a(href="#typography") Typography
%li<
%a(href="#carousel") Carousel
%li<
%a(href="#faq") FAQ
%li<
%a(href="#equalheight") Equal Height Cols
%li<
%a(href="#iconcallouts") Icon Callouts
%li<
%a(href="#tables") Tables
%li<
%a(href="#tabbedcontent") Tabbed
%li<
%a(href="#navbar") Navbar
%li<
%a(href="#stacked-nav") Stacked Nav
%li<
%a(href="#buttons") Buttons
%li<
%a(href="#codesnippets") Code
%li<
%a(href="#forms") Forms
%li<
%a(href="#miscellaneous") Misc.
%li<
%a(href="#fontawesome") Icons
%li<
%a(href="#phrasing") Phrasing
/ =========================Typography=========================
%section#typography
.page-header
%h1 Typography
/ Headings & Paragraph Copy
.row
.col-md-4
.well
%h1 h1. Heading 1
%h2 h2. Heading 2
%h3 h3. Heading 3
%h4 h4. Heading 4
%h5 h5. Heading 5
%h6 h6. Heading 6
.col-md-4
%h3 Example body text
%p Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
%p Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
.col-md-4
%h3 Example addresses
%address
%strong Company, Inc.
%br>
\
1234 Main Street<br/>
Raliegh, NC 12345<br/>
= succeed ' (123) 456-7890' do
%abbr(title="Phone") P:
%address
%strong Full Name
%br>
\
%a(href="mailto:#") first.last@gmail.com
/ =========================Modal & Carousel=========================
%section#carousel
.page-header
%h1 Modal and Carousel
.row
.col-md-4
%h3 Modal Pop-up
/ Button to trigger modal
%a.btn.btn-default{"data-toggle" => "modal", :href => "#myModal", :role => "button"} Launch demo modal
/ Modal
#myModal.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
.modal-dialog
.modal-content
.modal-header
%button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
%h3.modal-title Modal header
.modal-body
%p One fine body…
.modal-footer
%button.btn.btn-default{"aria-hidden" => "true", "data-dismiss" => "modal"} Close
%button.btn.btn-primary Save changes
.col-md-8
#myCarousel.carousel.slide
%ol.carousel-indicators
%li.active{"data-slide-to" => "0", "data-target" => "#myCarousel"}
%li{"data-slide-to" => "1", "data-target" => "#myCarousel"}
%li{"data-slide-to" => "2", "data-target" => "#myCarousel"}
/ Carousel items
.carousel-inner
.item.active
%img{:alt => "", :src => "https://static.jboss.org/common/images/carousel/carousel_img1.png"}/
.item
%img{:alt => "", :src => "https://static.jboss.org/common/images/carousel/carousel_img2.png"}/
.item
%img{:alt => "", :src => "https://static.jboss.org/common/images/carousel/carousel_img3.png"}/
/ Carousel nav
%a.left.carousel-control{"data-slide" => "prev", :href => "#myCarousel"} ‹
%a.right.carousel-control{"data-slide" => "next", :href => "#myCarousel"} ›
/ =========================Tab Toggles=========================
%section#faq
.page-header
%h1 FAQ Toggles
#accordion2.panel-group
.panel.panel-default
.panel-heading
%h4.panel-title
%a.accordion-toggle{"data-parent" => "#accordion2", "data-toggle" => "collapse", :href => "#collapseOne"}
Collapsible Group Item #1
#collapseOne.panel-collapse.collapse.in
.panel-body
Content 1 goes here (headlines, photos, whatever).
.panel.panel-default
.panel-heading
%h4.panel-title
%a.accordion-toggle{"data-parent" => "#accordion2", "data-toggle" => "collapse", :href => "#collapseTwo"}
Collapsible Group Item #2
#collapseTwo.panel-collapse.collapse.in
.panel-body
Content 2 goes here (headlines, photos, whatever).
/ =========================Equal Heights Columns=========================
%section#equalheight
.page-header
%h1 Equal Height Columns
/ begin equalHeights columns 4
#equalHeightsB.row.equalHero
.col-md-3
.row
%h3
%a{:href => "#{site.base_url}/about.html"} Crisp is the industry leader of real world iteration.
%p
%i.icon-cloud-download.icon-4x.pull-left
Public domain images. We will increase our aptitude to evolve without decrementing our capacity to leverage. It may seem marvelous, but it's true!
%p.right
%a.btn.btn-primary.pull-right{:href => "#{site.base_url}/about.html"} Details →
.col-md-3
.row
%h3
%a{:href => "#{site.base_url}/about.html"} It is better to maximize virally than to exploit holistically.
%p
%i.icon-dashboard.icon-4x.pull-left
If all of this seems stunning to you, that's because it is! The capability to strategize extensibly leads to the aptitude to upgrade compellingly.
%p.right
%a.btn.btn-primary.pull-right{:href => "#{site.base_url}/about.html"} Details →
.col-md-3
.row
%h3
%a{:href => "#{site.base_url}/about.html"} What do we incubate? Anything and everything, regardless of anonymity!
%p
%i.icon-cogs.icon-4x.pull-left
A company that can implement correctly will (eventually) be able to architect correctly. If you generate intuitively, you may have to synergize robustly.
%p.right
%a.btn.btn-primary.pull-right{:href => "#{site.base_url}/about.html"} Details →
.col-md-3
.row
%h3
%a{:href => "#{site.base_url}/about.html"} A company that can implement correctly will (eventually) be able to architect correctly
%p
%i.icon-magic.icon-4x.pull-left
A company that can implement correctly will (eventually) be able to architect correctly. If you generate intuitively, you may have to synergize robustly.
%p.right
%a.btn.btn-primary.pull-right{:href => "#{site.base_url}/about.html"} Details →
/ =========================Icon Callouts=========================
%section#iconcallouts
.page-header
%h1 Icon Callouts
.row
.col-md-2.pull-center
%i.enormous-icon.icon-magnet.circled.pull-center
.col-md-10
%h3 Get Involved
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor lacus risus, nec facilisis libero semper sed. Vestibulum vel interdum augue. Ut commodo laoreet viverra. Ut vitae eleifend ante. Pellentesque ac justo consectetur Duis tempor lacus risus, nec nec facilisis libero facilisis.
%br
.pull-left
.label.label-info New
%a.btn.pull-right.btn-primary Get Involved Now
.row
.col-md-2.pull-center
%i.enormous-icon.icon-bullhorn.circled.pull-center
.col-md-10
%h3 Get Working
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor lacus risus, nec facilisis libero semper sed. Vestibulum vel interdum augue. Ut commodo laoreet viverra. Ut vitae eleifend ante. Pellentesque ac justo consectetur Duis tempor lacus risus, nec nec facilisis libero facilisis.
%br
.pull-left
.label.label-warning Unstable
%a.btn.pull-right.btn-primary Get Working Now
.row
.col-md-2.pull-center
%i.enormous-icon.icon-trophy.circled.pull-center
.col-md-10
%h3 Get Started
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor lacus risus, nec facilisis libero semper sed. Vestibulum vel interdum augue. Ut commodo laoreet viverra. Ut vitae eleifend ante. Pellentesque ac justo consectetur Duis tempor lacus risus, nec nec facilisis libero facilisis.
%br
.pull-left
.label.label-success Stable
%a.btn.pull-right.btn-primary Get Started Now
/ =========================Tables=========================
%section#tables
.page-header
%h1 Tables
%h3 Quickstarts
%p Get up to speed quickly. Let us walk you through it!
%dl.dl-horizontal.quickstarts
%dt 5.2.x Quickstart
%dd
%a html
|
%a PDF
|
%a ePub
%dt 5.1.x Quickstart
%dd
%a html
|
%a PDF
|
%a ePub
%dt 5.0.x Quickstart
%dd
%a html
|
%a PDF
|
%a ePub
%br
%h3 Documentation Table
%p Learn more detail about our software.
.table-responsive
%table.table.table-bordered.table-striped
%thead
%tr
%th Version
%th User Guide
%th Getting Started Guide
%th Wiki
%th FAQs
%th Javadocs
%tbody
%tr
%td 5.2.x
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
%tr
%td 5.1.x
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
%tr
%td 5.0.x
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
|
%a PDF
|
%a ePub
%td
%a html
/ =========================Tabbed Content=========================
%section#tabbedcontent
.page-header
%h1 Tabbed Content
.row
.col-md-6
.well
%h1 News
%ul#myTab.nav.nav-tabs
%li.active
%a{:href => "#home", "role"=>"tab", "data-toggle"=>"tab"} Home
%li
%a{:href => "#profile", "role"=>"tab", "data-toggle"=>"tab"} Profile
%li
%a{:href => "#messages", "role"=>"tab", "data-toggle"=>"tab"} Messages
%li
%a{:href => "#settings", "role"=>"tab", "data-toggle"=>"tab"} Settings
.tab-content
#home.tab-pane.active Home content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
#profile.tab-pane Profile content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
#messages.tab-pane Messages content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
#settings.tab-pane Settings content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
.col-md-6
%h1 Forums
%ul#myTab.nav.nav-tabs
%li.active
%a{:href => "#home2"} Home
%li
%a{:href => "#downloads"} Downloads
%li
%a{:href => "#irc"} IRC
%li
%a{:href => "#twitter"} Twitter
.tab-content
#home2.tab-pane.active Home content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
#downloads.tab-pane Downloads content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
#irc.tab-pane IRC content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
#twitter.tab-pane Twitter content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis sagittis accumsan. Donec tincidunt metus vitae felis vulputate, in cursus felis congue. Suspendisse in nisl mi. Sed eu fermentum sem, sit amet aliquet mauris. Phasellus et eros interdum, lobortis nibh et, tempor felis.
:javascript
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
/ =========================Navbar=========================
%section#navbar
.page-header
%h1 Navbars
.navbar.navbar-default
.container-fluid(style="width: auto;")
// Brand and toggle get grouped for better mobile display
.navbar-header
%button.navbar-toggle.collapsed(data-toggle="collapse" data-target="#example-navbar-collapse-1")
%span.icon-bar
%span.icon-bar
%span.icon-bar
%a.navbar-brand(href="#") Project name
// Collect the nav links, forms, and other content for toggling
.collapse.navbar-collapse#example-navbar-collapse-1
%ul.nav.navbar-nav
%li.active<
%a(href="#") Home
%li<
%a(href="#") Link
%li<
%a(href="#") Link
%li<
%a(href="#") Link
%li.dropdown
%a.dropdown-toggle(href="#" data-toggle="dropdown")<
= precede 'Dropdown ' do
%b.caret>
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
%form.navbar-form.navbar-left(action="")
%input.form-control(type="text" placeholder="Search")
%ul.nav.navbar-nav.navbar-right
%li<
%a(href="#") Link
%li.divider-vertical
%li.dropdown
%a.dropdown-toggle(href="#" data-toggle="dropdown")<
= precede 'Dropdown ' do
%b.caret>
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
.navbar.navbar-inverse
.container-fluid(style="width: auto;")
// Brand and toggle get grouped for better mobile display
.navbar-header
%button.navbar-toggle.collapsed(data-toggle="collapse" data-target="#example-navbar-collapse-2")
%span.icon-bar
%span.icon-bar
%span.icon-bar
%a.navbar-brand(href="#") Project name
// Collect the nav links, forms, and other content for toggling
.collapse.navbar-collapse#example-navbar-collapse-2
%ul.nav.navbar-nav
%li.active<
%a(href="#") Home
%li<
%a(href="#") Link
%li<
%a(href="#") Link
%li<
%a(href="#") Link
%li.dropdown
%a.dropdown-toggle(href="#" data-toggle="dropdown")<
= precede 'Dropdown ' do
%b.caret>
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
%form.navbar-form.navbar-left(action="")
%input.form-control.navbar-search.search-query(type="text" placeholder="Search")
%ul.nav.navbar-nav.navbar-right
%li<
%a(href="#") Link
%li.divider-vertical
%li.dropdown
%a.dropdown-toggle(href="#" data-toggle="dropdown")<
= precede 'Dropdown ' do
%b.caret>
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
/ =========================Stacked Navigation=========================
%section#stacked-nav
.page-header
%h1 Stacked Navigation
.div.clearfix
.col-md-4
%ul.nav.nav-pills.nav-stacked
%li.active
%a{:href => "#"}
%i.icon-fixed-width.icon-home
Home
%li
%a{:href => "#"}
%i.icon-fixed-width.icon-book
Library
%li
%a{:href => "#"}
%i.icon-fixed-width.icon-pencil
Applications
%li
%a{:href => "#"}
%i.icon-fixed-width.icon-cogs
Settings
/ =========================Buttons=========================
%section#buttons
.page-header
%h1 Buttons
.table-responsive
%table.table.table-bordered.table-striped
%thead
%tr
%th Button
%th Large Button
%th Small Button
%th Disabled Button
%th Button with Icon
%th Split Button
%tbody
%tr
%td<
%a.btn.btn-default(href="#") Default
%td<
%a.btn.btn-default.btn-lg(href="#") Default
%td<
%a.btn.btn-default.btn-sm(href="#") Default
%td<
%a.btn.btn-default.disabled(href="#") Default
%td<
%a.btn.btn-default(href="#")<
= succeed ' Default' do
%i.icon-cog>
%td
.btn-group
%button.btn.btn-default(type="button") Default
%button.btn.btn-default.dropdown-toggle(type="button" data-toggle="dropdown")<
%span.caret
%span.sr-only Toggle Dropdown
%ul.dropdown-menu(role="menu")
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
%tr
%td<
%a.btn.btn-primary(href="#") Primary
%td<
%a.btn.btn-primary.btn-lg(href="#") Primary
%td<
%a.btn.btn-primary.btn-sm(href="#") Primary
%td<
%a.btn.btn-primary.disabled(href="#") Primary
%td<
%a.btn.btn-primary(href="#")<
= succeed ' Primary' do
%i.icon-shopping-cart.icon-white>
%td
.btn-group
%a.btn.btn-primary(href="#") Primary
%a.btn.btn-primary.dropdown-toggle(data-toggle="dropdown" href="#")<
%span.caret
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#")Separated link
%tr
%td<
%a.btn.btn-info(href="#") Info
%td<
%a.btn.btn-info.btn-lg(href="#") Info
%td<
%a.btn.btn-info.btn-sm(href="#") Info
%td<
%a.btn.btn-info.disabled(href="#") Info
%td<
%a.btn.btn-info(href="#")<
= succeed ' Info' do
%i.icon-exclamation-sign.icon-white>
%td
.btn-group
%a.btn.btn-info(href="#") Info
%a.btn.btn-info.dropdown-toggle(data-toggle="dropdown" href="#")<
%span.caret
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
%tr
%td<
%a.btn.btn-success(href="#") Success
%td<
%a.btn.btn-success.btn-lg(href="#") Success
%td<
%a.btn.btn-success.btn-sm(href="#") Success
%td<
%a.btn.btn-success.disabled(href="#") Success
%td<
%a.btn.btn-success(href="#")<
= succeed ' Success' do
%i.icon-ok.icon-white>
%td
.btn-group
%a.btn.btn-success(href="#") Success
%a.btn.btn-success.dropdown-toggle(data-toggle="dropdown" href="#")<
%span.caret
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
%tr
%td<
%a.btn.btn-warning(href="#") Warning
%td<
%a.btn.btn-warning.btn-lg(href="#") Warning
%td<
%a.btn.btn-warning.btn-sm(href="#") Warning
%td<
%a.btn.btn-warning.disabled(href="#") Warning
%td<
%a.btn.btn-warning(href="#")<
= succeed ' Warning' do
%i.icon-warning-sign.icon-white>
%td
.btn-group
%a.btn.btn-warning(href="#") Warning
%a.btn.btn-warning.dropdown-toggle(data-toggle="dropdown" href="#")<
%span.caret
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
%tr
%td<
%a.btn.btn-danger(href="#") Danger
%td<
%a.btn.btn-danger.btn-lg(href="#") Danger
%td<
%a.btn.btn-danger.btn-sm(href="#") Danger
%td<
%a.btn.btn-danger.disabled(href="#") Danger
%td<
%a.btn.btn-danger(href="#")<
= succeed ' Danger' do
%i.icon-remove.icon-white>
%td
.btn-group
%a.btn.btn-danger(href="#") Danger
%a.btn.btn-danger.dropdown-toggle(data-toggle="dropdown" href="#")<
%span.caret
%ul.dropdown-menu
%li<
%a(href="#") Action
%li<
%a(href="#") Another action
%li<
%a(href="#") Something else here
%li.divider
%li<
%a(href="#") Separated link
/ =========================Code Snippets=========================
%section#codesnippets
.page-header
%h1 Code Snippets
%pre
:preserve
&lt;p&gt;XML Code Snipped goes here...&lt;/p&gt;
/ =========================Forms=========================
%section#forms
.page-header
%h1 Forms
.row
.col-md-10.col-md-offset-1
%form.form-inline.well
.form-group
%label.sr-only(for="search1")
%input.form-control(type="text" id="search1")
%button.btn.btn-default(type="submit") Search
%form.form-inline.well
.form-group
%label.sr-only(for="email")Email
%input.form-control(type="text" placeholder="Email" id="email")
.form-group
%label.sr-only(for="password")Password
%input.form-control(type="password" placeholder="Password" id="password")
%button.btn.btn-default(type="submit") Go
%form.form-horizontal.well
%fieldset
%legend Controls Bootstrap supports
.form-group
%label.col-md-2.col-sm-3.control-label(for="input01") Text input
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%input.form-control(type="text" id="input01")
.col-xs-12
%p.help-block In addition to freeform text, any HTML5 text-based input appears like so.
.form-group
%label.col-md-2.col-sm-3.control-label(for="optionsCheckbox") Checkbox
.col-md-10.col-sm-9
.col-md-10.col-xs-12
.checkbox
%label
%input#optionsCheckbox.col-md-5.col-xs-12(type="checkbox" value="option1") Option one is this and that&mdash;be sure to include why it's great
.form-group
%label.col-md-2.col-sm-3.control-label(for="select01") Select list
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%select#select01.form-control
%option something
%option 2
%option 3
%option 4
%option 5
.form-group
%label.col-md-2.col-sm-3.control-label(for="multiSelect") Multicon-select
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%select.form-control#multiSelect(multiple="multiple")
%option 1
%option 2
%option 3
%option 4
%option 5
.form-group
%label.col-md-2.col-sm-3.control-label(for="fileInput") File input
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%input#fileInput(type="file")
.form-group
%label.col-md-2.col-sm-3.control-label(for="textarea") Textarea
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%textarea.form-control#textarea(rows="3")
.form-group
%label.col-md-2.col-sm-3.control-label(for="focusedInput") Focused input
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%input.form-control#focusedInput(type="text" value="This is focused…")
.form-group
%label.col-md-2.col-sm-3.control-label Uneditable input
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%span.form-control.uneditable-input Some value here
.form-group
%label.col-md-2.col-sm-3.control-label(for="disabledInput") Disabled input
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%input.form-control.disabled#disabledInput(type="text" placeholder="Disabled input here…" disabled)
.form-group
%label.col-md-2.col-sm-3.control-label(for="optionsCheckbox2") Disabled checkbox
.col-md-10.col-sm-9
.col-md-5.col-xs-12
.checkbox
%label
%input#optionsCheckbox2(type="checkbox" value="option1" disabled) This is a disabled checkbox
.form-group.has-warning
%label.col-md-2.col-sm-3.control-label(for="inputWarning") Input with warning
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%input.form-control(type="text")
%span.help-block Something may have gone wrong
.form-group.has-error
%llabel.col-md-2.col-sm-3.control-label(for="inputError") Input with error
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%input#inputError.form-control(type="text")
%span.help-block Please correct the error
.form-group.has-success
%label.col-md-2.col-sm-3.control-label(for="inputSuccess") Input with success
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%input#inputSuccess.form-control(type="text")
%span.help-block Woohoo!
.form-group.has-succes
%label.col-md-2.col-sm-3.control-label(for="selectError") Select with success
.col-md-10.col-sm-9
.col-md-5.col-xs-12
%select.form-control#selectError
%option 1
%option 2
%option 3
%option 4
%option 5
%span.help-block Woohoo!
.col-sm-offset-2
%button.btn.btn-primary(type="submit") Save changes
%button.btn.btn-default(type="reset") Cancel
/ =========================Miscellaneous=========================
%section#miscellaneous
.page-header
%h1 Miscellaneous
.row
.col-md-5
%h3 Breadcrumbs
%ol.breadcrumb
%li.active Home
%ol.list-unstyled.breadcrumb
%li
%a(href="#") Home
%li.active Library
%ol.breadcrumb
%li<
%a(href="#")> Home
%li<
%a(href="#")> Library
%li.active Data
.col-md-6.col-md-offset-1
%h3#pagination Pagination
%ul
.pagination
%li.disabled<
%a(href="#") &laquo;
%li.active<
%a(href="#") 1
%li<
%a(href="#") 2
%li<
%a(href="#") 3
%li<
%a(href="#") 4
%li<
%a(href="#") &raquo;
%ul
.pagination
%li<
%a(href="#") &larr;
%li.active<
%a(href="#") 10
%li.disabled<
%a(href="#") ...
%li<
%a(href="#") 20
%li<
%a(href="#") &rarr;
.text-center
%ul.pagination
%li.active<
%a(href="#") 1
%li<
%a(href="#") 2
%li<
%a(href="#") 3
%li<
%a(href="#") 4
%li<
%a(href="#") 5
/ =========================Labels=========================
.row
.col-md-6
%h3#labels Labels
%span.label.label-default Default
%span.label.label-success Success
%span.label.label-warning Warning
%span.label.label-important Important
%span.label.label-info Info
.col-md-6
%h3#labels Definition Lists
%dl.dl-horizontal
%dt User Forums
%dd Can help answer questios you may have and be a point of discussion and reference for using this Project
%dt IRC
%dd
is our real-time chat location. Join us on the #project freenode channel. Join in to talk to us in real time.
%a (Freenode IRC instructions)
%br
/ =========================Progress bars=========================
%h3#progressbars Progress bars
.row
.col-md-4
.progress
.progress-bar(style="width: 60%;")
.col-md-4
.progress
.progress-bar.progress-bar-info.progress-bar-striped(style="width: 20%;")
.col-md-4
.progress.progress-danger.progress-striped.active
.progress-bar.progress-bar-danger.progress-bar-striped(style="width: 45%")
%br
/ =========================Alerts & Messages=========================
%h3#alerts Alerts
.row
.col-md-12
.alert.alert-warning.alert-dismissible
%button.close{"data-dismiss" => "alert", :type => "button"} &times;
%h4.alert-heading Alert block
%p Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
%a.alert-link(href="#") Here is a link in an alert.
.row
.col-md-4
.alert.alert-danger.alert-dismissible
%button.close{"data-dismiss" => "alert", :type => "button"} &times;
%b Error
Change a few things up and try submitting again.
.col-md-4
.alert.alert-success.alert-dismissible
%button.close{"data-dismiss" => "alert", :type => "button"} &times;
%b Success
You successfully read this important alert message.
.col-md-4
.alert.alert-info.alert-dismissible
%button.close{"data-dismiss" => "alert", :type => "button"} &times;
%b Information
This alert needs your attention, but it's not super important.
%br
/ =========================List Group=========================
%h3#list-group List Group
.row
.col-md-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
.col-md-4
%ul.list-group
%li.list-group-item
%span.badge 14
Cras justo odio
%li.list-group-item
%span.badge 2
Dapibus ac facilisis in
%li.list-group-item
%span.badge 1
Morbi leo risus
.col-md-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
%br
/ =========================Panels=========================
%h3#panels Panels
.row
.col-md-12
.panel.panel-default
.panel-heading
%h3.panel-title Panel Title
.panel-body
Panel Content
.col-md-6
.panel.panel-primary
.panel-heading
%h3.panel-title Panel Title
.panel-body
Panel Content
.col-md-6
.panel.panel-info
.panel-heading
%h3.panel-title Panel Title
.panel-body
Panel Content
.col-md-3
.panel.panel-success
.panel-heading
%h3.panel-title Panel Title
.panel-body
Panel Content
.col-md-3
.panel.panel-warning
.panel-heading
%h3.panel-title Panel Title
.panel-body
Panel Content
.col-md-3
.panel.panel-danger
.panel-heading
%h3.panel-title Panel Title
.panel-body
Panel Content
.col-md-5
.panel.panel-default
.panel-body
Basic panel example
/ =========================Font Awesome Icons=========================
%section#fontawesome
.page-header
%h1 Font Awesome Icons
%p This theme uses "Font Awesome" as an icon set to increase the flexibility and presentation of the icons. We've included a small sampling of this font on in this section.
Go to the Font Awesome website to see the
%a{:href => "http://fortawesome.github.io/Font-Awesome/icons/"} list of available icons
and
%a{:href => "http://fortawesome.github.io/Font-Awesome/examples/"} examples
of how to implement them.
.row
.col-md-4
%h3 Inline & Large Icons
.well
%div
%i.icon-camera-retro
icon-camera-retro (regular)
%p
%i.icon-camera-retro.icon-lg
icon-camera-retro (large)
%p
%i.icon-camera-retro.icon-2x
icon-camera-retro (2XL)
%p
%i.icon-camera-retro.icon-3x
icon-camera-retro (3XL)
%p
%i.icon-camera-retro.icon-4x
icon-camera-retro (4XL)
.col-md-4
%h3 Buttons
.well
%div
%p
%a.btn.btn-default{:href => "#"}
%i.icon-repeat
Reload
%a.btn.btn-success{:href => "#"}
%i.icon-shopping-cart.icon-lg
Checkout
%p
%a.btn.btn-lg.btn-primary{:href => "#"}
%i.icon-comment
Comment
%a.btn.btn-sm.btn-info{:href => "#"}
%i.icon-info-sign
Info
%p
%a.btn.btn-danger{:href => "#"}
%i.icon-trash.icon-lg
Delete
%a.btn.btn-default.btn-sm{:href => "#"}
%i.icon-cog
Settings
%p
%a.btn.btn-lg.btn-danger{:href => "#"}
%i.icon-flag.icon-2x.pull-left
Font Awesome
%br>/
Version
%p
%a.btn.btn-primary{:href => "#"}
%i.icon-refresh.icon-spin
Synchronizing Content...
.col-md-4
%h3 Better Bulleted Lists
.well
%div
%ul.icons-ul
%li
%i.icon-li.icon-chevron-sign-right>
New bulleted lists
%li
%i.icon-li.icon-bullseye>
Fix some old bugs
%li
%i.icon-li.icon-play-sign>
And deal with arbitrary
%li
%i.icon-li.icon-ok-sign>
Font sizes better
.row
.col-md-4
%h3 Icon Stacks
.well
%span.icon-stack
%i.icon-check-empty.icon-stack-base
%i.icon-twitter
icon-twitter on icon-check-empty
%br/
%span.icon-stack
%i.icon-circle.icon-stack-base
%i.icon-flag.icon-light
icon-flag on icon-circle
%br/
%span.icon-stack
%i.icon-sign-blank.icon-stack-base
%i.icon-terminal.icon-light
icon-terminal on icon-sign-blank
.col-md-4
%h3 Pulled & Bordered Icons
.well
%i.icon-quote-left.icon-4x.pull-left
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.
/ =========================Blogs, Jira, Newsletter, Testimonials=========================
%section#blogs
.page-header
%h1 Blogs, Newsletter, & Testimonials
.row
/ section containing newsletter signup
.col-md-4
%section
%h4 Stay Updated
%p Sign up for our newsletter. We won't share your email address.
%form.form-inline{:action => "yourscript.php", :method => "post"}
.form-group
.input-group
%input.form-control{:name => "email", :placeholder => "Email Address", :type => "email"}
%span.input-group-btn
%button.btn.btn-primary Sign Up
/ Rotating Testimonials - set the speed in application.js
.rotating-testimonials
/ "rotating-testimonials" is a required class
%h4.short_headline
%span Testimonials
.panels
#t1
%blockquote
%p One isn’t necessarily born with courage, but one is born with potential. Without courage, we cannot practice any other virtue with consistency. We can’t be kind, true, merciful, generous, or honest.
%footer Maya Angelou
/ close #t1
#t2
%blockquote
%p When the highest type of people hear Tao (Truth), they diligently practice it. When the average type of people hear Tao, they half believe in it. When the lowest type of people hear Tao, they laugh at it. If they did not laugh, it would not be Tao.
%footer Lao-Tzu
/ close #t2
#t3
%blockquote
%p The human being is part of the whole, called by us the ‘universe’, a part limited in time and space. He experiences himself, his thoughts and feelings, as something separate from the rest — a kind of optical delusion of consciousness.
%footer Albert Einstein
/ close #t3
#t4
%blockquote
%p Whatever course you decide upon, there is always someone to tell you that you are wrong. There are always difficulties arising which tempt you to believe that your critics are right. To map out a course of action and follow it to an end requires courage.
%footer Ralph Waldo Emerson
/ close #t4
%ul.tabs
%li.tab
%a{:href => "#t1"} maya-angelou
%li.tab
%a{:href => "#t2"} lao-tzu
%li.tab
%a{:href => "#t3"} albert-einstein
%li.tab
%a{:href => "#t4"} ralph-waldo-emerson
/ JIRA Issues widget
.col-md-4
%section
.twocol_right{:style => "text-align:right;"}
#jiraDiv
:javascript
$(document).ready(function () {
processJiraWidget( {
jqlQuery : 'project = ORG AND (status = Open OR status = Reopened)',
maxResults : 5,
startAt : 0,
divId : 'jiraDiv',
title : 'Jira Issues'
})
});
/ section containing blog posts
.col-md-4
%section
%h4 Latest Blog Posts
#blogDiv
:javascript
$(document).ready(function () {
$('#blogDiv').FeedEk({
FeedUrl: 'http://planet.jboss.org/xml/all?type=atom',
MaxCount: 6,
ShowDesc: false,
CharacterLimit: 200
});
});
/ =========================Definition Table (Project Team)=========================
%section#definitiontable
.page-header
%h1 Definition Table
%table.deftable{:cellspacing => "0", :width => "75%"}
%tbody
%tr
%td.termFirst{:width => "15%"} User Community
%td.defFirst
Our
%a{:href => "http://www.jboss.com/index.html?module=bb&op=viewforum&f=64"} user forums
are the main channel of communication between all community members. If you experience problems, have questions, or simply want to meet the community, visit the forums.
%tr
%td.term{:width => "15%"} Developers
%td.def
There are many
%a{:href => "/portal/community"} community developers
contributing to JBoss Clustering. If you are not on this list and you are a contributor, or have been in the past, send an email to labs-admin at jboss.com with a short bio, a picture, and a list of the projects to which you contributed, and we will happily add you to this list of rock star programmers.
%tr
%td.term{:width => "15%"} Getting Involved
%td.def
If you wish to get involved as a developer in the JBoss Clustering project, please visit
%a{:href => "http://www.jboss.com/index.html?module=bb&op=viewforum&f=155"} the JBoss Clustering design forum
and get to know people. Joining the
%tr
%td.term{:width => "15%"} More information
%td.def
%a{:href => "http://jboss.org/jbossas/docs/5-x/clustering.html"} JBoss Clustering Official Documentation
%br/
%a{:href => "http://jboss.org/wiki/Wiki.jsp?page=JBossHA"} Wiki Knowledge Base
%tr
%td.term{:width => "15%"} Project Status
%td.def
JBoss Clustering uses the
%a{:href => "http://jira.jboss.com/jira/browse/JBAS"} JIRA tracking and project management system
to organize and prioritize tasks. JBoss Clustering issues can be found by searching for issues with 'Clustering' as their Component.
%tr
%td.term{:width => "15%"} Acknowledgements
%td.def
JBoss Clustering was created by
%a{:href => "/portal/community"} professional open source developers from around the world.
JBoss Clustering is built on top of the
%a{:href => "/portal/jgroups"} JGroups
distributed messaging technology. Check out the great work
%b Bela Ban
has done to allow for the quick development of JBoss Clustering. JBoss Clustering originally began in 2001 as a small prototype built on top of
%a{:hrefo => "/portal/jgroups"} JGroups
and coded by
= succeed "." do
%b Sacha Labourey
%b Bill Burke
joined Sacha and for the AS 3.0 release they together built the JBoss Clustering core that's still in use today. Under
%b Ben Wang's
leadership, use of
%a{:href => "/portal/jbosscache"} JBoss Cache
for state replication was introduced in AS 3.2.6. The project is now led and maintained by
= succeed "." do
%b Brian Stansberry
%tr
%td.term{:width => "15%"} Professional Support
%td.def
Red Hat Inc. delivers the
= succeed "," do
%a{:href => "http://www.jboss.com/services/profsupport"} Professional Support
= succeed "," do
%a{:href => "http://www.jboss.com/services/consulting"} Consulting
and
%a{:href => "http://www.jboss.com/services/training"} Training
that you need whether you are testing a proof of concept, deploying a mission-critical application, or rolling out JBoss across your enterprise.
/ =========================Phrase Elements=========================
%section#phrasing
.page-header
%h1 Phrase Elements
%h5 Em
%p
Element used to
= succeed "." do
%em put emphasis on certain information
Most browsers display emphased text in italics by default.
%p
Sample:
= succeed "." do
%em This is emphasied text
%h5 Strong
%p This element stands for "stronger emphasis" and is used for marking more important text.
%p
Sample:
%strong This is text with stronger emphasis
%h5 Cite
%p
According to
= succeed "," do
%cite W3C specification
we use
%code cite
element to define source of a quotation or reference.
%p
Sample:
%cite This is quotation source
%h5 Dfn
%p Element used to markup inline definition of a single term.
%p
Sample:
%dfn This is definition
%h5 code
%p This element informs the browser that it contains a computer code, such as XHTML markup.
%p
Sample:
%code document.write("Hello world");
%h5 samp
%p Defines computer output data, for example we can use it to markup error messages
%p
Sample:
%samp Error: no such file or directory
%h5 kbd
%p Means information that should be entered by the user.
%p
Sample: press
%kbd Alt + F4
to close this window.
%kbd ESC
%h5 var
%p Means variables used in computer programs or scripts.
%p
Sample:
%var counter
%h5 abbr
%p Abbreviation / a shortened form of a word or phrase
%p
Sample:
%abbr{:title => "doctor"} dr
%h5 q: inline quotation
%p
Sample:
%q This is a sample inline quotation
%h5 Other elements
%h6 Subscript and superscript samples
%p
H
%sub> 2
O,
%p
E = mc
%sup> 2
,
%p
The 14
%sup th
of September
%h5 Insertion and deletion samples
%p
%ins{:datetime => "2009-07-12T08:15:30+02:00", :title => "Added new information according to suggestions"} This information was just added.
%br/
%del While this information is no longer valid.
%h5 Presentational elements
%p
%strong Bold text
%br/
%em Italic text
%br/
%small Small
%h5 Horizontal rule:
/ =========================Boostrap Thumbnails=========================
%section#thumbnails
.page-header
%h1 Thumbnails
%p Be sure that the content is same height, these are not controlled by jQuery.
.row
%ul.thumbnails.list-unstyled
%li.col-sm-4
.thumbnail
%img{:alt => "", :src => "http://placehold.it/330x150"}/
.caption
%h3 Thumbnail label
%p Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
%p
%a.btn.btn-primary{:href => "#"} Action
%a.btn.btn-default{:href => "#"} Action
%li.col-sm-4
.thumbnail
%img{:alt => "", :src => "http://placehold.it/330x150"}/
.caption
%h3 Thumbnail label
%p Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
%p
%a.btn.btn-primary{:href => "#"} Action
%a.btn.btn-default{:href => "#"} Action
%li.col-sm-4
.thumbnail
%img{:alt => "", :src => "http://placehold.it/330x150"}/
.caption
%h3 Thumbnail label
%p Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
%p
%a.btn.btn-primary{:href => "#"} Action
%a.btn.btn-default{:href => "#"} Action
.row
%ul.thumbnails.list-unstyled
%li.col-xs-6.col-sm-3
%a.thumbnail{:href => "#"}
%img{:alt => "", :src => "http://placehold.it/260x180"}/
%li.col-xs-6.col-sm-3
%a.thumbnail{:href => "#"}
%img{:alt => "", :src => "http://placehold.it/260x180"}/
%li.col-xs-6.col-sm-3
%a.thumbnail{:href => "#"}
%img{:alt => "", :src => "http://placehold.it/260x180"}/
%li.col-xs-6.col-sm-3
%a.thumbnail{:href => "#"}
%img{:alt => "", :src => "http://placehold.it/260x180"}/