Drinking & Dragons

Drinking And Dragons Skin/Styles: Difference between revisions

From Drinking and Dragons
← Older edit
No edit summary
 
(9 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>==


Line 93: Line 124:
</div>
</div>


== Labels <small>[http://getbootstrap.com/css/#tables Documentation]</small>==
== 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 ==
== 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 ==
== 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>


== Panels ==
== 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>


== Wells ==
== 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 17: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

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 footer

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
Retrieved from "https://drinkinganddragons.com/w/index.php?title=Drinking_And_Dragons_Skin/Styles&oldid=22606"