<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title > AdminLTE | Widgets< / title >
< meta content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name = 'viewport' >
<!-- bootstrap 3.0.2 -->
< link href = "../css/bootstrap.min.css" rel = "stylesheet" type = "text/css" / >
<!-- font Awesome -->
< link href = "../css/font-awesome.min.css" rel = "stylesheet" type = "text/css" / >
<!-- Ionicons -->
< link href = "../css/ionicons.min.css" rel = "stylesheet" type = "text/css" / >
<!-- Theme style -->
< link href = "../css/AdminLTE.css" rel = "stylesheet" type = "text/css" / >
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
< script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" > < / script >
< script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" > < / script >
<![endif]-->
< / head >
< body class = "skin-black" >
<!-- header logo: style can be found in header.less -->
< header class = "header" >
< a href = "../index.html" class = "logo" >
<!-- Add the class icon to your logo image or logo icon to add the margining -->
AdminLTE
< / a >
<!-- Header Navbar: style can be found in header.less -->
< nav class = "navbar navbar-static-top" role = "navigation" >
<!-- Sidebar toggle button -->
< a href = "#" class = "navbar-btn sidebar-toggle" data-toggle = "offcanvas" role = "button" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / a >
< div class = "navbar-right" >
< ul class = "nav navbar-nav" >
<!-- Messages: style can be found in dropdown.less -->
< li class = "dropdown messages-menu" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
< i class = "fa fa-envelope" > < / i >
< span class = "label label-success" > 4< / span >
< / a >
< ul class = "dropdown-menu" >
< li class = "header" > You have 4 messages< / li >
< li >
<!-- inner menu: contains the actual data -->
< ul class = "menu" >
< li > <!-- start message -->
< a href = "#" >
< div class = "pull-left" >
< img src = "../img/avatar3.png" class = "img-circle" alt = "User Image" / >
< / div >
< h4 >
Support Team
< small > < i class = "fa fa-clock-o" > < / i > 5 mins< / small >
< / h4 >
< p > Why not buy a new awesome theme?< / p >
< / a >
< / li > <!-- end message -->
< li >
< a href = "#" >
< div class = "pull-left" >
< img src = "../img/avatar2.png" class = "img-circle" alt = "user image" / >
< / div >
< h4 >
AdminLTE Design Team
< small > < i class = "fa fa-clock-o" > < / i > 2 hours< / small >
< / h4 >
< p > Why not buy a new awesome theme?< / p >
< / a >
< / li >
< li >
< a href = "#" >
< div class = "pull-left" >
< img src = "../img/avatar.png" class = "img-circle" alt = "user image" / >
< / div >
< h4 >
Developers
< small > < i class = "fa fa-clock-o" > < / i > Today< / small >
< / h4 >
< p > Why not buy a new awesome theme?< / p >
< / a >
< / li >
< li >
< a href = "#" >
< div class = "pull-left" >
< img src = "../img/avatar2.png" class = "img-circle" alt = "user image" / >
< / div >
< h4 >
Sales Department
< small > < i class = "fa fa-clock-o" > < / i > Yesterday< / small >
< / h4 >
< p > Why not buy a new awesome theme?< / p >
< / a >
< / li >
< li >
< a href = "#" >
< div class = "pull-left" >
< img src = "../img/avatar.png" class = "img-circle" alt = "user image" / >
< / div >
< h4 >
Reviewers
< small > < i class = "fa fa-clock-o" > < / i > 2 days< / small >
< / h4 >
< p > Why not buy a new awesome theme?< / p >
< / a >
< / li >
< / ul >
< / li >
< li class = "footer" > < a href = "#" > See All Messages< / a > < / li >
< / ul >
< / li >
<!-- Notifications: style can be found in dropdown.less -->
< li class = "dropdown notifications-menu" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
< i class = "fa fa-warning" > < / i >
< span class = "label label-warning" > 10< / span >
< / a >
< ul class = "dropdown-menu" >
< li class = "header" > You have 10 notifications< / li >
< li >
<!-- inner menu: contains the actual data -->
< ul class = "menu" >
< li >
< a href = "#" >
< i class = "ion ion-ios7-people info" > < / i > 5 new members joined today
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fa fa-warning danger" > < / i > Very long description here that may not fit into the page and may cause design problems
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fa fa-users warning" > < / i > 5 new members joined
< / a >
< / li >
< li >
< a href = "#" >
< i class = "ion ion-ios7-cart success" > < / i > 25 sales made
< / a >
< / li >
< li >
< a href = "#" >
< i class = "ion ion-ios7-person danger" > < / i > You changed your username
< / a >
< / li >
< / ul >
< / li >
< li class = "footer" > < a href = "#" > View all< / a > < / li >
< / ul >
< / li >
<!-- Tasks: style can be found in dropdown.less -->
< li class = "dropdown tasks-menu" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
< i class = "fa fa-tasks" > < / i >
< span class = "label label-danger" > 9< / span >
< / a >
< ul class = "dropdown-menu" >
< li class = "header" > You have 9 tasks< / li >
< li >
<!-- inner menu: contains the actual data -->
< ul class = "menu" >
< li > <!-- Task item -->
< a href = "#" >
< h3 >
Design some buttons
< small class = "pull-right" > 20%< / small >
< / h3 >
< div class = "progress xs" >
< div class = "progress-bar progress-bar-aqua" style = "width: 20%" role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
< span class = "sr-only" > 20% Complete< / span >
< / div >
< / div >
< / a >
< / li > <!-- end task item -->
< li > <!-- Task item -->
< a href = "#" >
< h3 >
Create a nice theme
< small class = "pull-right" > 40%< / small >
< / h3 >
< div class = "progress xs" >
< div class = "progress-bar progress-bar-green" style = "width: 40%" role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
< span class = "sr-only" > 40% Complete< / span >
< / div >
< / div >
< / a >
< / li > <!-- end task item -->
< li > <!-- Task item -->
< a href = "#" >
< h3 >
Some task I need to do
< small class = "pull-right" > 60%< / small >
< / h3 >
< div class = "progress xs" >
< div class = "progress-bar progress-bar-red" style = "width: 60%" role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
< span class = "sr-only" > 60% Complete< / span >
< / div >
< / div >
< / a >
< / li > <!-- end task item -->
< li > <!-- Task item -->
< a href = "#" >
< h3 >
Make beautiful transitions
< small class = "pull-right" > 80%< / small >
< / h3 >
< div class = "progress xs" >
< div class = "progress-bar progress-bar-yellow" style = "width: 80%" role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" >
< span class = "sr-only" > 80% Complete< / span >
< / div >
< / div >
< / a >
< / li > <!-- end task item -->
< / ul >
< / li >
< li class = "footer" >
< a href = "#" > View all tasks< / a >
< / li >
< / ul >
< / li >
<!-- User Account: style can be found in dropdown.less -->
< li class = "dropdown user user-menu" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
< i class = "glyphicon glyphicon-user" > < / i >
< span > Jane Doe < i class = "caret" > < / i > < / span >
< / a >
< ul class = "dropdown-menu" >
<!-- User image -->
< li class = "user-header bg-light-blue" >
< img src = "../img/avatar3.png" class = "img-circle" alt = "User Image" / >
< p >
Jane Doe - Web Developer
< small > Member since Nov. 2012< / small >
< / p >
< / li >
<!-- Menu Body -->
< li class = "user-body" >
< div class = "col-xs-4 text-center" >
< a href = "#" > Followers< / a >
< / div >
< div class = "col-xs-4 text-center" >
< a href = "#" > Sales< / a >
< / div >
< div class = "col-xs-4 text-center" >
< a href = "#" > Friends< / a >
< / div >
< / li >
<!-- Menu Footer -->
< li class = "user-footer" >
< div class = "pull-left" >
< a href = "#" class = "btn btn-default btn-flat" > Profile< / a >
< / div >
< div class = "pull-right" >
< a href = "#" class = "btn btn-default btn-flat" > Sign out< / a >
< / div >
< / li >
< / ul >
< / li >
< / ul >
< / div >
< / nav >
< / header >
< div class = "wrapper row-offcanvas row-offcanvas-left" >
<!-- Left side column. contains the logo and sidebar -->
< aside class = "left-side sidebar-offcanvas" >
<!-- sidebar: style can be found in sidebar.less -->
< section class = "sidebar" >
<!-- Sidebar user panel -->
< div class = "user-panel" >
< div class = "pull-left image" >
< img src = "../img/avatar3.png" class = "img-circle" alt = "User Image" / >
< / div >
< div class = "pull-left info" >
< p > Hello, Jane< / p >
< a href = "#" > < i class = "fa fa-circle text-success" > < / i > Online< / a >
< / div >
< / div >
<!-- search form -->
< form action = "#" method = "get" class = "sidebar-form" >
< div class = "input-group" >
< input type = "text" name = "q" class = "form-control" placeholder = "Search..." / >
< span class = "input-group-btn" >
< button type = 'submit' name = 'seach' id = 'search-btn' class = "btn btn-flat" > < i class = "fa fa-search" > < / i > < / button >
< / span >
< / div >
< / form >
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
< ul class = "sidebar-menu" >
< li >
< a href = "../index.html" >
< i class = "fa fa-dashboard" > < / i > < span > Dashboard< / span >
< / a >
< / li >
< li class = "active" >
< a href = "widgets.html" >
< i class = "fa fa-th" > < / i > < span > Widgets< / span > < small class = "badge pull-right bg-green" > new< / small >
< / a >
< / li >
< li class = "treeview" >
< a href = "#" >
< i class = "fa fa-bar-chart-o" > < / i >
< span > Charts< / span >
< i class = "fa fa-angle-left pull-right" > < / i >
< / a >
< ul class = "treeview-menu" >
< li > < a href = "charts/morris.html" > < i class = "fa fa-angle-double-right" > < / i > Morris< / a > < / li >
< li > < a href = "charts/flot.html" > < i class = "fa fa-angle-double-right" > < / i > Flot< / a > < / li >
< li > < a href = "charts/inline.html" > < i class = "fa fa-angle-double-right" > < / i > Inline charts< / a > < / li >
< / ul >
< / li >
< li class = "treeview" >
< a href = "#" >
< i class = "fa fa-laptop" > < / i >
< span > UI Elements< / span >
< i class = "fa fa-angle-left pull-right" > < / i >
< / a >
< ul class = "treeview-menu" >
< li > < a href = "UI/general.html" > < i class = "fa fa-angle-double-right" > < / i > General< / a > < / li >
< li > < a href = "UI/icons.html" > < i class = "fa fa-angle-double-right" > < / i > Icons< / a > < / li >
< li > < a href = "UI/buttons.html" > < i class = "fa fa-angle-double-right" > < / i > Buttons< / a > < / li >
< li > < a href = "UI/sliders.html" > < i class = "fa fa-angle-double-right" > < / i > Sliders< / a > < / li >
< li > < a href = "UI/timeline.html" > < i class = "fa fa-angle-double-right" > < / i > Timeline< / a > < / li >
< / ul >
< / li >
< li class = "treeview" >
< a href = "#" >
< i class = "fa fa-edit" > < / i > < span > Forms< / span >
< i class = "fa fa-angle-left pull-right" > < / i >
< / a >
< ul class = "treeview-menu" >
< li > < a href = "forms/general.html" > < i class = "fa fa-angle-double-right" > < / i > General Elements< / a > < / li >
< li > < a href = "forms/advanced.html" > < i class = "fa fa-angle-double-right" > < / i > Advanced Elements< / a > < / li >
< li > < a href = "forms/editors.html" > < i class = "fa fa-angle-double-right" > < / i > Editors< / a > < / li >
< / ul >
< / li >
< li class = "treeview" >
< a href = "#" >
< i class = "fa fa-table" > < / i > < span > Tables< / span >
< i class = "fa fa-angle-left pull-right" > < / i >
< / a >
< ul class = "treeview-menu" >
< li > < a href = "tables/simple.html" > < i class = "fa fa-angle-double-right" > < / i > Simple tables< / a > < / li >
< li > < a href = "tables/data.html" > < i class = "fa fa-angle-double-right" > < / i > Data tables< / a > < / li >
< / ul >
< / li >
< li >
< a href = "calendar.html" >
< i class = "fa fa-calendar" > < / i > < span > Calendar< / span >
< small class = "badge pull-right bg-red" > 3< / small >
< / a >
< / li >
< li >
< a href = "mailbox.html" >
< i class = "fa fa-envelope" > < / i > < span > Mailbox< / span >
< small class = "badge pull-right bg-yellow" > 12< / small >
< / a >
< / li >
< li class = "treeview" >
< a href = "#" >
< i class = "fa fa-folder" > < / i > < span > Examples< / span >
< i class = "fa fa-angle-left pull-right" > < / i >
< / a >
< ul class = "treeview-menu" >
< li > < a href = "examples/invoice.html" > < i class = "fa fa-angle-double-right" > < / i > Invoice< / a > < / li >
< li > < a href = "examples/login.html" > < i class = "fa fa-angle-double-right" > < / i > Login< / a > < / li >
< li > < a href = "examples/register.html" > < i class = "fa fa-angle-double-right" > < / i > Register< / a > < / li >
< li > < a href = "examples/lockscreen.html" > < i class = "fa fa-angle-double-right" > < / i > Lockscreen< / a > < / li >
< li > < a href = "examples/404.html" > < i class = "fa fa-angle-double-right" > < / i > 404 Error< / a > < / li >
< li > < a href = "examples/500.html" > < i class = "fa fa-angle-double-right" > < / i > 500 Error< / a > < / li >
< li > < a href = "examples/blank.html" > < i class = "fa fa-angle-double-right" > < / i > Blank Page< / a > < / li >
< / ul >
< / li >
< / ul >
< / section >
<!-- /.sidebar -->
< / aside >
<!-- Right side column. Contains the navbar and content of the page -->
< aside class = "right-side" >
<!-- Content Header (Page header) -->
< section class = "content-header" >
< h1 >
Widgets
< small > Preview page< / small >
< / h1 >
< ol class = "breadcrumb" >
< li > < a href = "#" > < i class = "fa fa-dashboard" > < / i > Home< / a > < / li >
< li class = "active" > Widgets< / li >
< / ol >
< / section >
<!-- Main content -->
< section class = "content" >
< h4 class = "page-header" >
AdminLTE Small Boxes
< small > Small boxes are used for viewing statistics. To create a small box use the class < code > .small-box< / code > and mix & match using the < code > bg-*< / code > classes.< / small >
< / h4 >
<!-- Small boxes (Stat box) -->
< div class = "row" >
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-aqua" >
< div class = "inner" >
< h3 >
150
< / h3 >
< p >
New Orders
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-bag" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-green" >
< div class = "inner" >
< h3 >
53< sup style = "font-size: 20px" > %< / sup >
< / h3 >
< p >
Bounce Rate
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-stats-bars" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-yellow" >
< div class = "inner" >
< h3 >
44
< / h3 >
< p >
User Registrations
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-person-add" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-red" >
< div class = "inner" >
< h3 >
65
< / h3 >
< p >
Unique Visitors
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-pie-graph" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< / div > <!-- /.row -->
<!-- Small boxes (Stat box) -->
< div class = "row" >
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-blue" >
< div class = "inner" >
< h3 >
230
< / h3 >
< p >
Sales
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-ios7-cart-outline" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-purple" >
< div class = "inner" >
< h3 >
80< sup style = "font-size: 20px" > %< / sup >
< / h3 >
< p >
Conversion Rate
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-ios7-briefcase-outline" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-teal" >
< div class = "inner" >
< h3 >
14
< / h3 >
< p >
Notofications
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-ios7-alarm-outline" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< div class = "col-lg-3 col-xs-6" >
<!-- small box -->
< div class = "small-box bg-maroon" >
< div class = "inner" >
< h3 >
160
< / h3 >
< p >
Products
< / p >
< / div >
< div class = "icon" >
< i class = "ion ion-ios7-pricetag-outline" > < / i >
< / div >
< a href = "#" class = "small-box-footer" >
More info < i class = "fa fa-arrow-circle-right" > < / i >
< / a >
< / div >
< / div > <!-- ./col -->
< / div > <!-- /.row -->
<!-- Widgets as boxes -->
< h4 class = "page-header" >
AdminLTE Boxes
< small > We use the base class < code > .box< / code > to create widgets simply.< / small >
< / h4 >
< div class = "row" >
< div class = "col-md-4" >
<!-- Default box -->
< div class = "box" >
< div class = "box-header" >
< h3 class = "box-title" > Default Box (button tooltip)< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-default btn-sm" data-widget = "collapse" data-toggle = "tooltip" title = "Collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-default btn-sm" data-widget = "remove" data-toggle = "tooltip" title = "Remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< div class = "box-footer" >
< code > .box-footer< / code >
< / div > <!-- /.box - footer -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Primary box -->
< div class = "box box-primary" >
< div class = "box-header" data-toggle = "tooltip" title = "Header tooltip" >
< h3 class = "box-title" > Primary Box (header tooltip)< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-primary btn-xs" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-primary btn-xs" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-primary< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< div class = "box-footer" >
< code > .box-footer< / code >
< / div > <!-- /.box - footer -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Info box -->
< div class = "box box-info" >
< div class = "box-header" >
< h3 class = "box-title" > Info Box< / h3 >
< div class = "box-tools pull-right" >
< div class = "label bg-aqua" > Label< / div >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-info< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< div class = "box-footer" >
< code > .box-footer< / code >
< / div > <!-- /.box - footer -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< div class = "row" >
< div class = "col-md-4" >
<!-- Danger box -->
< div class = "box box-danger" >
< div class = "box-header" >
< h3 class = "box-title" > Danger Box (Loading state)< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-danger btn-sm" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-danger btn-sm" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-danger< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
<!-- Loading (remove the following to stop the loading) -->
< div class = "overlay" > < / div >
< div class = "loading-img" > < / div >
<!-- end loading -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Success box -->
< div class = "box box-success" >
< div class = "box-header" >
< h3 class = "box-title" > Success Box (toggle buttons)< / h3 >
< div class = "box-tools pull-right" >
< div class = "btn-group" data-toggle = "btn-toggle" >
< button type = "button" class = "btn btn-success btn-xs active" data-toggle = "on" > Left< / button >
< button type = "button" class = "btn btn-success btn-xs" data-toggle = "off" > Right< / button >
< / div >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-success< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Warning box -->
< div class = "box box-warning" >
< div class = "box-header" >
< h3 class = "box-title" > Warning Box< / h3 >
< div class = "box-tools pull-right" >
< ul class = "pagination pagination-sm inline" >
< li > < a href = "#" > « < / a > < / li >
< li > < a href = "#" > 1< / a > < / li >
< li > < a href = "#" > 2< / a > < / li >
< li > < a href = "#" > » < / a > < / li >
< / ul >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-warning< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< h4 class = "page-header" >
AdminLTE Solid Boxes
< small > We use the base class < code > .box< / code > and < code > .box-solid< / code > to create solid boxes that look like this.< / small >
< / h4 >
<!-- Solid boxes -->
< div class = "row" >
< div class = "col-md-4" >
<!-- Default box -->
< div class = "box box-solid" >
< div class = "box-header" >
< h3 class = "box-title" > Default Solid Box< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-default btn-sm" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-default btn-sm" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Primary box -->
< div class = "box box-solid box-primary" >
< div class = "box-header" >
< h3 class = "box-title" > Primary Solid Box< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-primary btn-sm" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-primary btn-sm" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.box-primary< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Info box -->
< div class = "box box-solid box-info" >
< div class = "box-header" >
< h3 class = "box-title" > Info Solid Box< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-info btn-sm" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-info btn-sm" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.box-info< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< div class = "row" >
< div class = "col-md-4" >
<!-- Danger box -->
< div class = "box box-solid box-danger" >
< div class = "box-header" >
< h3 class = "box-title" > Danger Solid Box< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-danger btn-sm" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-danger btn-sm" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.box-danger< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Success box -->
< div class = "box box-solid box-success" >
< div class = "box-header" >
< h3 class = "box-title" > Success Solid Box< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-success btn-sm" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-success btn-sm" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.box-success< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Warning box -->
< div class = "box box-solid box-warning" >
< div class = "box-header" >
< h3 class = "box-title" > Warning Solid Box< / h3 >
< div class = "box-tools pull-right" >
< button class = "btn btn-warning btn-sm" data-widget = "collapse" > < i class = "fa fa-minus" > < / i > < / button >
< button class = "btn btn-warning btn-sm" data-widget = "remove" > < i class = "fa fa-times" > < / i > < / button >
< / div >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.box-warning< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< h4 class = "page-header" >
AdminLTE Tiles
< small > To create a tile we create a solid box and a < code > .bg-*< / code > class ( * being the name of the color) to the box.< / small >
< / h4 >
<!-- Solid boxes -->
< div class = "row" >
< div class = "col-md-4" >
<!-- Navy tile -->
< div class = "box box-solid bg-navy" >
< div class = "box-header" >
< h3 class = "box-title" > Navy Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-navy< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Primary tile -->
< div class = "box box-solid bg-light-blue" >
< div class = "box-header" >
< h3 class = "box-title" > Primary Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-light-blue< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Info box -->
< div class = "box box-solid bg-aqua" >
< div class = "box-header" >
< h3 class = "box-title" > Info Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-aqua< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< div class = "row" >
< div class = "col-md-4" >
<!-- Danger box -->
< div class = "box box-solid bg-red" >
< div class = "box-header" >
< h3 class = "box-title" > Danger Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-red< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Success box -->
< div class = "box box-solid bg-green" >
< div class = "box-header" >
< h3 class = "box-title" > Success Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-green< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Warning box -->
< div class = "box box-solid bg-yellow" >
< div class = "box-header" >
< h3 class = "box-title" > Warning Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-yellow< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< div class = "row" >
< div class = "col-md-4" >
<!-- Purple tile -->
< div class = "box box-solid bg-purple" >
< div class = "box-header" >
< h3 class = "box-title" > Purple Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-purple< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Blue tile -->
< div class = "box box-solid bg-blue" >
< div class = "box-header" >
< h3 class = "box-title" > Blue Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-blue< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = "col-md-4" >
<!-- Maroon tile -->
< div class = "box box-solid bg-maroon" >
< div class = "box-header" >
< h3 class = "box-title" > Maroon Tile< / h3 >
< / div >
< div class = "box-body" >
Box class: < code > .box.box-solid.bg-maroon< / code >
< p >
amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
berliner weisse wort chiller adjunct hydrometer alcohol aau!
sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
< / p >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< / section > <!-- /.content -->
< / aside > <!-- /.right - side -->
< / div > <!-- ./wrapper -->
<!-- jQuery 2.0.2 -->
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" > < / script >
<!-- Bootstrap -->
< script src = "../js/bootstrap.min.js" type = "text/javascript" > < / script >
<!-- AdminLTE App -->
< script src = "../js/AdminLTE/app.js" type = "text/javascript" > < / script >
< / body >
< / html >
