Togopapel

Boxes & Tables

togopapel

Tables & Boxes

Table with Predefined Colors

[table class=”table-default”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table]

Table: Striped Rows

[table class=”table-teal table-striped”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table]

Table: Hover Rows

[table class=”table-primary table-hover”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table]

Contextual classes

Use contextual classes to color table rows or individual cells.

  • .active – Applies the hover color to a particular row or cell
  • .success – Indicates a successful or positive action
  • .warning – Indicates a warning that might need attention
  • .danger – Indicates a dangerous or potentially negative action
[table class=”table-info”]

BrowserVersionCSS GradePlatform
defaultCol contentCol contentCol content
activeCol contentCol contentCol content
successCol contentCol contentCol content
warningCol contentCol contentCol content
dangerCol contentCol contentCol content
[/table]

Other table colors:

Predefined colors:
table-default, table-primary, table-success, table-warning, table-danger, table-info, table-pink, table-teal, table-orange, table-purple, table-brown, table-black

[table class=”table-success”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table] [table class=”table-warning”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table] [table class=”table-orange”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table] [table class=”table-purple”]
togopapel
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table] [table class=”table-danger”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table] [code] [table class=”table-danger”]
BrowserVersionCSS GradePlatform
Firefox6.0.2AAAWin XP
Internet Explorer8CWin Vista
Chrome5BBWin 7
Safari5AAWin 7
[/table] [/code]

Styled Boxes

While not always necessary, sometimes you need to put your CONTENT in a box. For those situations, try the Box shortcode.

Basic example

[styled_box title=”” footer=”” class=”panel-default”]Basic panel example[/styled_box]

Box with heading

[styled_box title=”Box Title” footer=”” class=”panel-default”]Box content[/styled_box]

Box with footer

[styled_box title=”” footer=”default” class=”panel-default”]default – Box content[/styled_box]

Color versions:

Can be combined with icons

[styled_box title=”Primary” icon=”icon-home” footer=”” class=”panel-primary”]primary – Box content[/styled_box] [styled_box title=”success” icon=”icon-thumbs-up” footer=”” class=”panel-success”]success – Box content[/styled_box] [styled_box title=”info” icon=”icon-info-sign” footer=”” class=”panel-info”]info – Box content[/styled_box] [styled_box title=”warning” icon=”” footer=”” class=”panel-warning”]warning – Box content[/styled_box] [styled_box title=”danger” icon=”” footer=”” class=”panel-danger”]danger – Box content[/styled_box] [styled_box title=”pink” icon=”” footer=”” class=”panel-pink”]Box content[/styled_box] [styled_box title=”teal” icon=”” footer=”” class=”panel-teal”]Box content[/styled_box] [styled_box title=”purple” icon=”” footer=”” class=”panel-purple”]Box content[/styled_box] [styled_box title=”orange” icon=”” footer=”” class=”panel-orange”]Box content[/styled_box] [styled_box title=”brown” icon=”” footer=”” class=”panel-brown”]Box content[/styled_box] [styled_box title=”black” icon=”” footer=”” class=”panel-black”]Box content[/styled_box] [code] [styled_box title=”orange” icon=”” footer=”” class=”panel-orange”]Box content[/styled_box] [/code]

[styled _box] colors: orange (default), pink, brown, violet, turquoise, green, blue, dark, purple, brown, cyan

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.