|
@@ -0,0 +1,135 @@
|
|
|
|
|
+# Labels
|
|
|
|
|
+
|
|
|
|
|
+<span class="label label-default">Default</span>
|
|
|
|
|
+<span class="label label-primary">Primary</span>
|
|
|
|
|
+<span class="label label-success">Success</span>
|
|
|
|
|
+<span class="label label-info">Info</span>
|
|
|
|
|
+<span class="label label-warning">Warning</span>
|
|
|
|
|
+<span class="label label-danger">Danger</span>
|
|
|
|
|
+
|
|
|
|
|
+# Alerts
|
|
|
|
|
+
|
|
|
|
|
+<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
|
|
|
|
|
+<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
|
|
|
|
|
+<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
|
|
|
|
|
+<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
|
|
|
|
|
+
|
|
|
|
|
+# Panels
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-default">
|
|
|
|
|
+ <div class="panel-heading">Panel heading without title</div>
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ Panel content
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-primary">
|
|
|
|
|
+ <div class="panel-heading">Panel heading without title</div>
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ Panel content
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-success">
|
|
|
|
|
+ <div class="panel-heading">Panel heading without title</div>
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ Panel content
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-info">
|
|
|
|
|
+ <div class="panel-heading">Panel heading without title</div>
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ Panel content
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-warning">
|
|
|
|
|
+ <div class="panel-heading">Panel heading without title</div>
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ Panel content
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-danger">
|
|
|
|
|
+ <div class="panel-heading">Panel heading without title</div>
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ Panel content
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+# Wells
|
|
|
|
|
+
|
|
|
|
|
+## Default well
|
|
|
|
|
+
|
|
|
|
|
+<div class="well">Look, I'm in a well! </div>
|
|
|
|
|
+
|
|
|
|
|
+## Optional classes
|
|
|
|
|
+
|
|
|
|
|
+<div class="well well-lg">Look, I'm in a well! </div>
|
|
|
|
|
+
|
|
|
|
|
+<div class="well well-sm">Look, I'm in a well! </div>
|
|
|
|
|
+
|
|
|
|
|
+# Typography
|
|
|
|
|
+
|
|
|
|
|
+## Lead body copy
|
|
|
|
|
+
|
|
|
|
|
+<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
|
|
|
|
|
+
|
|
|
|
|
+## Marked text
|
|
|
|
|
+
|
|
|
|
|
+You can use the mark tag to <mark>highlight</mark> text.
|
|
|
|
|
+
|
|
|
|
|
+## Small text
|
|
|
|
|
+
|
|
|
|
|
+<small>This line of text is meant to be treated as fine print.</small>
|
|
|
|
|
+
|
|
|
|
|
+## Alignment classes
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-default">
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ <p class="text-left">Left aligned text.</p>
|
|
|
|
|
+ <p class="text-center">Center aligned text.</p>
|
|
|
|
|
+ <p class="text-right">Right aligned text.</p>
|
|
|
|
|
+ <p class="text-justify">Justified text.</p>
|
|
|
|
|
+ <p class="text-nowrap">No wrap text.</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+## Transformation classes
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-default">
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ <p class="text-lowercase">Lowercased text.</p>
|
|
|
|
|
+ <p class="text-uppercase">Uppercased text.</p>
|
|
|
|
|
+ <p class="text-capitalize">Capitalized text.</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+# Helper classes
|
|
|
|
|
+
|
|
|
|
|
+## Contextual colors
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-default">
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
|
|
|
+ <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
|
|
|
+ <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
|
|
|
+ <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
|
|
|
+ <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
|
|
|
+ <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+## Contextual backgrounds
|
|
|
|
|
+
|
|
|
|
|
+<div class="panel panel-default">
|
|
|
|
|
+ <div class="panel-body">
|
|
|
|
|
+ <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
|
|
|
+ <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
|
|
|
+ <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
|
|
|
+ <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
|
|
|
+ <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|