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/general.html | 919 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 910 insertions(+), 9 deletions(-) diff --git a/grails-app/assets/templates/xdashangular/UI/general.html b/grails-app/assets/templates/xdashangular/UI/general.html index de155ea..908d9e8 100644 --- a/grails-app/assets/templates/xdashangular/UI/general.html +++ b/grails-app/assets/templates/xdashangular/UI/general.html @@ -1,10 +1,911 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <title>Title</title> -</head> -<body> +<!-- Content Header (Page header) --> +<section class="content-header"> + <h1> + General UI + <small>Preview of UI elements</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">General</li> + </ol> +</section> -</body> -</html> \ No newline at end of file +<!-- Main content --> +<section class="content"> + <!-- COLOR PALETTE --> + <div class="box box-default color-palette-box"> + <div class="box-header with-border"> + <h3 class="box-title"><i class="fa fa-tag"></i> Color Palette</h3> + </div> + <div class="box-body"> + <div class="row"> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Primary</h4> + + <div class="color-palette-set"> + <div class="bg-light-blue disabled color-palette"><span>Disabled</span></div> + <div class="bg-light-blue color-palette"><span>#3c8dbc</span></div> + <div class="bg-light-blue-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Info</h4> + + <div class="color-palette-set"> + <div class="bg-aqua disabled color-palette"><span>Disabled</span></div> + <div class="bg-aqua color-palette"><span>#00c0ef</span></div> + <div class="bg-aqua-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Success</h4> + + <div class="color-palette-set"> + <div class="bg-green disabled color-palette"><span>Disabled</span></div> + <div class="bg-green color-palette"><span>#00a65a</span></div> + <div class="bg-green-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Warning</h4> + + <div class="color-palette-set"> + <div class="bg-yellow disabled color-palette"><span>Disabled</span></div> + <div class="bg-yellow color-palette"><span>#f39c12</span></div> + <div class="bg-yellow-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Danger</h4> + + <div class="color-palette-set"> + <div class="bg-red disabled color-palette"><span>Disabled</span></div> + <div class="bg-red color-palette"><span>#f56954</span></div> + <div class="bg-red-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Gray</h4> + + <div class="color-palette-set"> + <div class="bg-gray disabled color-palette"><span>Disabled</span></div> + <div class="bg-gray color-palette"><span>#d2d6de</span></div> + <div class="bg-gray-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + </div> + <!-- /.row --> + <div class="row"> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Navy</h4> + + <div class="color-palette-set"> + <div class="bg-navy disabled color-palette"><span>Disabled</span></div> + <div class="bg-navy color-palette"><span>#001F3F</span></div> + <div class="bg-navy-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Teal</h4> + + <div class="color-palette-set"> + <div class="bg-teal disabled color-palette"><span>Disabled</span></div> + <div class="bg-teal color-palette"><span>#39CCCC</span></div> + <div class="bg-teal-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Purple</h4> + + <div class="color-palette-set"> + <div class="bg-purple disabled color-palette"><span>Disabled</span></div> + <div class="bg-purple color-palette"><span>#605ca8</span></div> + <div class="bg-purple-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Orange</h4> + + <div class="color-palette-set"> + <div class="bg-orange disabled color-palette"><span>Disabled</span></div> + <div class="bg-orange color-palette"><span>#ff851b</span></div> + <div class="bg-orange-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Maroon</h4> + + <div class="color-palette-set"> + <div class="bg-maroon disabled color-palette"><span>Disabled</span></div> + <div class="bg-maroon color-palette"><span>#D81B60</span></div> + <div class="bg-maroon-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + <div class="col-sm-4 col-md-2"> + <h4 class="text-center">Black</h4> + + <div class="color-palette-set"> + <div class="bg-black disabled color-palette"><span>Disabled</span></div> + <div class="bg-black color-palette"><span>#111111</span></div> + <div class="bg-black-active color-palette"><span>Active</span></div> + </div> + </div> + <!-- /.col --> + </div> + <!-- /.row --> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + <!-- START ALERTS AND CALLOUTS --> + <h2 class="page-header">Alerts and Callouts</h2> + + <div class="row"> + <div class="col-md-6"> + <div class="box box-default"> + <div class="box-header with-border"> + <i class="fa fa-warning"></i> + + <h3 class="box-title">Alerts</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <div class="alert alert-danger alert-dismissible"> + <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <h4><i class="icon fa fa-ban"></i> Alert!</h4> + Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire + soul, like these sweet mornings of spring which I enjoy with my whole heart. + </div> + <div class="alert alert-info alert-dismissible"> + <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <h4><i class="icon fa fa-info"></i> Alert!</h4> + Info alert preview. This alert is dismissable. + </div> + <div class="alert alert-warning alert-dismissible"> + <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <h4><i class="icon fa fa-warning"></i> Alert!</h4> + Warning alert preview. This alert is dismissable. + </div> + <div class="alert alert-success alert-dismissible"> + <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <h4><i class="icon fa fa-check"></i> Alert!</h4> + Success alert preview. This alert is dismissable. + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col --> + + <div class="col-md-6"> + <div class="box box-default"> + <div class="box-header with-border"> + <i class="fa fa-bullhorn"></i> + + <h3 class="box-title">Callouts</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <div class="callout callout-danger"> + <h4>I am a danger callout!</h4> + + <p>There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul, + like these sweet mornings of spring which I enjoy with my whole heart.</p> + </div> + <div class="callout callout-info"> + <h4>I am an info callout!</h4> + + <p>Follow the steps to continue to payment.</p> + </div> + <div class="callout callout-warning"> + <h4>I am a warning callout!</h4> + + <p>This is a yellow callout.</p> + </div> + <div class="callout callout-success"> + <h4>I am a success callout!</h4> + + <p>This is a green callout.</p> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col --> + </div> + <!-- /.row --> + <!-- END ALERTS AND CALLOUTS --> + <!-- START CUSTOM TABS --> + <h2 class="page-header">AdminLTE Custom Tabs</h2> + + <div class="row"> + <div class="col-md-6"> + <!-- Custom Tabs --> + <div class="nav-tabs-custom"> + <ul class="nav nav-tabs"> + <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li> + <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li> + <li><a href="#tab_3" data-toggle="tab">Tab 3</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + Dropdown <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + </ul> + </li> + <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="tab_1"> + <b>How to use:</b> + + <p>Exactly like the original bootstrap tabs except you should use + the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p> + A wonderful serenity has taken possession of my entire soul, + like these sweet mornings of spring which I enjoy with my whole heart. + I am alone, and feel the charm of existence in this spot, + which was created for the bliss of souls like mine. I am so happy, + my dear friend, so absorbed in the exquisite sense of mere tranquil existence, + that I neglect my talents. I should be incapable of drawing a single stroke + at the present moment; and yet I feel that I never was a greater artist than now. + </div> + <!-- /.tab-pane --> + <div class="tab-pane" id="tab_2"> + The European languages are members of the same family. Their separate existence is a myth. + For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ + in their grammar, their pronunciation and their most common words. Everyone realizes why a + new common language would be desirable: one could refuse to pay expensive translators. To + achieve this, it would be necessary to have uniform grammar, pronunciation and more common + words. If several languages coalesce, the grammar of the resulting language is more simple + and regular than that of the individual languages. + </div> + <!-- /.tab-pane --> + <div class="tab-pane" id="tab_3"> + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, + when an unknown printer took a galley of type and scrambled it to make a type specimen book. + It has survived not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software + like Aldus PageMaker including versions of Lorem Ipsum. + </div> + <!-- /.tab-pane --> + </div> + <!-- /.tab-content --> + </div> + <!-- nav-tabs-custom --> + </div> + <!-- /.col --> + + <div class="col-md-6"> + <!-- Custom Tabs (Pulled to the right) --> + <div class="nav-tabs-custom"> + <ul class="nav nav-tabs pull-right"> + <li class="active"><a href="#tab_1-1" data-toggle="tab">Tab 1</a></li> + <li><a href="#tab_2-2" data-toggle="tab">Tab 2</a></li> + <li><a href="#tab_3-2" data-toggle="tab">Tab 3</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> + Dropdown <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + </ul> + </li> + <li class="pull-left header"><i class="fa fa-th"></i> Custom Tabs</li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="tab_1-1"> + <b>How to use:</b> + + <p>Exactly like the original bootstrap tabs except you should use + the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p> + A wonderful serenity has taken possession of my entire soul, + like these sweet mornings of spring which I enjoy with my whole heart. + I am alone, and feel the charm of existence in this spot, + which was created for the bliss of souls like mine. I am so happy, + my dear friend, so absorbed in the exquisite sense of mere tranquil existence, + that I neglect my talents. I should be incapable of drawing a single stroke + at the present moment; and yet I feel that I never was a greater artist than now. + </div> + <!-- /.tab-pane --> + <div class="tab-pane" id="tab_2-2"> + The European languages are members of the same family. Their separate existence is a myth. + For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ + in their grammar, their pronunciation and their most common words. Everyone realizes why a + new common language would be desirable: one could refuse to pay expensive translators. To + achieve this, it would be necessary to have uniform grammar, pronunciation and more common + words. If several languages coalesce, the grammar of the resulting language is more simple + and regular than that of the individual languages. + </div> + <!-- /.tab-pane --> + <div class="tab-pane" id="tab_3-2"> + Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, + when an unknown printer took a galley of type and scrambled it to make a type specimen book. + It has survived not only five centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset + sheets containing Lorem Ipsum passages, and more recently with desktop publishing software + like Aldus PageMaker including versions of Lorem Ipsum. + </div> + <!-- /.tab-pane --> + </div> + <!-- /.tab-content --> + </div> + <!-- nav-tabs-custom --> + </div> + <!-- /.col --> + </div> + <!-- /.row --> + <!-- END CUSTOM TABS --> + <!-- START PROGRESS BARS --> + <h2 class="page-header">Progress Bars</h2> + + <div class="row"> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <h3 class="box-title">Progress Bars Different Sizes</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <p><code>.progress</code></p> + + <div class="progress"> + <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> + <span class="sr-only">40% Complete (success)</span> + </div> + </div> + <p>Class: <code>.sm</code></p> + + <div class="progress progress-sm active"> + <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> + <span class="sr-only">20% Complete</span> + </div> + </div> + <p>Class: <code>.xs</code></p> + + <div class="progress progress-xs"> + <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> + <span class="sr-only">60% Complete (warning)</span> + </div> + </div> + <p>Class: <code>.xxs</code></p> + + <div class="progress progress-xxs"> + <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> + <span class="sr-only">60% Complete (warning)</span> + </div> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col (left) --> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <h3 class="box-title">Progress bars</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <div class="progress"> + <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> + <span class="sr-only">40% Complete (success)</span> + </div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> + <span class="sr-only">20% Complete</span> + </div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> + <span class="sr-only">60% Complete (warning)</span> + </div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> + <span class="sr-only">80% Complete</span> + </div> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col (right) --> + </div> + <!-- /.row --> + <div class="row"> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <h3 class="box-title">Vertical Progress Bars Different Sizes</h3> + </div> + <!-- /.box-header --> + <div class="box-body text-center"> + <p>By adding the class <code>.vertical</code> and <code>.progress-sm</code>, <code>.progress-xs</code> or + <code>.progress-xxs</code> we achieve:</p> + + <div class="progress vertical active"> + <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%"> + <span class="sr-only">40%</span> + </div> + </div> + <div class="progress vertical progress-sm"> + <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 100%"> + <span class="sr-only">100%</span> + </div> + </div> + <div class="progress vertical progress-xs"> + <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%"> + <span class="sr-only">60%</span> + </div> + </div> + <div class="progress vertical progress-xxs"> + <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%"> + <span class="sr-only">60%</span> + </div> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col (left) --> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <h3 class="box-title">Vertical Progress bars</h3> + </div> + <!-- /.box-header --> + <div class="box-body text-center"> + <p>By adding the class <code>.vertical</code> we achieve:</p> + + <div class="progress vertical"> + <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%"> + <span class="sr-only">40%</span> + </div> + </div> + <div class="progress vertical"> + <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%"> + <span class="sr-only">20%</span> + </div> + </div> + <div class="progress vertical"> + <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%"> + <span class="sr-only">60%</span> + </div> + </div> + <div class="progress vertical"> + <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 80%"> + <span class="sr-only">80%</span> + </div> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col (right) --> + </div> + <!-- /.row --> + <!-- END PROGRESS BARS --> + + <!-- START ACCORDION & CAROUSEL--> + <h2 class="page-header">Bootstrap Accordion & Carousel</h2> + + <div class="row"> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <h3 class="box-title">Collapsible Accordion</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <div class="box-group" id="accordion"> + <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it --> + <div class="panel box box-primary"> + <div class="box-header with-border"> + <h4 class="box-title"> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> + Collapsible Group Item #1 + </a> + </h4> + </div> + <div id="collapseOne" class="panel-collapse collapse in"> + <div class="box-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 + wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum + eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus + labore sustainable VHS. + </div> + </div> + </div> + <div class="panel box box-danger"> + <div class="box-header with-border"> + <h4 class="box-title"> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> + Collapsible Group Danger + </a> + </h4> + </div> + <div id="collapseTwo" class="panel-collapse collapse"> + <div class="box-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 + wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum + eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus + labore sustainable VHS. + </div> + </div> + </div> + <div class="panel box box-success"> + <div class="box-header with-border"> + <h4 class="box-title"> + <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> + Collapsible Group Success + </a> + </h4> + </div> + <div id="collapseThree" class="panel-collapse collapse"> + <div class="box-body"> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 + wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum + eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla + assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred + nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus + labore sustainable VHS. + </div> + </div> + </div> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col --> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <h3 class="box-title">Carousel</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> + <ol class="carousel-indicators"> + <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> + <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li> + <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> + </ol> + <div class="carousel-inner"> + <div class="item active"> + <img src="http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap" alt="First slide"> + + <div class="carousel-caption"> + First Slide + </div> + </div> + <div class="item"> + <img src="http://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap" alt="Second slide"> + + <div class="carousel-caption"> + Second Slide + </div> + </div> + <div class="item"> + <img src="http://placehold.it/900x500/f39c12/ffffff&text=I+Love+Bootstrap" alt="Third slide"> + + <div class="carousel-caption"> + Third Slide + </div> + </div> + </div> + <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> + <span class="fa fa-angle-left"></span> + </a> + <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <span class="fa fa-angle-right"></span> + </a> + </div> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col --> + </div> + <!-- /.row --> + <!-- END ACCORDION & CAROUSEL--> + + <!-- START TYPOGRAPHY --> + <h2 class="page-header">Typography</h2> + + <div class="row"> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Headlines</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <h1>h1. Bootstrap heading</h1> + + <h2>h2. Bootstrap heading</h2> + + <h3>h3. Bootstrap heading</h3> + <h4>h4. Bootstrap heading</h4> + <h5>h5. Bootstrap heading</h5> + <h6>h6. Bootstrap heading</h6> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Text Emphasis</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <p class="lead">Lead to emphasize importance</p> + + <p class="text-green">Text green to emphasize success</p> + + <p class="text-aqua">Text aqua to emphasize info</p> + + <p class="text-light-blue">Text light blue to emphasize info (2)</p> + + <p class="text-red">Text red to emphasize danger</p> + + <p class="text-yellow">Text yellow to emphasize warning</p> + + <p class="text-muted">Text muted to emphasize general</p> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + </div> + <!-- /.row --> + + <div class="row"> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Block Quotes</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <small>Someone famous in <cite title="Source Title">Source Title</cite></small> + </blockquote> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Block Quotes Pulled Right</h3> + </div> + <!-- /.box-header --> + <div class="box-body clearfix"> + <blockquote class="pull-right"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <small>Someone famous in <cite title="Source Title">Source Title</cite></small> + </blockquote> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + </div> + <!-- /.row --> + + <div class="row"> + <div class="col-md-4"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Unordered List</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <ul> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit + <ul> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ul> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ul> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + <div class="col-md-4"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Ordered Lists</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <ol> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit + <ol> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ol> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ol> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + <div class="col-md-4"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Unstyled List</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <ul class="list-unstyled"> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit + <ul> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ul> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ul> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + </div> + <!-- /.row --> + + <div class="row"> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Description</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <dl> + <dt>Description lists</dt> + <dd>A description list is perfect for defining terms.</dd> + <dt>Euismod</dt> + <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> + <dd>Donec id elit non mi porta gravida at eget metus.</dd> + <dt>Malesuada porta</dt> + <dd>Etiam porta sem malesuada magna mollis euismod.</dd> + </dl> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + <div class="col-md-6"> + <div class="box box-solid"> + <div class="box-header with-border"> + <i class="fa fa-text-width"></i> + + <h3 class="box-title">Description Horizontal</h3> + </div> + <!-- /.box-header --> + <div class="box-body"> + <dl class="dl-horizontal"> + <dt>Description lists</dt> + <dd>A description list is perfect for defining terms.</dd> + <dt>Euismod</dt> + <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> + <dd>Donec id elit non mi porta gravida at eget metus.</dd> + <dt>Malesuada porta</dt> + <dd>Etiam porta sem malesuada magna mollis euismod.</dd> + <dt>Felis euismod semper eget lacinia</dt> + <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo + sit amet risus. + </dd> + </dl> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- ./col --> + </div> + <!-- /.row --> + <!-- END TYPOGRAPHY --> + +</section> +<!-- /.content --> -- Gitblit v0.0.0-SNAPSHOT