Theme Elements
AppStrap contains all the standard Twitter Bootstrap goodies and more, here's a quick overview of some of the key elements.
Buttons
Default
Mini
Small
Medium
Large
Buttons Dropdown
Toggles Powered by Bootstrap Switch.
Sizes
On / Off Colours
Simply add data data-toggle="switch" to any radio or checkbox element:
Example:
<input type="checkbox" data-toggle="switch" checked>
Find more examples at Bootstrap Switch.
Accordion
Default
You can apply all default Bootstrap panel styles to individual panels as well ie. .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger.
List Style
Carousel
Customer 1
Customer 2
Customer 3
Customer 4
Customer 5
Customer 6
Customer 7
Customer 8
Customer 9
Customer 10
Customer 11
Customer 12
Customer 13
Customer 14
Alerts
Nothing much happening!
Just saying......Looking good!
All systems are go!!Warning!
Danger, High voltage!!Error!
Server meltdown pending!!!Typography
Jumbotron (.jumbotron)
Oi! Look at me!!
Integer. Tortor enim, phasellus aliquam! Turpis urna egestas et rhoncus elementum habitasse, quis! Auctor dolor et, tortor ridiculus facilisis integer integer! A odio pellentesque, velit placerat cras ultricies elementum lundium.
Tables
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Responsive Text Size
Screen xs
Screen sm
Screen md
Screen lg
Example:
Resize the page to see me change
<h2 class="font-xs-x2 font-md-x3">Resize the page to see me change</h2>
Quotes
"It's totally awesome, we're could imagine life without it!"
Fancy Text (.fancy)
Normal text with something a bit fancy can be nice!.
Text Spacers (.spacer)
Please // give // me // some // space!
Icons Included:
Useful tools
Horizontal Tabs
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Vertical Tabs
Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.
Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.
Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!
Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.
Pagination
Code Syntax Highlighting
p { color: red; }
<h2 class="font-xs-x2 font-md-x3">AppStrap</h2>
More examples on prismjs.com.
Tool Tip (data-toggle="tooltip")
Tooltip can really useful, maybe on top, or below or even left or right.
Popovers (data-toggle="popover")
Popovers are also really useful to explain something when you have a bit more to say, maybe on top, or below or even left or right.
Modals (data-toggle="modal")
For full requirements see: http://getbootstrap.com/javascript/#modals
Login or Sign Up