Difference between revisions of "Drinking And Dragons Skin/Styles"
From Drinking and Dragons
Wizardoest (talk | contribs) (→Alerts) |
Wizardoest (talk | contribs) |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 185: | Line 185: | ||
The answer to life, the universe, and everything is <span class="badge">42</span>. | The answer to life, the universe, and everything is <span class="badge">42</span>. | ||
== Alerts <small>[http://getbootstrap.com/components/#alerts Documentation</small> == | == Alerts <small>[http://getbootstrap.com/components/#alerts Documentation]</small> == | ||
<div class="alert alert-success alert-dismissible" role="alert"> | <div class="alert alert-success alert-dismissible" role="alert"> | ||
<strong>Well done!</strong> You successfully read this important alert message. | <strong>Well done!</strong> You successfully read this important alert message. | ||
| Line 199: | Line 199: | ||
</div> | </div> | ||
== List Groups == | == List Groups <small>[http://getbootstrap.com/components/#list-group Documentation]</small> == | ||
<div class="row"> | |||
<div class="col-sm-6"> | |||
<div class="list-group"> | |||
<div class="list-group-item">Cras justo odio</div> | |||
<div class="list-group-item">Dapibus ac facilisis in</div> | |||
<div class="list-group-item">Morbi leo risus</div> | |||
<div class="list-group-item">Porta ac consectetur ac</div> | |||
<div class="list-group-item">Vestibulum at eros</div> | |||
</div> | |||
</div> | |||
<div class="col-sm-6"> | |||
<div class="list-group"> | |||
<div class="list-group-item"> | |||
<h4 class="list-group-item-heading">List group item heading</h4> | |||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> | |||
</div> | |||
<div class="list-group-item"> | |||
<h4 class="list-group-item-heading">List group item heading</h4> | |||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> | |||
</div> | |||
<div class="list-group-item"> | |||
<h4 class="list-group-item-heading">List group item heading</h4> | |||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
== Panels <small>[http://getbootstrap.com/components/#panels Documentation]</small> == | |||
<div class="panel panel-default"> | |||
<div class="panel-heading"> | |||
<h3 class="panel-title">Panel title</h3> | |||
</div> | |||
<div class="panel-body"> | |||
Panel content | |||
</div> | |||
<div class="panel-footer">Panel footer</div> | |||
</div> | |||
<div class="panel panel-primary"> | |||
<div class="panel-heading"> | |||
<h3 class="panel-title">Panel title</h3> | |||
</div> | |||
<div class="panel-body"> | |||
Panel content | |||
</div> | |||
</div> | |||
<div class="panel panel-success"> | |||
<div class="panel-heading"> | |||
<h3 class="panel-title">Panel title</h3> | |||
</div> | |||
<div class="panel-body"> | |||
Panel content | |||
</div> | |||
</div> | |||
<div class="panel panel-info"> | |||
<div class="panel-heading"> | |||
<h3 class="panel-title">Panel title</h3> | |||
</div> | |||
<div class="panel-body"> | |||
Panel content | |||
</div> | |||
</div> | |||
<div class="panel panel-warning"> | |||
<div class="panel-heading"> | |||
<h3 class="panel-title">Panel title</h3> | |||
</div> | |||
<div class="panel-body"> | |||
Panel content | |||
</div> | |||
</div> | |||
<div class="panel panel-danger"> | |||
<div class="panel-heading"> | |||
<h3 class="panel-title">Panel title</h3> | |||
</div> | |||
<div class="panel-body"> | |||
Panel content | |||
</div> | |||
</div> | |||
== | == Wells <small>[http://getbootstrap.com/components/#wells Documentation]</small> == | ||
<div class="well">Look, I'm in a well!</div> | |||
<div class="well well-lg">Look, I'm in a bigger well!</div> | |||
<div class="well well-sm">Look, I'm in a tiny well!</div> | |||
== | == Icons <small>[http://fontawesome.io/ Documentation]</small>== | ||
<ul class="fa-ul"> | |||
<li><i class="fa-li fa fa-check-square"></i>List icons</li> | |||
<li><i class="fa-li fa fa-check-square"></i>can be used</li> | |||
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> | |||
<li><i class="fa-li fa fa-square"></i>in lists</li> | |||
</ul> | |||
Latest revision as of 10:12, 8 November 2015
Grid system Documentation
This is an excellent way to organize content without resorting to hand-writing floats.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Tables Documentation
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
| Shopping List | |||||
|---|---|---|---|---|---|
| Bread & Butter | Pie | Buns | Danish | Croissant | |
| Cheese | Ice cream | Butter | Yogurt | ||
Labels Documentation
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Badges Documentation
The answer to life, the universe, and everything is 42.
Alerts Documentation
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
List Groups Documentation
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Panels Documentation
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Wells Documentation
Look, I'm in a well!
Look, I'm in a bigger well!
Look, I'm in a tiny well!
Icons Documentation
- List icons
- can be used
- as bullets
- in lists
