代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SimpleAdmin - Responsive Admin Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="assets/css/metisMenu.min.css" rel="stylesheet">
<!-- Icons CSS -->
<link href="assets/css/icons.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div id="page-wrapper">
<!-- Top Bar Start -->
<div class="topbar">
<!-- LOGO -->
<div class="topbar-left">
<div class="">
<a href="index.html" class="logo">
<img src="assets/images/logo.png" alt="logo" class="logo-lg" />
<img src="assets/images/logo_sm.png" alt="logo" class="logo-sm hidden" />
</a>
</div>
</div>
<!-- Top navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="">
<!-- Mobile menu button -->
<div class="pull-left">
<button type="button" class="button-menu-mobile visible-xs visible-sm">
<i class="fa fa-bars"></i>
</button>
<span class="clearfix"></span>
</div>
<!-- Top nav left menu -->
<ul class="nav navbar-nav hidden-sm hidden-xs top-navbar-items">
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Top nav Right menu -->
<ul class="nav navbar-nav navbar-right top-navbar-items-right pull-right">
<li class="hidden-xs">
<form role="search" class="navbar-left app-search pull-left">
<input type="text" placeholder="Search..." class="form-control">
<a href=""><i class="fa fa-search"></i></a>
</form>
</li>
<li class="dropdown top-menu-item-xs">
<a href="#" data-target="#" class="dropdown-toggle menu-right-item" data-toggle="dropdown" aria-expanded="true">
<i class="mdi mdi-bell"></i> <span class="label label-danger">3</span>
</a>
<ul class="dropdown-menu p-0 dropdown-menu-lg">
<!--<li class="notifi-title"><span class="label label-default pull-right">New 3</span>Notification</li>-->
<li class="list-group notification-list" style="height: 267px;">
<div class="slimscroll">
<!-- list item-->
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="media-left p-r-10">
<em class="fa fa-diamond bg-primary"></em>
</div>
<div class="media-body">
<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
<p class="m-0">
<small>There are new settings available</small>
</p>
</div>
</div>
</a>
<!-- list item-->
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="media-left p-r-10">
<em class="fa fa-cog bg-warning"></em>
</div>
<div class="media-body">
<h5 class="media-heading">New settings</h5>
<p class="m-0">
<small>There are new settings available</small>
</p>
</div>
</div>
</a>
<!-- list item-->
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="media-left p-r-10">
<em class="fa fa-bell-o bg-custom"></em>
</div>
<div class="media-body">
<h5 class="media-heading">Updates</h5>
<p class="m-0">
<small>There are <span class="text-primary font-600">2</span> new updates available</small>
</p>
</div>
</div>
</a>
<!-- list item-->
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="media-left p-r-10">
<em class="fa fa-user-plus bg-danger"></em>
</div>
<div class="media-body">
<h5 class="media-heading">New user registered</h5>
<p class="m-0">
<small>You have 10 unread messages</small>
</p>
</div>
</div>
</a>
<!-- list item-->
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="media-left p-r-10">
<em class="fa fa-diamond bg-primary"></em>
</div>
<div class="media-body">
<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
<p class="m-0">
<small>There are new settings available</small>
</p>
</div>
</div>
</a>
<!-- list item-->
<a href="javascript:void(0);" class="list-group-item">
<div class="media">
<div class="media-left p-r-10">
<em class="fa fa-cog bg-warning"></em>
</div>
<div class="media-body">
<h5 class="media-heading">New settings</h5>
<p class="m-0">
<small>There are new settings available</small>
</p>
</div>
</div>
</a>
</div>
</li>
<!--<li>-->
<!--<a href="javascript:void(0);" class="list-group-item text-right">-->
<!--<small class="font-600">See all notifications</small>-->
<!--</a>-->
<!--</li>-->
</ul>
</li>
<li class="dropdown top-menu-item-xs">
<a href="" class="dropdown-toggle menu-right-item profile" data-toggle="dropdown" aria-expanded="true"><img src="assets/images/users/avatar-1.jpg" alt="user-img" class="img-circle"> </a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)"><i class="ti-user m-r-10"></i> Profile</a></li>
<li><a href="javascript:void(0)"><i class="ti-settings m-r-10"></i> Settings</a></li>
<li><a href="javascript:void(0)"><i class="ti-lock m-r-10"></i> Lock screen</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)"><i class="ti-power-off m-r-10"></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- end container -->
</div> <!-- end navbar -->
</div>
<!-- Top Bar End -->
<!-- Page content start -->
<div class="page-contentbar">
<!--left navigation start-->
<aside class="sidebar-navigation">
<div class="scrollbar-wrapper">
<div>
<button type="button" class="button-menu-mobile btn-mobile-view visible-xs visible-sm">
<i class="mdi mdi-close"></i>
</button>
<!-- User Detail box -->
<div class="user-details">
<div class="pull-left">
<img src="assets/images/users/avatar-1.jpg" alt="" class="thumb-md img-circle">
</div>
<div class="user-info">
<a href="#">Stanley Jones</a>
<p class="text-muted m-0">Administrator</p>
</div>
</div>
<!--- End User Detail box -->
<!-- Left Menu Start -->
<ul class="metisMenu nav" id="side-menu">
<li><a href="index.html"><i class="ti-home"></i> Dashboard </a></li>
<li><a href="ui-elements.html"><span class="label label-custom pull-right">11</span> <i class="ti-paint-bucket"></i> UI Elements </a></li>
<li>
<a href="javascript: void(0);" aria-expanded="true"><i class="ti-light-bulb"></i> Components <span class="fa arrow"></span></a>
<ul class="nav-second-level nav" aria-expanded="true">
<li><a href="components-range-slider.html">Range Slider</a></li>
<li><a href="components-alerts.html">Alerts</a></li>
<li><a href="components-icons.html">Icons</a></li>
<li><a href="components-widgets.html">Widgets</a></li>
</ul>
</li>
<li><a href="typography.html"><i class="ti-spray"></i> Typography </a></li>
<li>
<a href="javascript: void(0);" aria-expanded="true"><i class="ti-pencil-alt"></i> Forms <span class="fa arrow"></span></a>
<ul class="nav-second-level nav" aria-expanded="true">
<li><a href="forms-general.html">General Elements</a></li>
<li><a href="forms-advanced.html">Advanced Form</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);" aria-expanded="true"><i class="ti-menu-alt"></i> Tables <span class="fa arrow"></span></a>
<ul class="nav-second-level nav" aria-expanded="true">
<li><a href="tables-basic.html">Basic tables</a></li>
<li><a href="tables-advanced.html">Advanced tables</a></li>
</ul>
</li>
<li><a href="charts.html"><span class="label label-custom pull-right">5</span> <i class="ti-pie-chart"></i> Charts </a></li>
<li><a href="maps.html"><i class="ti-location-pin"></i> Maps </a></li>
<li>
<a href="javascript: void(0);" aria-expanded="true"><i class="ti-files"></i> Pages <span class="fa arrow"></span></a>
<ul class="nav-second-level nav" aria-expanded="true">
<li><a href="pages-login.html">Login</a></li>
<li><a href="pages-register.html">Register</a></li>
<li><a href="pages-forget-password.html">Forget Password</a></li>
<li><a href="pages-lock-screen.html">Lock-screen</a></li>
<li><a href="pages-blank.html">Blank page</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-confirm-mail.html">Confirm Mail</a></li>
<li><a href="pages-session-expired.html">Session Expired</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);" aria-expanded="true"><i class="ti-widget"></i> Extra Pages <span class="fa arrow"></span></a>
<ul class="nav-second-level nav" aria-expanded="true">
<li><a href="extras-timeline.html">Timeline</a></li>
<li><a href="extras-invoice.html">Invoice</a></li>
<li><a href="extras-profile.html">Profile</a></li>
<li><a href="extras-calendar.html">Calendar</a></li>
<li><a href="extras-faqs.html">FAQs</a></li>
<li><a href="extras-pricing.html">Pricing</a></li>
<li><a href="extras-contacts.html">Contacts</a></li>
</ul>
</li>
<li>
<a href="javascript: void(0);" aria-expanded="true"><i class="ti-share"></i> Multi Level <span class="fa arrow"></span></a>
<ul class="nav-second-level nav" aria-expanded="true">
<li><a href="javascript: void(0);">Level 1.1</a></li>
<li><a href="javascript: void(0);" aria-expanded="true">Level 1.2 <span class="fa arrow"></span></a>
<ul class="nav-third-level nav" aria-expanded="true">
<li><a href="javascript: void(0);">Level 2.1</a></li>
<li><a href="javascript: void(0);">Level 2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div><!--Scrollbar wrapper-->
</aside>
<!--left navigation end-->
<!-- START PAGE CONTENT -->
<div id="page-right-content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="m-b-20">
<h4 class="header-title">Buttons</h4>
<p class="text-muted m-b-30">
Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element. Add <code>.btn-rounded</code> to default button to get rounded corners.
</p>
<h6>Default Buttons</h6>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
<button type="button" class="btn btn-custom btn-rounded">Custom</button>
<h6 class="m-t-30">Button-Custom</h6>
<button type="button" class="btn btn-default btn-bordered">Default</button>
<button type="button" class="btn btn-primary btn-bordered">Primary</button>
<button type="button" class="btn btn-success btn-bordered">Success</button>
<button type="button" class="btn btn-info btn-bordered">Info</button>
<button type="button" class="btn btn-warning btn-bordered">Warning</button>
<button type="button" class="btn btn-danger btn-bordered">Danger</button>
<button type="button" class="btn btn-dark btn-bordered">Dark</button>
<button type="button" class="btn btn-custom btn-bordered">Custom</button>
<h6 class="m-t-30">Button-Size</h6>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<h6 class="m-t-30">Icon Button</h6>
<button class="btn btn-icon btn-default"> <i class="fa fa-heart-o"></i> </button>
<button class="btn btn-icon btn-danger"> <i class="fa fa-remove"></i> </button>
<button class="btn btn-icon btn-dark"> <i class="fa fa-music"></i> </button>
<button class="btn btn-icon btn-primary"> <i class="fa fa-star"></i> </button>
<button class="btn btn-icon btn-success"> <i class="fa fa-thumbs-o-up"></i> </button>
<button class="btn btn-icon btn-info"> <i class="fa fa-keyboard-o"></i> </button>
<button class="btn btn-icon btn-warning"> <i class="fa fa-wrench"></i> </button>
<h6 class="m-t-30">Button Group</h6>
<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>
</div>
<!-- end button section -->
<div class="p-t-50">
<h4 class="header-title">Panels</h4>
<p class="text-muted m-b-30">
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
</p>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel Default</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-color panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel Primary</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-color panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel Success</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-color panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel Info</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-color panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel Warning</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-color panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel Danger</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-color panel-custom">
<div class="panel-heading">
<h3 class="panel-title">Panel Custom</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-color panel-dark">
<div class="panel-heading">
<h3 class="panel-title">Panel Dark</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end panel section -->
<div class="m-b-20 p-t-50">
<h4 class="header-title">Tabs</h4>
<p class="text-muted m-b-30">
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.
</p>
<div class="row">
<div class="col-lg-6">
<div class="card-box">
<h6>Default Tabs</h6>
<ul class="nav nav-tabs">
<li class="">
<a href="#home" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-home"></i></span>
<span class="hidden-xs">Home</span>
</a>
</li>
<li class="active">
<a href="#profile" data-toggle="tab" aria-expanded="true">
<span class="visible-xs"><i class="fa fa-user"></i></span>
<span class="hidden-xs">Profile</span>
</a>
</li>
<li class="">
<a href="#messages" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
<span class="hidden-xs">Messages</span>
</a>
</li>
<li class="">
<a href="#settings" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-cog"></i></span>
<span class="hidden-xs">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane active" id="profile">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="tab-pane" id="messages">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane" id="settings">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="card-box">
<h6>Tabs Justified</h6>
<ul class="nav nav-tabs navtab-bg nav-justified">
<li class="">
<a href="#home1" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-home"></i></span>
<span class="hidden-xs">Home</span>
</a>
</li>
<li class="active">
<a href="#profile1" data-toggle="tab" aria-expanded="true">
<span class="visible-xs"><i class="fa fa-user"></i></span>
<span class="hidden-xs">Profile</span>
</a>
</li>
<li class="">
<a href="#messages1" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
<span class="hidden-xs">Messages</span>
</a>
</li>
<li class="">
<a href="#settings1" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-cog"></i></span>
<span class="hidden-xs">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane active" id="profile1">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="tab-pane" id="messages1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane" id="settings1">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>
</div>
</div> <!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-6">
<div class="card-box m-t-30">
<h6>Tabs Bordered</h6>
<ul class="nav nav-tabs tabs-bordered">
<li class="">
<a href="#home-b1" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-home"></i></span>
<span class="hidden-xs">Home</span>
</a>
</li>
<li class="active">
<a href="#profile-b1" data-toggle="tab" aria-expanded="true">
<span class="visible-xs"><i class="fa fa-user"></i></span>
<span class="hidden-xs">Profile</span>
</a>
</li>
<li class="">
<a href="#messages-b1" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
<span class="hidden-xs">Messages</span>
</a>
</li>
<li class="">
<a href="#settings-b1" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-cog"></i></span>
<span class="hidden-xs">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home-b1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane active" id="profile-b1">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="tab-pane" id="messages-b1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane" id="settings-b1">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="card-box m-t-30">
<h6>Tabs Bordered Justified</h6>
<ul class="nav nav-tabs tabs-bordered nav-justified">
<li class="">
<a href="#home-b2" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-home"></i></span>
<span class="hidden-xs">Home</span>
</a>
</li>
<li class="active">
<a href="#profile-b2" data-toggle="tab" aria-expanded="true">
<span class="visible-xs"><i class="fa fa-user"></i></span>
<span class="hidden-xs">Profile</span>
</a>
</li>
<li class="">
<a href="#messages-b2" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
<span class="hidden-xs">Messages</span>
</a>
</li>
<li class="">
<a href="#settings-b2" data-toggle="tab" aria-expanded="false">
<span class="visible-xs"><i class="fa fa-cog"></i></span>
<span class="hidden-xs">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home-b2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane active" id="profile-b2">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<div class="tab-pane" id="messages-b2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="tab-pane" id="settings-b2">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>
</div>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end tabs section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Modals</h4>
<p class="text-muted m-b-30">
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
</p>
<div class="button-list">
<!-- Button trigger modal -->
<button class="btn btn-primary " data-toggle="modal" data-target="#myModal">Standard Modal</button>
<!-- Large modal -->
<button class="btn btn-primary " data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<!-- Small modal -->
<button class="btn btn-primary " data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<!-- Custom width modal -->
<button class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#custom-width-modal">Custom width Modal</button>
<!-- Full width modal -->
<button class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#full-width-modal">Full width Modal</button>
<!-- Responsive modal -->
<button class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#con-close-modal">Responsive Modal</button>
<!-- Accordion modal -->
<button class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#accordion-modal">Accordion in Modal</button>
<!-- Panel modal -->
<button class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#panel-modal">Panel in Modal</button>
</div>
<!-- sample modal content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary ">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal content for the above example -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body">
...
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sample modal content -->
<div id="custom-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="custom-width-modalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="full-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="full-width-modalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-full">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="full-width-modalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Content is Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="field-1" class="control-label">Name</label>
<input type="text" class="form-control" id="field-1" placeholder="John">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-2" class="control-label">Surname</label>
<input type="text" class="form-control" id="field-2" placeholder="Doe">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="field-3" class="control-label">Address</label>
<input type="text" class="form-control" id="field-3" placeholder="Address">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="field-4" class="control-label">City</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-5" class="control-label">Country</label>
<input type="text" class="form-control" id="field-5" placeholder="United States">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-6" class="control-label">Zip</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group no-margin">
<label for="field-7" class="control-label">Personal Info</label>
<textarea class="form-control autogrow" id="field-7" placeholder="Write something about yourself" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 104px;"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info waves-effect waves-light">Save changes</button>
</div>
</div>
</div>
</div><!-- /.modal -->
<div id="accordion-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="panel-group panel-group-joined" id="accordion-test">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseOne" class="collapsed">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-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 panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-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 panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseThree" class="collapsed">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="panel-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content p-0 b-0">
<div class="panel panel-color panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="panel-title">Panel Primary</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<!-- end Modal section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Progress bars</h4>
<p class="text-muted m-b-30">
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
</p>
<div class="row">
<div class="col-sm-10">
<div class="progress">
<div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
<span class="sr-only">48% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
<span class="sr-only">82% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-custom progress-bar-striped" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
<span class="sr-only">95% Complete</span>
</div>
</div>
<h6 class="m-t-30">Sizes</h6>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="width: 89%;">
<span class="sr-only">89% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-dark" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;">
<span class="sr-only">77% Complete</span>
</div>
</div>
<div class="progress progress-md">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="progress progress-lg m-b-5">
<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width: 67%;">
<span class="sr-only">67% Complete</span>
</div>
</div>
<h6 class="m-t-30">Animated</h6>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="m-t-30">Completed</h6>
<div class="progress progress-md">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
85%
</div>
</div>
<h6 class="m-t-30">Stacked </h6>
<div class="progress">
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;" class="progress-bar progress-bar-success progress-bar-striped"></div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;" class="progress-bar progress-bar-info"></div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 15%;" class="progress-bar progress-bar-warning progress-bar-striped active"></div>
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" class="progress-bar progress-bar-danger progress-bar-striped active"></div>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end Progressbar section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Labels</h4>
<p class="text-muted m-b-30">
Add any of the default mentioned modifier classes to change the appearance of a label.
</p>
<div class="row">
<div class="col-sm-12">
<div class="">
<span class="label label-white">White</span>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-dark">Dark</span>
<span class="label label-custom">Custom</span>
</div>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end Labels section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Badge</h4>
<p class="text-muted m-b-30">
Easily highlight new or unread items by adding a <code><span class="badge"></code> to links, Bootstrap navs, and more.
</p>
<div class="row">
<div class="col-sm-12">
<div class="">
<span class="badge badge-primary">15</span>
<span class="badge badge-success">0</span>
<span class="badge badge-info">21</span>
<span class="badge badge-dark">3</span>
<span class="badge badge-warning">35</span>
<span class="badge badge-danger">32</span>
<span class="badge badge-white">01</span>
<span class="badge">9</span>
</div>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end Badge section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Pagination</h4>
<p class="text-muted m-b-30">
Provide pagination links for your site or app with the multi-page pagination component.
</p>
<div class="row">
<div class="col-sm-12">
<h6>Default</h6>
<ul class="pagination m-0">
<li class="disabled">
<a href="#"><i class="fa fa-angle-left"></i></a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="active">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right"></i></a>
</li>
</ul>
<h6 class="m-t-30">Split Pagination</h6>
<ul class="pagination pagination-split m-0">
<li class="disabled">
<a href="#"><i class="fa fa-angle-left"></i></a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="active">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right"></i></a>
</li>
</ul>
<h6 class="m-t-30">Sizing</h6>
<ul class="pagination pagination-lg m-0">
<li class="disabled">
<a href="#"><i class="fa fa-angle-left"></i></a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="active">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#"><i class="fa fa-angle-right"></i></a>
</li>
</ul>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end pagination section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Pagers</h4>
<p class="text-muted m-b-30">
Quick previous and next links for simple pagination implementations with light markup and styles.
</p>
<div class="row">
<div class="col-sm-12">
<h6>Default</h6>
<ul class="pager">
<li>
<a href="#"><i class="fa fa-angle-left"></i> Previous</a>
</li>
<li>
<a href="#">Next <i class="fa fa-angle-right"></i></a>
</li>
</ul>
<h6 class="m-t-30">Aligned Links</h6>
<ul class="pager">
<li class="previous">
<a href="#">← Older</a>
</li>
<li class="next">
<a href="#">Newer →</a>
</li>
</ul>
<h6 class="m-t-30">Optional Disabled State</h6>
<ul class="pager">
<li class="previous disabled">
<a href="#">← Older</a>
</li>
<li class="next">
<a href="#">Newer →</a>
</li>
</ul>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end Pagers section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Popovers</h4>
<p class="text-muted m-b-30">
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
</p>
<div class="row">
<div class="col-sm-12">
<div class="button-list m-t-20">
<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
Popover on top
</button>
<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
Popover on right
</button>
<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover title">
Popover on left
</button>
<button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">
Dismissible popover
</button>
</div>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end Popovers section -->
<div class="p-t-50 m-b-20">
<h4 class="header-title">Tooltips</h4>
<p class="text-muted m-b-30">
Four options are available: top, right, bottom, and left aligned.
</p>
<div class="row">
<div class="col-sm-12">
<div class="button-list m-t-20">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>
</div>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end Tooltips section -->
</div> <!-- end col -->
</div> <!-- end row -->
</div>
<!-- end container -->
<div class="footer">
<div class="pull-right hidden-xs">
Project Completed <strong class="text-custom">39%</strong>.
</div>
<div>
<strong>Simple Admin</strong> - Copyright © 2017
</div>
</div> <!-- end footer -->
</div>
<!-- End #page-right-content -->
</div>
<!-- end .page-contentbar -->
</div>
<!-- End #page-wrapper -->
<!-- js placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/metisMenu.min.js"></script>
<script src="assets/js/jquery.slimscroll.min.js"></script>
<!-- App Js -->
<script src="assets/js/jquery.app.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手