代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Vendor styles -->
<link rel="stylesheet" href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="vendors/bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">
<link rel="stylesheet" href="vendors/bower_components/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="vendors/bower_components/dropzone/dist/dropzone.css">
<link rel="stylesheet" href="vendors/bower_components/flatpickr/dist/flatpickr.min.css" />
<link rel="stylesheet" href="vendors/bower_components/nouislider/distribute/nouislider.min.css">
<link rel="stylesheet" href="vendors/bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css">
<link rel="stylesheet" href="vendors/bower_components/trumbowyg/dist/ui/trumbowyg.min.css">
<link rel="stylesheet" href="vendors/bower_components/rateYo/min/jquery.rateyo.min.css">
<!-- App styles -->
<link rel="stylesheet" href="css/app.min.css">
<!-- Demo only -->
<link rel="stylesheet" href="demo/css/demo.css">
</head>
<body data-sa-theme="1">
<main class="main">
<div class="page-loader">
<div class="page-loader__spinner">
<svg viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
</svg>
</div>
</div>
<header class="header">
<div class="navigation-trigger hidden-xl-up" data-sa-action="aside-open" data-sa-target=".sidebar">
<i class="zmdi zmdi-menu"></i>
</div>
<div class="logo hidden-sm-down">
<h1><a href="index.html">Super Admin 2.0</a></h1>
</div>
<form class="search">
<div class="search__inner">
<input type="text" class="search__text" placeholder="Search for people, files, documents...">
<i class="zmdi zmdi-search search__helper" data-sa-action="search-close"></i>
</div>
</form>
<ul class="top-nav">
<li class="hidden-xl-up"><a href="" data-sa-action="search-open"><i class="zmdi zmdi-search"></i></a></li>
<li class="dropdown">
<a href="" data-toggle="dropdown" class="top-nav__notify"><i class="zmdi zmdi-email"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
<div class="dropdown-header">
Messages
<div class="actions">
<a href="messages.html" class="actions__item zmdi zmdi-plus"></a>
</div>
</div>
<div class="listview listview--hover">
<a href="" class="listview__item">
<img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
David Belle <small>12:01 PM</small>
</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Jonathan Morris
<small>02:45 PM</small>
</div>
<p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Fredric Mitchell Jr.
<small>08:21 PM</small>
</div>
<p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/4.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Glenn Jecobs
<small>08:43 PM</small>
</div>
<p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/5.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Bill Phillips
<small>11:32 PM</small>
</div>
<p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
</div>
</a>
<a href="" class="view-more">View all messages</a>
</div>
</div>
</li>
<li class="dropdown top-nav__notifications">
<a href="" data-toggle="dropdown" class="top-nav__notify">
<i class="zmdi zmdi-notifications"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
<div class="dropdown-header">
Notifications
<div class="actions">
<a href="" class="actions__item zmdi zmdi-check-all" data-sa-action="notifications-clear"></a>
</div>
</div>
<div class="listview listview--hover">
<div class="listview__scroll scrollbar-inner">
<a href="" class="listview__item">
<img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">David Belle</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Jonathan Morris</div>
<p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Fredric Mitchell Jr.</div>
<p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/4.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Glenn Jecobs</div>
<p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/5.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Bill Phillips</div>
<p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">David Belle</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Jonathan Morris</div>
<p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Fredric Mitchell Jr.</div>
<p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
</div>
</a>
</div>
<div class="p-1"></div>
</div>
</div>
</li>
<li class="dropdown hidden-xs-down">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-check-circle"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
<div class="dropdown-header">Tasks</div>
<div class="listview listview--hover">
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">HTML5 Validation Report</div>
<div class="progress mt-1">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Google Chrome Extension</div>
<div class="progress mt-1">
<div class="progress-bar bg-warning" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Social Intranet Projects</div>
<div class="progress mt-1">
<div class="progress-bar bg-success" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Bootstrap Admin Template</div>
<div class="progress mt-1">
<div class="progress-bar bg-info" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Youtube Client App</div>
<div class="progress mt-1">
<div class="progress-bar bg-danger" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="view-more">View all Tasks</a>
</div>
</div>
</li>
<li class="dropdown hidden-xs-down">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-apps"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
<div class="row app-shortcuts">
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-calendar"></i>
<small class="">Calendar</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-file-text"></i>
<small class="">Files</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-email"></i>
<small class="">Email</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-trending-up"></i>
<small class="">Reports</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-view-headline"></i>
<small class="">News</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-image"></i>
<small class="">Gallery</small>
</a>
</div>
</div>
</li>
<li class="dropdown hidden-xs-down">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item" data-sa-action="fullscreen">Fullscreen</a>
<a href="" class="dropdown-item">Clear Local Storage</a>
<a href="" class="dropdown-item">Settings</a>
</div>
</li>
<li class="hidden-xs-down">
<a href="" class="top-nav__themes" data-sa-action="aside-open" data-sa-target=".themes"><i class="zmdi zmdi-palette"></i></a>
</li>
</ul>
<div class="clock hidden-md-down">
<div class="time">
<span class="time__hours"></span>
<span class="time__min"></span>
<span class="time__sec"></span>
</div>
</div>
</header>
<aside class="sidebar">
<div class="scrollbar-inner">
<div class="user">
<div class="user__info" data-toggle="dropdown">
<img class="user__img" src="demo/img/profile-pics/8.jpg" alt="">
<div>
<div class="user__name">Malinda Hollaway</div>
<div class="user__email">malinda-h@gmail.com</div>
</div>
</div>
<div class="dropdown-menu">
<a class="dropdown-item" href="">View Profile</a>
<a class="dropdown-item" href="">Settings</a>
<a class="dropdown-item" href="">Logout</a>
</div>
</div>
<ul class="navigation">
<li class="@@indexactive"><a href="index.html"><i class="zmdi zmdi-home"></i> Home</a></li>
<li class="navigation__sub @@variantsactive">
<a href=""><i class="zmdi zmdi-view-week"></i> Variants</a>
<ul>
<li class="@@sidebaractive"><a href="hidden-sidebar.html">Hidden Sidebar</a></li>
<li class="@@boxedactive"><a href="boxed-layout.html">Boxed Layout</a></li>
<li class="@@hiddensidebarboxedactive"><a href="hidden-sidebar-boxed-layout.html">Boxed Layout with Hidden Sidebar</a></li>
</ul>
</li>
<li class="@@typeactive"><a href="typography.html"><i class="zmdi zmdi-format-underlined"></i> Typography</a></li>
<li class="@@widgetactive"><a href="widgets.html"><i class="zmdi zmdi-widgets"></i> Widgets</a></li>
<li class="navigation__sub @@tableactive">
<a href=""><i class="zmdi zmdi-view-list"></i> Tables</a>
<ul>
<li class="@@normaltableactive"><a href="html-table.html">HTML Table</a></li>
<li class="@@datatableactive"><a href="data-table.html">Data Table</a></li>
</ul>
</li>
<li class="navigation__sub navigation__sub--active navigation__sub--toggled">
<a href=""><i class="zmdi zmdi-collection-text"></i> Forms</a>
<ul>
<li class="@@formelementactive"><a href="form-elements.html">Basic Form Elements</a></li>
<li class="navigation__active"><a href="form-components.html">Form Components</a></li>
<li class="@@formvalidationactive"><a href="form-validation.html">Form Validation</a></li>
</ul>
</li>
<li class="navigation__sub @@uiactive">
<a href=""><i class="zmdi zmdi-swap-alt"></i> User Interface</a>
<ul>
<li class="@@colorsactive"><a href="colors.html">Colors</a></li>
<li class="@@cssanimationsactive"><a href="css-animations.html">CSS Animations</a></li>
<li class="@@buttonsactive"><a href="buttons.html">Buttons</a></li>
<li class="@@iconsactive"><a href="icons.html">Icons</a></li>
<li class="@@listviewactive"><a href="listview.html">Listview</a></li>
<li class="@@toolbarsactive"><a href="toolbars.html">Toolbars</a></li>
<li class="@@cardsactive"><a href="cards.html">Cards</a></li>
<li class="@@alertactive"><a href="alerts.html">Alerts</a></li>
<li class="@@badgesactive"><a href="badges.html">Badges</a></li>
<li class="@@breadcrumbsactive"><a href="breadcrumbs.html">Bredcrumbs</a></li>
<li class="@@jumbotronactive"><a href="jumbotron.html">Jumbotron</a></li>
<li class="@@navsactive"><a href="navs.html">Navs</a></li>
<li class="@@paginationactive"><a href="pagination.html">Pagination</a></li>
<li class="@@progressactive"><a href="progress.html">Progress</a></li>
</ul>
</li>
<li class="navigation__sub @@componentsactive">
<a href=""><i class="zmdi zmdi-group-work"></i> Javascript Components</a>
<ul class="navigation__sub">
<li class="@@carouselactive"><a href="carousel.html">Carousel</a></li>
<li class="@@collapseactive"><a href="collapse.html">Collapse</a></li>
<li class="@@dropdownsactive"><a href="dropdowns.html">Dropdowns</a></li>
<li class="@@modalsactive"><a href="modals.html">Modals</a></li>
<li class="@@popoveractive"><a href="popover.html">Popover</a></li>
<li class="@@tabsactive"><a href="tabs.html">Tabs</a></li>
<li class="@@tooltipsactive"><a href="tooltips.html">Tooltips</a></li>
<li class="@@notificationsactive"><a href="notifications-alerts.html">Notifications & Alerts</a></li>
<li class="@@treeactive"><a href="treeview.html">Tree View</a></li>
</ul>
</li>
<li class="navigation__sub @@chartsactive">
<a href=""><i class="zmdi zmdi-trending-up"></i> Charts</a>
<ul>
<li class="@@flotchartsactive"><a href="flot-charts.html">Flot</a></li>
<li class="@@otherchartsactive"><a href="other-charts.html">Other Charts</a></li>
</ul>
</li>
<li class="@@calendaractive"><a href="calendar.html"><i class="zmdi zmdi-calendar"></i> Calendar</a></li>
<li class="@@photogalleryactive"><a href="photo-gallery.html"><i class="zmdi zmdi-image"></i> Photo Gallery</a></li>
<li class="navigation__sub @@samplepagesactive">
<a href=""><i class="zmdi zmdi-collection-item"></i> Sample Pages</a>
<ul>
<li class="@@profileactive"><a href="profile-about.html">Profile</a></li>
<li class="@@messagesactive"><a href="messages.html">Messages</a></li>
<li class="@@contactsactive"><a href="contacts.html">Contacts</a></li>
<li class="@@newcontactsactive"><a href="new-contact.html">New Contact</a></li>
<li class="@@groupsactive"><a href="groups.html">Groups</a></li>
<li class="@@pricingtablesactive"><a href="pricing-tables.html">Pricing Tables</a></li>
<li class="@@invoiceactive"><a href="invoice.html">Invoice</a></li>
<li class="@@todoactive"><a href="todo-lists.html">Todo Lists</a></li>
<li class="@@notesactive"><a href="notes.html">Notes</a></li>
<li class="@@searchresultsactive"><a href="search-results.html">Search Results</a></li>
<li class="@@issuesactive"><a href="issue-tracker.html">Issues Tracker</a></li>
<li class="@@faqactive"><a href="faq.html">FAQ</a></li>
<li class="@@teamactive"><a href="team.html">Team</a></li>
<li class="@@blogactive"><a href="blog.html">Blog</a></li>
<li class="@@blogdetailactive"><a href="blog-detail.html">Blog Detail</a></li>
<li class="@@qaactive"><a href="questions-answers.html">Questions & Answers</a></li>
<li class="@@qadetailactive"><a href="questions-answers-details.html">Questions & Answers Details</a></li>
<li class="@@loginactive"><a href="login.html">Login & SignUp</a></li>
<li class="@@lockscreenactive"><a href="lockscreen.html">Lockscreen</a></li>
<li class="@@lockscreenactive"><a href="404.html">404</a></li>
<li class="@@emptyactive"><a href="empty.html">Empty Page</a></li>
</ul>
</li>
</ul>
</div>
</aside>
<div class="themes">
<div class="scrollbar-inner">
<a href="" class="themes__item active" data-sa-value="1"><img src="img/bg/1.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="2"><img src="img/bg/2.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="3"><img src="img/bg/3.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="4"><img src="img/bg/4.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="5"><img src="img/bg/5.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="6"><img src="img/bg/6.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="7"><img src="img/bg/7.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="8"><img src="img/bg/8.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="9"><img src="img/bg/9.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="10"><img src="img/bg/10.jpg" alt=""></a>
</div>
</div>
<section class="content">
<div class="content__inner">
<header class="content__title">
<h1>Form Components</h1>
<div class="actions">
<a href="" class="actions__item zmdi zmdi-trending-up"></a>
<a href="" class="actions__item zmdi zmdi-check-all"></a>
<div class="dropdown actions__item">
<i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
<div class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item">Refresh</a>
<a href="" class="dropdown-item">Manage Widgets</a>
<a href="" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</header>
<div class="card">
<div class="card-body">
<h4 class="card-title">Input group</h4>
<h6 class="card-subtitle">Easily extend form controls by adding text, buttons, or button groups on either side of textual <code><input></code>s.</h6>
<h3 class="card-body__title">Basic example</h3>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
<br>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">@</span>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
<i class="form-group__bar"></i>
</div>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">https://example.com/users/</span>
<div class="form-group">
<input type="text" class="form-control">
<i class="form-group__bar"></i>
</div>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<span class="input-group-addon">0.00</span>
<div class="form-group">
<input type="text" class="form-control" placeholder="Discounted price">
<i class="form-group__bar"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<div class="form-group">
<input type="text" class="form-control" placeholder="Recipient's username">
<i class="form-group__bar"></i>
</div>
<span class="input-group-addon">@example.com</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter amount">
<i class="form-group__bar"></i>
</div>
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<br>
<br>
<h3 class="card-body__title">Sizing</h3>
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize. No need for repeating the form control size classes on each element.</p>
<br>
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<span class="input-group-addon">@</span>
<span class="input-group-addon">@</span>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Large">
<i class="form-group__bar"></i>
</div>
<span class="input-group-addon">@</span>
<span class="input-group-addon">@</span>
<span class="input-group-addon">@</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">@</span>
<div class="form-group">
<input type="text" class="form-control" placeholder="Default">
<i class="form-group__bar"></i>
</div>
</div>
<br>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="Small">
<i class="form-group__bar"></i>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Masking</h4>
<h6 class="card-subtitle">A plugin to make masks on form fields for better instant validations.</h6>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Date</label>
<input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="eg: 23/05/2014">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Time</label>
<input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="eg: 23:06:55">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Date Time</label>
<input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="eg: 00/00/0000 00:00:00">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>CEP</label>
<input type="text" class="form-control input-mask" data-mask="00000-000" placeholder="eg: 00000-000">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control input-mask" data-mask="000-00-0000000" placeholder="eg: 000-00-0000000">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Phone with Odd</label>
<input type="text" class="form-control input-mask" data-mask="(00) 0000-0000" placeholder="eg: (00) 0000-0000">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>US Phone Number</label>
<input type="text" class="form-control input-mask" data-mask="(000) 000-0000" placeholder="eg: (000) 000-0000">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>CPF</label>
<input type="text" class="form-control input-mask" data-mask="000.000.000-00" placeholder="eg: 000.000.000-00">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Money</label>
<input type="text" class="form-control input-mask" data-mask="000.000.000.000.000,00" placeholder="eg: 000.000.000.000.000,00">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3 m-b-20">
<div class="form-group">
<label>IP Address</label>
<input type="text" class="form-control input-mask" data-mask="000.000.000.000" placeholder="eg: 000.000.000.000">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Percentage</label>
<input type="text" class="form-control input-mask" data-mask="00000,00%" placeholder="eg: 00000,00%">
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label>Credit Card</label>
<input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="eg: 0000 0000 0000 0000">
<i class="form-group__bar"></i>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Select 2</h4>
<h6 class="card-subtitle">Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.</h6>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="form-group">
<label>Basic Example - Single Select</label>
<select class="select2">
<option>Subaru</option>
<option>Mitsubishi</option>
<option>Scion</option>
<option>Daihatsu</option>
<option>Hino</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="form-group">
<label>Disabled Select</label>
<select class="select2" disabled>
<option> </option>
<option>Subaru</option>
<option>Mitsubishi</option>
<option>Scion</option>
<option>Daihatsu</option>
<option>Hino</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="form-group">
<label>Disabled Results</label>
<select class="select2">
<option>Subaru</option>
<option>Mitsubishi</option>
<option disabled>Scion</option>
<option disabled>Daihatsu</option>
<option>Hino</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="form-group">
<label>Hide Search Box</label>
<select class="select2" data-minimum-results-for-search="Infinity">
<option>Subaru</option>
<option>Mitsubishi</option>
<option disabled>Scion</option>
<option disabled>Daihatsu</option>
<option>Hino</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="form-group">
<label>Multiple</label>
<select class="select2" multiple>
<option>Subaru</option>
<option>Mitsubishi</option>
<option>Scion</option>
<option>Daihatsu</option>
<option>Hino</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Drag and drop file upload</h4>
<h6 class="card-subtitle">DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.</h6>
<form class="dropzone" id="dropzone-upload"></form>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Toggle Switch</h4>
<h6 class="card-subtitle">Material design look alike Toggle Switches based on Radio Boxes</h6>
<div class="row">
<div class="col-sm-4 col-md-3">
<h3 class="card-body__title">Basic Example</h3>
<div class="form-group">
<div class="toggle-switch">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3">
<h3 class="card-body__title">Active State</h3>
<div class="form-group">
<div class="toggle-switch">
<input type="checkbox" class="toggle-switch__checkbox" checked>
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3">
<h3 class="card-body__title">Disabled</h3>
<div class="form-group">
<div class="toggle-switch">
<input type="checkbox" class="toggle-switch__checkbox" disabled>
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
</div>
<h3 class="card-body__title">Color variants</h3>
<p>Optional color variants can be added using modifier classes</p>
<br>
<div class="demo-inline-wrapper">
<div class="form-group">
<div class="toggle-switch toggle-switch--amber">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
<div class="demo-inline-wrapper">
<div class="form-group">
<div class="toggle-switch toggle-switch--blue">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
<div class="demo-inline-wrapper">
<div class="form-group">
<div class="toggle-switch toggle-switch--green">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
<div class="demo-inline-wrapper">
<div class="form-group">
<div class="toggle-switch toggle-switch--cyan">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
<div class="demo-inline-wrapper">
<div class="form-group">
<div class="toggle-switch toggle-switch--purple">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
<div class="demo-inline-wrapper">
<div class="form-group">
<div class="toggle-switch toggle-switch--teal">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Date Time Picker</h4>
<h6 class="card-subtitle">Flatpickr is a lightweight and powerful datetime picker.</h6>
<div class="row">
<div class="col-sm-4">
<label>Date and time picker</label>
<div class="input-group">
<span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
<div class="form-group">
<input type="text" class="form-control datetime-picker" placeholder="Pick a date & time">
<i class="form-group__bar"></i>
</div>
</div>
</div>
<div class="col-sm-4">
<label>Date picker</label>
<div class="input-group">
<span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
<div class="form-group">
<input type="text" class="form-control date-picker" placeholder="Pick a date">
<i class="form-group__bar"></i>
</div>
</div>
</div>
<div class="col-sm-4">
<label>Time picker</label>
<div class="input-group">
<span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
<div class="form-group">
<input type="text" class="form-control time-picker" placeholder="Pick a time">
<i class="form-group__bar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Color Picker</h4>
<h6 class="card-subtitle">Simple color picker based on jQuery and Bootstrap.</h6>
<div class="row">
<div class="col-sm-4">
<label>Basic example</label>
<div class="input-group">
<span class="input-group-addon"><i class="zmdi zmdi-invert-colors"></i></span>
<div class="form-group color-picker">
<input type="text" class="form-control color-picker__value" value="#03A9F4">
<i class="color-picker__preview" style="background-color: #03A9F4"></i>
<i class="form-group__bar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Input Sliders</h4>
<h6 class="card-subtitle">noUiSlider is a lightweight JavaScript range slider with tons of customizaion.</h6>
<div class="row">
<div class="col-md-6">
<h3 class="card-body__title">Single slider</h3>
<div id="input-slider"></div>
<div class="row">
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" id="input-slider-value" />
<i class="form-group__bar"></i>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3 class="card-body__title">Range Slider</h3>
<div id="input-slider-range"></div>
<div class="row">
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" id="input-slider-range-value-1" />
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" id="input-slider-range-value-2" />
<i class="form-group__bar"></i>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<h3 class="card-body__title">Color variants</h3>
<p>Optional color variants can be added using modifier classes</p>
<div class="row">
<div class="col-md-6">
<div class="input-slider input-slider--blue"></div>
<br>
<div class="input-slider input-slider--red"></div>
<br>
</div>
<div class="col-md-6">
<div class="input-slider input-slider--amber"></div>
<br>
<div class="input-slider input-slider--green"></div>
<br>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Button Checkboxes and Radios</h4>
<h6 class="card-subtitle">Control button states or create groups of buttons for more components like toolbars.</h6>
<h3 class="card-body__title">Toggle states</h3>
<p>Add <code>data-toggle="button"</code> to toggle a button’s <code>active</code> state. If you’re pre-toggling a button, you must manually add the <code>.active</code> class and <code>aria-pressed="true"</code> to the <button>.</p>
<br>
<button type="button" class="btn btn-light" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
<br>
<br>
<br>
<h3 class="card-body__title">Checkbox and radio buttons</h3>
<p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling.</p>
<br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-light active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-light">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-light">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<br>
<br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-light active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-light">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-light">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
<br>
<br>
<br>
<div class="btn-group btn-group--colors" data-toggle="buttons">
<label class="btn"><input type="checkbox" autocomplete="off" checked></label>
<label class="btn bg-blue"><input type="checkbox" autocomplete="off"></label>
<label class="btn bg-teal"><input type="checkbox" autocomplete="off"></label>
<label class="btn bg-red"><input type="checkbox" autocomplete="off"></label>
<label class="btn bg-purple active"><input type="checkbox" autocomplete="off"></label>
<label class="btn bg-yellow"><input type="checkbox" autocomplete="off"></label>
<label class="btn bg-cyan"><input type="checkbox" autocomplete="off"></label>
</div>
<br>
<br>
<div class="btn-group btn-group--colors" data-toggle="buttons">
<label class="btn"><input type="radio" name="notes-color" autocomplete="off" checked></label>
<label class="btn bg-blue"><input type="radio" name="notes-color" autocomplete="off"></label>
<label class="btn bg-teal active"><input type="radio" name="notes-color" autocomplete="off"></label>
<label class="btn bg-red"><input type="radio" name="notes-color" autocomplete="off"></label>
<label class="btn bg-purple"><input type="radio" name="notes-color" autocomplete="off"></label>
<label class="btn bg-yellow"><input type="radio" name="notes-color" autocomplete="off"></label>
<label class="btn bg-cyan"><input type="radio" name="notes-color" autocomplete="off"></label>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Custom Checkboxes</h4>
<h6 class="card-subtitle">Custom rounded checkboxes with alphabet characters to use with contacts and related lists</h6>
<div class="demo-inline-wrapper">
<label class="custom-control custom-control--char">
<input class="custom-control-input" type="checkbox">
<span class="custom-control--char__helper"><i>A</i></span>
</label>
</div>
<div class="demo-inline-wrapper">
<label class="custom-control custom-control--char">
<input class="custom-control-input" type="checkbox">
<span class="custom-control--char__helper"><i>C</i></span>
</label>
</div>
<div class="demo-inline-wrapper">
<label class="custom-control custom-control--char">
<input class="custom-control-input" type="checkbox">
<span class="custom-control--char__helper"><i>V</i></span>
</label>
</div>
<div class="demo-inline-wrapper">
<label class="custom-control custom-control--char">
<input class="custom-control-input" type="checkbox">
<span class="custom-control--char__helper"><i>Z</i></span>
</label>
</div>
<div class="demo-inline-wrapper">
<label class="custom-control custom-control--char">
<input class="custom-control-input" type="checkbox">
<span class="custom-control--char__helper"><i>X</i></span>
</label>
</div>
<div class="demo-inline-wrapper">
<label class="custom-control custom-control--char">
<input class="custom-control-input" type="checkbox">
<span class="custom-control--char__helper"><i>S</i></span>
</label>
</div>
<br>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Icon Toggles (Checkbox)</h4>
<h6 class="card-subtitle">Icon toggles are customized checkboxes to use with icon toggles. Icon toggles are much useful when you have icon toggle elements such as favourites, thumbs ups, thumbs downs etc.</h6>
<h3 class="card-body__title">Default stat</h3>
<p>Click on the icons below to toggle the stat.</p>
<div class="icon-toggle">
<input type="checkbox">
<i class="zmdi zmdi-flag"></i>
</div>
<div class="icon-toggle">
<input type="checkbox">
<i class="zmdi zmdi-star"></i>
</div>
<div class="icon-toggle">
<input type="checkbox">
<i class="zmdi zmdi-thumb-up"></i>
</div>
<div class="icon-toggle">
<input type="checkbox">
<i class="zmdi zmdi-thumb-down"></i>
</div>
<div class="icon-toggle">
<input type="checkbox">
<i class="zmdi zmdi-check"></i>
</div>
<div class="icon-toggle">
<input type="checkbox">
<i class="zmdi zmdi-circle"></i>
</div>
<br>
<br>
<br>
<h3 class="card-body__title">Active (checked) stat</h3>
<p>Click on the icons below to toggle the stat.</p>
<div class="icon-toggle">
<input type="checkbox" checked>
<i class="zmdi zmdi-flag"></i>
</div>
<div class="icon-toggle">
<input type="checkbox" checked>
<i class="zmdi zmdi-star"></i>
</div>
<div class="icon-toggle">
<input type="checkbox" checked>
<i class="zmdi zmdi-thumb-up"></i>
</div>
<div class="icon-toggle">
<input type="checkbox" checked>
<i class="zmdi zmdi-thumb-down"></i>
</div>
<div class="icon-toggle">
<input type="checkbox" checked>
<i class="zmdi zmdi-check"></i>
</div>
<div class="icon-toggle">
<input type="checkbox" checked>
<i class="zmdi zmdi-circle"></i>
</div>
<br>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">WYSIWYG Editor</h4>
<h6 class="card-subtitle">Trumbowyg is Light, translatable and customisable jQuery plugin. Beautiful design, generates semantic code, comes with a powerful API.</h6>
<div class="wysiwyg-editor"></div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Ratings</h4>
<h6 class="card-subtitle">RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.</h6>
<h3 class="card-body__title">Basic example</h3>
<p>Basic RateYo examples with start width and rating values.</p>
<div class="rating-demo">
<div class="rating" data-rateyo-star-width="20px" data-rating="0"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="1"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="2"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="3"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="4"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="5"></div>
</div>
<br>
<br>
<h3 class="card-body__title">Sizing</h3>
<p>Different sizes can be set using data attribute <code>data-rateyo-star-width</code>.</p>
<div class="rating-demo">
<div class="rating" data-rateyo-star-width="10px" data-rating="0"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="1"></div>
<div class="rating" data-rateyo-star-width="30px" data-rating="2"></div>
<div class="rating" data-rateyo-star-width="40px" data-rating="3"></div>
</div>
<br>
<br>
<h3 class="card-body__title">Rated fill color</h3>
<p>The color for the rated part of a star. You can set this option using <code>data-rateyo-rated-fill</code> attribute.</p>
<div class="rating-demo">
<div class="rating" data-rateyo-star-width="20px" data-rating="2" data-rateyo-rated-fill="#dc3545"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="3" data-rateyo-rated-fill="#007bff"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="4" data-rateyo-rated-fill="#20c997"></div>
<div class="rating" data-rateyo-star-width="20px" data-rating="5" data-rateyo-rated-fill="#fd7e14"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Text Counter</h4>
<h6 class="card-subtitle">jQuery plugin to count words or characters and enforce min/max requirements.</h6>
<div class="row">
<div class="col-md-4">
<h3 class="card-body__title">Basic example</h3>
<p>Basic text counter with least options enabled</p>
<br>
<div class="form-group">
<textarea class="form-control textarea-autosize text-counter" placeholder="Start typing..."></textarea>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-md-4">
<h3 class="card-body__title">Maximum limit counter</h3>
<p>Fires when a counter reaches the maximum word/character count.</p>
<br>
<div class="form-group">
<textarea class="form-control textarea-autosize text-counter" data-max-length="100" placeholder="Start typing... (Max set to 100)"></textarea>
<i class="form-group__bar"></i>
</div>
</div>
<div class="col-md-4">
<h3 class="card-body__title">Minimum counter</h3>
<p>Fires when a counter reaches the minimum word/character count</p>
<br>
<div class="form-group">
<textarea class="form-control textarea-autosize text-counter" data-min-length="10" placeholder="Start typing... (Min set to 10)"></textarea>
<i class="form-group__bar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer hidden-xs-down">
<p>© Super Admin Responsive. All rights reserved.</p>
<ul class="nav footer__nav">
<a class="nav-link" href="">Homepage</a>
<a class="nav-link" href="">Company</a>
<a class="nav-link" href="">Support</a>
<a class="nav-link" href="">News</a>
<a class="nav-link" href="">Contacts</a>
</ul>
</footer>
</section>
</main>
<!-- Older IE warning message -->
<!--[if IE]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade to any of the following web browsers to access this website.</p>
<div class="ie-warning__downloads">
<a href="/www.google.com/chrome">
<img src="img/browsers/chrome.png" alt="">
</a>
<a href="https://www.mozilla.org/en-US/firefox/new">
<img src="img/browsers/firefox.png" alt="">
</a>
<a href="/www.opera.com">
<img src="img/browsers/opera.png" alt="">
</a>
<a href="https://support.apple.com/downloads/safari">
<img src="img/browsers/safari.png" alt="">
</a>
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">
<img src="img/browsers/edge.png" alt="">
</a>
<a href="/windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
</a>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript -->
<!-- Vendors -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>
<script src="vendors/bower_components/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
<script src="vendors/bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="vendors/bower_components/dropzone/dist/min/dropzone.min.js"></script>
<script src="vendors/bower_components/moment/min/moment.min.js"></script>
<script src="vendors/bower_components/flatpickr/dist/flatpickr.min.js"></script>
<script src="vendors/bower_components/nouislider/distribute/nouislider.min.js"></script>
<script src="vendors/bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="vendors/bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
<script src="vendors/bower_components/rateYo/min/jquery.rateyo.min.js"></script>
<script src="vendors/bower_components/jquery-text-counter/textcounter.min.js"></script>
<script src="vendors/bower_components/autosize/dist/autosize.min.js"></script>
<!-- App functions and actions -->
<script src="js/app.min.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。