From f58eed4ff744969bc10af8ef1c4bed42c1e31eb0 Mon Sep 17 00:00:00 2001 From: Dennis Kao <ulysseskao@gmail.com> Date: Tue, 26 Apr 2016 01:57:12 +0800 Subject: [PATCH] ui-router templates --- grails-app/assets/templates/xdashangular/UI/buttons.html | 1002 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 993 insertions(+), 9 deletions(-) diff --git a/grails-app/assets/templates/xdashangular/UI/buttons.html b/grails-app/assets/templates/xdashangular/UI/buttons.html index de155ea..55ae139 100644 --- a/grails-app/assets/templates/xdashangular/UI/buttons.html +++ b/grails-app/assets/templates/xdashangular/UI/buttons.html @@ -1,10 +1,994 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <title>Title</title> -</head> -<body> +<!-- Content Header (Page header) --> +<section class="content-header"> + <h1> + Buttons + <small>Control panel</small> + </h1> + <ol class="breadcrumb"> + <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> + <li><a href="#">UI</a></li> + <li class="active">Buttons</li> + </ol> +</section> -</body> -</html> \ No newline at end of file +<!-- Main content --> +<section class="content"> + + <div class="row"> + <div class="col-md-12"> + <div class="box box-primary"> + <div class="box-header"> + <i class="fa fa-edit"></i> + + <h3 class="box-title">Buttons</h3> + </div> + <div class="box-body pad table-responsive"> + <p>Various types of buttons. Using the base class <code>.btn</code></p> + <table class="table table-bordered text-center"> + <tr> + <th>Normal</th> + <th>Large <code>.btn-lg</code></th> + <th>Small <code>.btn-sm</code></th> + <th>X-Small <code>.btn-xs</code></th> + <th>Flat <code>.btn-flat</code></th> + <th>Disabled <code>.disabled</code></th> + </tr> + <tr> + <td> + <button type="button" class="btn btn-block btn-default">Default</button> + </td> + <td> + <button type="button" class="btn btn-block btn-default btn-lg">Default</button> + </td> + <td> + <button type="button" class="btn btn-block btn-default btn-sm">Default</button> + </td> + <td> + <button type="button" class="btn btn-block btn-default btn-xs">Default</button> + </td> + <td> + <button type="button" class="btn btn-block btn-default btn-flat">Default</button> + </td> + <td> + <button type="button" class="btn btn-block btn-default disabled">Default</button> + </td> + </tr> + <tr> + <td> + <button type="button" class="btn btn-block btn-primary">Primary</button> + </td> + <td> + <button type="button" class="btn btn-block btn-primary btn-lg">Primary</button> + </td> + <td> + <button type="button" class="btn btn-block btn-primary btn-sm">Primary</button> + </td> + <td> + <button type="button" class="btn btn-block btn-primary btn-xs">Primary</button> + </td> + <td> + <button type="button" class="btn btn-block btn-primary btn-flat">Primary</button> + </td> + <td> + <button type="button" class="btn btn-block btn-primary disabled">Primary</button> + </td> + </tr> + <tr> + <td> + <button type="button" class="btn btn-block btn-success">Success</button> + </td> + <td> + <button type="button" class="btn btn-block btn-success btn-lg">Success</button> + </td> + <td> + <button type="button" class="btn btn-block btn-success btn-sm">Success</button> + </td> + <td> + <button type="button" class="btn btn-block btn-success btn-xs">Success</button> + </td> + <td> + <button type="button" class="btn btn-block btn-success btn-flat">Success</button> + </td> + <td> + <button type="button" class="btn btn-block btn-success disabled">Success</button> + </td> + </tr> + <tr> + <td> + <button type="button" class="btn btn-block btn-info">Info</button> + </td> + <td> + <button type="button" class="btn btn-block btn-info btn-lg">Info</button> + </td> + <td> + <button type="button" class="btn btn-block btn-info btn-sm">Info</button> + </td> + <td> + <button type="button" class="btn btn-block btn-info btn-xs">Info</button> + </td> + <td> + <button type="button" class="btn btn-block btn-info btn-flat">Info</button> + </td> + <td> + <button type="button" class="btn btn-block btn-info disabled">Info</button> + </td> + </tr> + <tr> + <td> + <button type="button" class="btn btn-block btn-danger">Danger</button> + </td> + <td> + <button type="button" class="btn btn-block btn-danger btn-lg">Danger</button> + </td> + <td> + <button type="button" class="btn btn-block btn-danger btn-sm">Danger</button> + </td> + <td> + <button type="button" class="btn btn-block btn-danger btn-xs">Danger</button> + </td> + <td> + <button type="button" class="btn btn-block btn-danger btn-flat">Danger</button> + </td> + <td> + <button type="button" class="btn btn-block btn-danger disabled">Danger</button> + </td> + </tr> + <tr> + <td> + <button type="button" class="btn btn-block btn-warning">Warning</button> + </td> + <td> + <button type="button" class="btn btn-block btn-warning btn-lg">Warning</button> + </td> + <td> + <button type="button" class="btn btn-block btn-warning btn-sm">Warning</button> + </td> + <td> + <button type="button" class="btn btn-block btn-warning btn-xs">Warning</button> + </td> + <td> + <button type="button" class="btn btn-block btn-warning btn-flat">Warning</button> + </td> + <td> + <button type="button" class="btn btn-block btn-warning disabled">Warning</button> + </td> + </tr> + </table> + </div> + <!-- /.box --> + </div> + </div> + <!-- /.col --> + </div> + <!-- ./row --> + <div class="row"> + <div class="col-md-6"> + <!-- Block buttons --> + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Block Buttons</h3> + </div> + <div class="box-body"> + <button type="button" class="btn btn-default btn-block">.btn-block</button> + <button type="button" class="btn btn-default btn-block btn-flat">.btn-block .btn-flat</button> + <button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button> + </div> + </div> + <!-- /.box --> + + <!-- Horizontal grouping --> + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Horizontal Button Group</h3> + </div> + <div class="box-body table-responsive pad"> + <p> + Horizontal button groups are easy to create with bootstrap. Just add your buttons + inside <code><div class="btn-group"></div></code> + </p> + + <table class="table table-bordered"> + <tr> + <th>Button</th> + <th>Icons</th> + <th>Flat</th> + <th>Dropdown</th> + </tr> + <!-- Default --> + <tr> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-default">Left</button> + <button type="button" class="btn btn-default">Middle</button> + <button type="button" class="btn btn-default">Right</button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-default">1</button> + <button type="button" class="btn btn-default">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- ./default --> + <!-- Info --> + <tr> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-info">Left</button> + <button type="button" class="btn btn-info">Middle</button> + <button type="button" class="btn btn-info">Right</button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-info"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-info">1</button> + <button type="button" class="btn btn-info">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /. info --> + <!-- /.danger --> + <tr> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-danger">Left</button> + <button type="button" class="btn btn-danger">Middle</button> + <button type="button" class="btn btn-danger">Right</button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-danger"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-danger"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-danger"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-danger">1</button> + <button type="button" class="btn btn-danger">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /.danger --> + <!-- warning --> + <tr> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-warning">Left</button> + <button type="button" class="btn btn-warning">Middle</button> + <button type="button" class="btn btn-warning">Right</button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-warning"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-warning"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-warning"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-warning">1</button> + <button type="button" class="btn btn-warning">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /.warning --> + <!-- success --> + <tr> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-success">Left</button> + <button type="button" class="btn btn-success">Middle</button> + <button type="button" class="btn btn-success">Right</button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group"> + <button type="button" class="btn btn-success">1</button> + <button type="button" class="btn btn-success">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /.success --> + </table> + </div> + </div> + <!-- /.box --> + + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Button Addon</h3> + </div> + <div class="box-body"> + <p>With dropdown</p> + + <div class="input-group margin"> + <div class="input-group-btn"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action + <span class="fa fa-caret-down"></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 class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div> + <!-- /btn-group --> + <input type="text" class="form-control"> + </div> + <!-- /input-group --> + <p>Normal</p> + + <div class="input-group margin"> + <div class="input-group-btn"> + <button type="button" class="btn btn-danger">Action</button> + </div> + <!-- /btn-group --> + <input type="text" class="form-control"> + </div> + <!-- /input-group --> + <p>Flat</p> + + <div class="input-group margin"> + <input type="text" class="form-control"> + <span class="input-group-btn"> + <button type="button" class="btn btn-info btn-flat">Go!</button> + </span> + </div> + <!-- /input-group --> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + <!-- split buttons box --> + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Split buttons</h3> + </div> + <div class="box-body"> + <!-- Split button --> + <p>Normal split buttons:</p> + + <div class="margin"> + <div class="btn-group"> + <button type="button" class="btn btn-default">Action</button> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-info">Action</button> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-danger">Action</button> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-success">Action</button> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-warning">Action</button> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + </div> + <!-- flat split buttons --> + <p>Flat split buttons:</p> + + <div class="margin"> + <div class="btn-group"> + <button type="button" class="btn btn-default btn-flat">Action</button> + <button type="button" class="btn btn-default btn-flat dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-info btn-flat">Action</button> + <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-danger btn-flat">Action</button> + <button type="button" class="btn btn-danger btn-flat dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-success btn-flat">Action</button> + <button type="button" class="btn btn-success btn-flat dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-warning btn-flat">Action</button> + <button type="button" class="btn btn-warning btn-flat dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + <span class="sr-only">Toggle Dropdown</span> + </button> + <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> + </ul> + </div> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- end split buttons box --> + + <!-- social buttons --> + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Social Buttons (By <a href="https://github.com/lipis/bootstrap-social">Lipis</a>) + </h3> + </div> + <div class="box-body"> + <a class="btn btn-block btn-social btn-bitbucket"> + <i class="fa fa-bitbucket"></i> Sign in with Bitbucket + </a> + <a class="btn btn-block btn-social btn-dropbox"> + <i class="fa fa-dropbox"></i> Sign in with Dropbox + </a> + <a class="btn btn-block btn-social btn-facebook"> + <i class="fa fa-facebook"></i> Sign in with Facebook + </a> + <a class="btn btn-block btn-social btn-flickr"> + <i class="fa fa-flickr"></i> Sign in with Flickr + </a> + <a class="btn btn-block btn-social btn-foursquare"> + <i class="fa fa-foursquare"></i> Sign in with Foursquare + </a> + <a class="btn btn-block btn-social btn-github"> + <i class="fa fa-github"></i> Sign in with GitHub + </a> + <a class="btn btn-block btn-social btn-google"> + <i class="fa fa-google-plus"></i> Sign in with Google + </a> + <a class="btn btn-block btn-social btn-instagram"> + <i class="fa fa-instagram"></i> Sign in with Instagram + </a> + <a class="btn btn-block btn-social btn-linkedin"> + <i class="fa fa-linkedin"></i> Sign in with LinkedIn + </a> + <a class="btn btn-block btn-social btn-tumblr"> + <i class="fa fa-tumblr"></i> Sign in with Tumblr + </a> + <a class="btn btn-block btn-social btn-twitter"> + <i class="fa fa-twitter"></i> Sign in with Twitter + </a> + <a class="btn btn-block btn-social btn-vk"> + <i class="fa fa-vk"></i> Sign in with VK + </a> + <br> + + <div class="text-center"> + <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a> + <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a> + <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a> + <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a> + <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a> + <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a> + <a class="btn btn-social-icon btn-google"><i class="fa fa-google-plus"></i></a> + <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a> + <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a> + <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a> + <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a> + <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a> + </div> + </div> + </div> + <!-- /.box --> + + </div> + <!-- /.col --> + <div class="col-md-6"> + <!-- Application buttons --> + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Application Buttons</h3> + </div> + <div class="box-body"> + <p>Add the classes <code>.btn.btn-app</code> to an <code><a></code> tag to achieve the following:</p> + <a class="btn btn-app"> + <i class="fa fa-edit"></i> Edit + </a> + <a class="btn btn-app"> + <i class="fa fa-play"></i> Play + </a> + <a class="btn btn-app"> + <i class="fa fa-repeat"></i> Repeat + </a> + <a class="btn btn-app"> + <i class="fa fa-pause"></i> Pause + </a> + <a class="btn btn-app"> + <i class="fa fa-save"></i> Save + </a> + <a class="btn btn-app"> + <span class="badge bg-yellow">3</span> + <i class="fa fa-bullhorn"></i> Notifications + </a> + <a class="btn btn-app"> + <span class="badge bg-green">300</span> + <i class="fa fa-barcode"></i> Products + </a> + <a class="btn btn-app"> + <span class="badge bg-purple">891</span> + <i class="fa fa-users"></i> Users + </a> + <a class="btn btn-app"> + <span class="badge bg-teal">67</span> + <i class="fa fa-inbox"></i> Orders + </a> + <a class="btn btn-app"> + <span class="badge bg-aqua">12</span> + <i class="fa fa-envelope"></i> Inbox + </a> + <a class="btn btn-app"> + <span class="badge bg-red">531</span> + <i class="fa fa-heart-o"></i> Likes + </a> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + <!-- Various colors --> + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Different colors</h3> + </div> + <div class="box-body"> + <p>Mix and match with various background colors. Use base class <code>.btn</code> and add any available + <code>.bg-*</code> class</p> + <!-- You may notice a .margin class added + here but that's only to make the content + display correctly without having to use a table--> + <p> + <button type="button" class="btn bg-maroon btn-flat margin">.btn.bg-maroon.btn-flat</button> + <button type="button" class="btn bg-purple btn-flat margin">.btn.bg-purple.btn-flat</button> + <button type="button" class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button> + <button type="button" class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button> + <button type="button" class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button> + </p> + + <p> + <button type="button" class="btn bg-maroon margin">.btn.bg-maroon</button> + <button type="button" class="btn bg-purple margin">.btn.bg-purple</button> + <button type="button" class="btn bg-navy margin">.btn.bg-navy</button> + <button type="button" class="btn bg-orange margin">.btn.bg-orange</button> + <button type="button" class="btn bg-olive margin">.btn.bg-olive</button> + </p> + </div> + </div> + <!-- /.box --> + + <!-- Vertical grouping --> + <div class="box"> + <div class="box-header"> + <h3 class="box-title">Vertical Button Group</h3> + </div> + <div class="box-body table-responsive pad"> + + <p> + Vertical button groups are easy to create with bootstrap. Just add your buttons + inside <code><div class="btn-group-vertical"></div></code> + </p> + + <table class="table table-bordered"> + <tr> + <th>Button</th> + <th>Icons</th> + <th>Flat</th> + <th>Dropdown</th> + </tr> + <!-- Default --> + <tr> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-default">Top</button> + <button type="button" class="btn btn-default">Middle</button> + <button type="button" class="btn btn-default">Bottom</button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-default btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-default">1</button> + <button type="button" class="btn btn-default">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- ./default --> + <!-- Info --> + <tr> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-info">Top</button> + <button type="button" class="btn btn-info">Middle</button> + <button type="button" class="btn btn-info">Bottom</button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-info"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-info btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-info">1</button> + <button type="button" class="btn btn-info">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /. info --> + <!-- /.danger --> + <tr> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-danger">Top</button> + <button type="button" class="btn btn-danger">Middle</button> + <button type="button" class="btn btn-danger">Bottom</button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-danger"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-danger"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-danger"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-danger btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-danger">1</button> + <button type="button" class="btn btn-danger">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /.danger --> + <!-- warning --> + <tr> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-warning">Top</button> + <button type="button" class="btn btn-warning">Middle</button> + <button type="button" class="btn btn-warning">Bottom</button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-warning"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-warning"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-warning"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-warning btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-warning">1</button> + <button type="button" class="btn btn-warning">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /.warning --> + <!-- success --> + <tr> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-success">Top</button> + <button type="button" class="btn btn-success">Middle</button> + <button type="button" class="btn btn-success">Bottom</button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-success"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-success"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-success"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-left"></i></button> + <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-center"></i></button> + <button type="button" class="btn btn-success btn-flat"><i class="fa fa-align-right"></i></button> + </div> + </td> + <td> + <div class="btn-group-vertical"> + <button type="button" class="btn btn-success">1</button> + <button type="button" class="btn btn-success">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><a href="#">Dropdown link</a></li> + <li><a href="#">Dropdown link</a></li> + </ul> + </div> + </div> + </td> + </tr> + <!-- /.success --> + </table> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col --> + </div> + <!-- /. row --> +</section> +<!-- /.content --> -- Gitblit v0.0.0-SNAPSHOT