cux-test
Version:
[SB Admin](http://startbootstrap.com/template-overviews/sb-admin/) is an open source, admin dashboard template for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/).
842 lines (797 loc) • 254 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CommonUX Guidelines">
<meta name="author" content="David Romero">
<title>Interactive styleguide prototype</title>
<!-- Bootstrap CUX CSS -->
<link href="css/abb-style.css" rel="stylesheet">
<!-- This document's css -->
<link href="css/document.css" rel="stylesheet">
<!-- Extra CUX customized CSS -->
<link href="css/bootstrap-slider.css" rel="stylesheet">
<link href="css/bootstrap-toggle.css" rel="stylesheet">
<link href="css/bootstrap-step.css" rel="stylesheet">
<link href="css/ladda-themeless.min.css" rel="stylesheet">
<link href="css/daterangepicker.css" rel="stylesheet">
<link href="css/jquery.minicolors.css" rel="stylesheet">
<link href="css/bootstrap-tagsinput.css" rel="stylesheet">
<link href="css/roundslider.css" rel="stylesheet">
<link href="css/sweet-alert.css" rel="stylesheet">
<link href="css/pnotify.css" rel="stylesheet">
<link href="css/nv.d3.css" rel="stylesheet">
<link href="css/flat-toggle.css" rel="stylesheet">
<link href="css/bootstrap-treefy.css" rel="stylesheet">
<link href="css/jquery.typeahead.css" rel="stylesheet">
<link href="css/d3viz.css" rel="stylesheet">
<link href="css/datatables.min.css" rel="stylesheet">
<link href="css/bootstrap-iconpicker.css" rel="stylesheet">
<link href="css/font-awesome-animation.css" rel="stylesheet">
<!-- Icon-Fonts -->
<link rel="stylesheet" href="fonts/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet" href="fonts/icon-fonts/commonux-2.0.0/css/commonux-2.0.0.css"/>
<!-- Custom Fonts -->
<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- 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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background:#ffffff;" data-spy="scroll" data-target="scrollspy" data-offset="20">
<div class="container-fluid">
<!-- Top Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav0">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="margin-left:15px;" href="#" id="nav0">
CommonUX CSS for Styleguide v2.0
</a>
</div>
</div>
</div>
<div class="container-fluid">
<!--Nav Bar -->
<!--nav class="col-lg-2 scrollspy" style="padding-top:-100px;">
<ul id="sidebar" class="nav hidden-xs hidden-sm" style="margin-top: -120px; margin-left:-10px;" data-spy="affix">
<li>
<a href="#ui">UI Components</a>
<ul class="nav nav-stacked">
<li><a href="#ui-view">View</a></li>
<li><a href="#ui-menus">Menus</a></li>
<li><a href="#ui-selections">Selections</a></li>
<li><a href="#ui-buttons">Buttons</a></li>
<li><a href="#ui-lines">Lines and boxes</a></li>
<li><a href="#ui-icons">Icon libraries</a></li>
<li><a href="#ui-forms">Forms</a></li>
<li><a href="#ui-pickers">Pickers</a></li>
<li><a href="#ui-art">Examples AlarmInsight</a></li>
<li><a href="#ui-sif">Examples TRAC</a></li>
<li><a href="#ui-graphs">Graphs</a></li>
</ul>
</li>
</ul>
</nav-->
<!--Main Content -->
<div class="col-lg-8 col-sm-12 col-xs-12 scrollspy" style="margin-left:20px;">
<!--UI-->
<section class="group">
<div class="bs-docs-section">
<h1 id="ui" class="page-header">UI Components</h1>
<!--UI-View-->
<h2 id="ui-view">View</h2>
<!-- Navbar -->
<h3 id="ui-view-windows">Horizontal navbar main color</h3>
<div class="well well-transparent" style="background: #f9f9f9;">
<nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="margin-left:20px;" href="#">Product name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="margin-left:-30px;">
<li class="active"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group" style="margin-left:10px;">
<input type="text" class="form-control-dark" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<h3>Horizontal navbar alternative color</h3>
<div class="well well-transparent" style="background: #f9f9f9;">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex2-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand-red" style="margin-left:20px;" href="#">Product name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex2-collapse">
<ul class="nav navbar-nav" style="margin-left:-30px;">
<li class="active"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group" style="margin-left:10px;">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<div class="form-group" style="margin-left:20px;">
<button type="button" class="btn btn-danger"><i class="fa fa-times"></i></button>
<button type="button" class="btn btn-success"><i class="fa fa-check"></i></button>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<h3>Horizontal navbar</h3>
<p>Examples for diffetent types of navigation based on text-only, icon-only and text + icon</p>
<div class="well well-transparent" style="background: #f9f9f9;">
<!-- Text menus -->
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="margin-left:10px;" href="#">Product name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li data-toggle="tab" class="active"><a href="#menu1">Menu 1</a>
</li>
<li data-toggle="tab"><a href="#menu2">Menu 2</a>
</li>
<li data-toggle="tab"><a href="#menu3">Menu 3</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" style="margin-right:-30px;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="cux abb-cux-menu cux-20"></i></a>
<ul class="dropdown-menu pull-right">
<div class="col-lg-12">
<li style="margin-top:10px;"><a href="#"><i
class="cux abb-cux-location cux-24 cux-fw"></i> Map overview</a></li>
<li style="margin-top:10px;"><a href="#"><i
class="cux abb-cux-briefcase cux-24 cux-fw"></i> My work</a></li>
<li style="margin-top:10px; margin-bottom:10px;"><a href="#"><i
class="cux abb-cux-camera cux-24 cux-fw"></i> Reports</a></li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Icon menus -->
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="margin-left:10px;" href="#">Product name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li data-toggle="tab" class="active"><a href="#pie"><i class="cux abb-cux-pie-chart cux-20"></i></a>
</li>
<li data-toggle="tab"><a href="#singleline"><i class="cux abb-cux-smartphone cux-20"></i></a>
</li>
<li data-toggle="tab"><a href="#dashboard"><i class="cux abb-cux-globe cux-20"></i></a>
</li>
<li data-toggle="tab"><a href="#bar"><i class="cux abb-cux-bar-chart cux-20"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Text + icon menus -->
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="margin-left:10px;" href="#">Product name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li data-toggle="tab" class="active"><a href="#dash"><i class="cux abb-cux-screen cux-20 cux-fw"></i> Dashboard</a>
</li>
<li data-toggle="tab"><a href="#sld"><i class="cux abb-cux-system cux-20 cux-fw"></i> Single line</a>
</li>
<li data-toggle="tab"><a href="#al"><i class="cux abb-cux-alarm-bell cux-20 cux-fw"></i> Alarms</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="cux abb-cux-share cux-20 cux-fw"></i> Share</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<h3>Submenus</h3>
<p>Examples for several levels in the top-level navigation (Alarm Insight > Alarm Analysis > Frequent
Alarms)</p>
<div class="well well-transparent" style="background: #f9f9f9;">
<!-- Text + alarms and notifications -->
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="margin-left:10px;" href="#">Mosaic</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">AlarmInsight <b
class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">KPI reports</a>
</li>
<li><a href="#">Alarm Rationalization Tool</a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Alarm Analysis</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Dashboard</a></li>
<li class="dropdown-submenu">
<a href="#">Frequent alarms</a>
<ul class="dropdown-menu">
<li><a href="#">Top 10 - Last day</a></li>
<li><a href="#">Top 10 - Last month</a></li>
<li><a href="#">Top 20 - Last year</a></li>
</ul>
</li>
<li><a href="#">Standing alarms</a></li>
<li><a href="#">Chattering alarms</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-header">Global settings</li>
<li><a href="#">Login</a>
</li>
<li><a href="#">Licensing</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SafetyInsight <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Shift report</a>
</li>
<li><a href="#">Automated shutdown report</a>
</li>
<li><a href="#">Blocklog</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Global settings</li>
<li><a href="#">Login</a>
</li>
<li><a href="#">Licensing</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">WiMon <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">WiMon Network visualization</a>
</li>
<li><a href="#">ABB Analyst</a>
</li>
<li><a href="#">Trending tool</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Global settings</li>
<li><a href="#">Login</a>
</li>
<li><a href="#">Licensing</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Combined Sidebar -->
<h3>Combined navbar</h3>
<p>Example application where black top navigation and gray side navigation are used</p>
<div class="well well-transparent" style="background: #f9f9f9;">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="margin-left:10px;" href="#">Alarm Insight</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="margin-left:-30px;">
<li data-toggle="tab" class="active"><a href="#">Alarm Analysis</a>
</li>
<li data-toggle="tab"><a href="#about">Event Log</a>
</li>
<li data-toggle="tab"><a href="#contact">Alarm Rationalization Tool</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3" style="margin-left: -15px;">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation"
style="height:500px; margin-top:-25px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav nav-stacked"
style="height:100%; margin-top:10px; margin-left:10px;">
<li class="active"><a href="#">Frequent alarms <span class="badge">24</span></a>
</li>
<li><a href="#">Standing alarms <span class="badge">10</span></a></li>
<li><a href="#">Chattering alarms <span class="badge">25</span></a></li>
<li><a href="#">Alarm floods <span class="badge">500</span></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-lg-9 col-sm-12 col-xs-12" >
<svg style="height:500px; width:100%;" id="chart4"></svg>
</div>
</div>
</div>
<span style="display:block; width: 100%; margin-top:-20px; text-align:right;" class="label label-info">The graphs in this example use the <a
style="font-weight: bold;" href="http://nvd3.org/index.html" target="_blank">NVD3.js</a> library</span>
<!-- Touch example -->
<!--h3 style="margin-top:50px;">Touch example PCS100</h3>
<div class="well well-transparent">
<div class="panel" style="width:100%; height:650px; background:#efefef; padding:15px;">
<div class="row">
<div class="col-lg-9" style="margin-top:15px">
<button class="btn btn-default btn-xl active" style="width:170px; margin-bottom:10px;">
Status
</button>
<button class="btn btn-default btn-xl" style="width:170px; margin-bottom:10px;"> Event
log
</button>
<button class="btn btn-default btn-xl" style="width:170px; margin-bottom:10px;">
Product
</button>
<button class="btn btn-default btn-xl" style="width:170px; margin-bottom:10px;"> Menu
</button>
<button class="btn btn-default btn-xl" style="width:170px; margin-bottom:10px;">
Summary
</button>
</div>
<div class="col-lg-3" style="margin-top:15px">
<button class="btn btn-danger btn-xl active" style="width:170px; height:110px;"><i
class="fa fa-circle-o-notch fa-3x"></i></button>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-lg-3">
<section style="margin-left:10px;">
<h3 style="font-weight:bold;"> Utility </h3>
<form class="form-inline">
<div class="form-group">
<h3> V1 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 396 V </h3>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<h3> V2 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 396 V </h3>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<h3> V3 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 395 V </h3>
</div>
</form>
</section>
<section style="margin-left:10px;">
<form class="form-inline">
<div class="form-group">
<h3> I1 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 6 A </h3>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<h3> I2 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 9 A </h3>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<h3> I3 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 7 A </h3>
</div>
</form>
</section>
</div>
<div class="col-lg-6">
<img src="assets/circuit.svg"
style="height:250px; margin-top:100px; margin-left:-40px;">
</div>
<div class="col-lg-3">
<section style="margin-left:10px;">
<h3 style="font-weight:bold;"> Load </h3>
<form class="form-inline">
<div class="form-group">
<h3> V1 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 397 V </h3>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<h3> V2 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 396 V </h3>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<h3> V3 = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 395 V </h3>
</div>
</form>
</section>
<section style="margin-left:10px;">
<h3 style="font-weight:bold;"> Storage </h3>
<form class="form-inline">
<div class="form-group">
<h3> DC = </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 794 V </h3>
</div>
</form>
</section>
<section style="margin-left:10px;">
<h3 style="font-weight:bold;"> Availability </h3>
<form class="form-inline">
<div class="form-group">
<h3> 100% </h3>
</div>
<div class="form-group">
<h3 style="color:#3799e9; font-weight:bold;"> 180 Amps </h3>
</div>
</form>
</section>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-static-bottom" style="margin-top:-25px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" style="margin-left:5px;" href="#"></a>
<span class="badge alert-success" style="margin-left:-30px;"> ONLINE </span>
<span class="badge-nav alert-warning-discrete" style="margin-left: 150px;"> <i
class="fa fa-exclamation-triangle fa-lg"></i> Warning </span>
<span class="badge-nav alert-danger-discrete"> <i
class="fa fa-exclamation-triangle fa-lg"></i> Critical error in System 24 </span>
</div>
</div>
</nav>
</div-->
<h3 id="ui-view-pagination">Pagination</h3>
<div class="well well-transparent">
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<!--UI-Menus-->
<p style="height:100px;"/>
<h2 id="ui-menus">Menus</h2>
<!-- UI-Dropdowns -->
<h3 id="ui-menu-dropdowns">Dropdowns</h3>
<div class="well well-transparent">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="well well-transparent">
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<!-- UI-Tabs -->
<h3 id="ui-menus-tabs">Tabs</h3>
<div class="well well-transparent">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
</div>
<!-- UI-Breadcumbs -->
<h3 id="ui-menus-breadcumbs">Breadcumbs</h3>
<p>Empty forms look like this</p>
<div class="well well-transparent">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
<!-- UI-menus-subtabs -->
<h3>Subtabs</h3>
<div class="well well-transparent">
<section>
<ul class="nav nav-tabs" style="margin-bottom: 30px;">
<li><a href="#course" data-toggle="tab">Module 1</a></li>
<li><a href="#module1" data-toggle="tab">Module 2</a></li>
<li><a href="#module2" data-toggle="tab">Module 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<ul class="nav nav-subtabs">
<li><a href="#module1-step1" data-toggle="tab">Feature 1</a></li>
<li><a href="#module1-step2" data-toggle="tab">Feature 2</a></li>
</ul>
</div>
<div class="tab-pane" id="module1">
<ul class="nav nav-subtabs">
<li><a href="#module1-step1" data-toggle="tab">Feature 3</a></li>
<li><a href="#module1-step2" data-toggle="tab">Feature 4</a></li>
</ul>
</div>
<div class="tab-pane" id="module2">
<ul class="nav nav-subtabs">
<li><a href="#module1-step1" data-toggle="tab">Feature 5</a></li>
<li><a href="#module1-step2" data-toggle="tab">Feature 6</a></li>
</ul>
</div>
</div>
</section>
</div>
<!-- UI-TreeTable -->
<h3>Tree table</h3>
<p>Tree trable</p>
<div class="well well-transparent">
<table class="table" id="treefy">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
</tr>
</thead>
<tbody>
<tr data-node="treetable-1" class="active">
<td><input type="checkbox" checked="checked" name="row.id"/></td>
<td>Node</td>
<td>1</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-2" class="active" data-pnode="treetable-parent-1">
<td><input type="checkbox" checked="checked" name="row.id"/></td>
<td>Node</td>
<td>1-1</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-3" data-pnode="treetable-parent-1">
<td>
<div class="checbox"><input type="checkbox" name="row.id"/></div>
</td>
<td>Node</td>
<td>1-2</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-4" data-pnode="treetable-parent-3">
<td><input type="checkbox" name="row.id"/></td>
<td>Node</td>
<td>1-2-1</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-5">
<td><input type="checkbox" name="row.id"/></td>
<td>Node</td>
<td>2</td>
<td>c</td>
<td>info</td>
</tr>
</tbody>
</table>
</div>
<span style="display:block; width: 100%; margin-top:-20px; text-align:right;" class="label label-info">This table uses the <a
style="font-weight: bold;" href="http://supwisdom.github.io/bootstrap-treefy/" target="_blank">Bootstrap Treefy</a> library</span>
<!-- UI-Selections -->
<p style="height:100px;"/>
<h2 id="ui-selections">Selections</h2>
<!-- UI-Checkboxes -->
<h3 id=