Difference between revisions of "Drinking And Dragons Skin/Styles"
From Drinking and Dragons
Wizardoest (talk | contribs) (Created page with "== Tables <small>[http://getbootstrap.com/css/#tables Documentation]</small>== <div class="row"> <div class="col-md-6"> {| class="table" !colspan="6"|Shopping List |- |rowspa...") |
Wizardoest (talk | contribs) |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== Grid system <small>[http://getbootstrap.com/css/#grid Documentation]</small>== | |||
This is an excellent way to organize content without resorting to hand-writing floats. | |||
<div class="row"> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
<div class="col-md-1">.col-md-1</div> | |||
</div> | |||
<div class="row"> | |||
<div class="col-md-8">.col-md-8</div> | |||
<div class="col-md-4">.col-md-4</div> | |||
</div> | |||
<div class="row"> | |||
<div class="col-md-4">.col-md-4</div> | |||
<div class="col-md-4">.col-md-4</div> | |||
<div class="col-md-4">.col-md-4</div> | |||
</div> | |||
<div class="row"> | |||
<div class="col-md-6">.col-md-6</div> | |||
<div class="col-md-6">.col-md-6</div> | |||
</div> | |||
== Tables <small>[http://getbootstrap.com/css/#tables Documentation]</small>== | == Tables <small>[http://getbootstrap.com/css/#tables Documentation]</small>== | ||
<div class="row"> | <div class="row"> | ||
<div class="col-md-6"> | <div class="col-md-6"> | ||
{| class="table" | {| class="table" | ||
| Line 33: | Line 65: | ||
|Yogurt | |Yogurt | ||
|} | |} | ||
</div> | |||
</div> | </div> | ||
| Line 67: | Line 100: | ||
|Yogurt | |Yogurt | ||
|} | |} | ||
</div> | |||
</div> | </div> | ||
| Line 90: | Line 124: | ||
</div> | </div> | ||
== Labels <small>[http://getbootstrap.com/ | == Labels <small>[http://getbootstrap.com/components/#labels Documentation]</small>== | ||
<h1> | |||
<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> | |||
</h1> | |||
<h2> | |||
<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> | |||
</h2> | |||
<h3> | |||
<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> | |||
</h3> | |||
<h4> | |||
<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> | |||
</h4> | |||
<h5> | |||
<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> | |||
</h5> | |||
<h6> | |||
<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> | |||
</h6> | |||
<p> | |||
<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> | |||
</p> | |||
== Badges == | == Badges <small>[http://getbootstrap.com/components/#badges Documentation] </small> == | ||
The answer to life, the universe, and everything is <span class="badge">42</span>. | |||
== Alerts <small>[http://getbootstrap.com/components/#alerts Documentation]</small> == | |||
<div class="alert alert-success alert-dismissible" role="alert"> | |||
<strong>Well done!</strong> You successfully read this important alert message. | |||
</div> | |||
<div class="alert alert-info alert-dismissible" role="alert"> | |||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. | |||
</div> | |||
<div class="alert alert-warning alert-dismissible" role="alert"> | |||
<strong>Warning!</strong> Best check yo self, you're not looking too good. | |||
</div> | |||
<div class="alert alert-danger alert-dismissible" role="alert"> | |||
<strong>Oh snap!</strong> Change a few things up and try submitting again. | |||
</div> | |||
== | == 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
