代码拉取完成，页面将自动刷新
<!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">
<h4 class="m-b-20 header-title">Form Elements</h4>
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">Text</label>
<div class="col-md-10">
<input type="text" class="form-control" value="Some text value...">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="example-email">Email</label>
<div class="col-md-10">
<input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Password</label>
<div class="col-md-10">
<input type="password" class="form-control" value="password">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Placeholder</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="placeholder">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Text area</label>
<div class="col-md-10">
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">Readonly</label>
<div class="col-md-10">
<input type="text" class="form-control" readonly="" value="Readonly value">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Disabled</label>
<div class="col-md-10">
<input type="text" class="form-control" disabled="" value="Disabled value">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Static control</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Helping text</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Helping text">
<span class="help-block"><small>A block of help text that breaks onto a new line and may extend beyond one line.</small></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Input Select</label>
<div class="col-sm-10">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<h6>Multiple select</h6>
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</form>
</div>
</div>
<!-- end row -->
<div class="row m-b-20 p-t-50">
<div class="col-md-6">
<h4 class="m-t-0 header-title"><b>Input States</b></h4>
<p class="text-muted m-b-30 font-13">
Bootstrap includes validation styles for error, warning, and success states on form controls.
</p>
<form class="form-horizontal" role="form">
<div class="form-group has-success">
<label class="col-md-3 control-label" for="state-success">Success</label>
<div class="col-md-6">
<input type="text" id="state-success" name="state-success" class="form-control" placeholder="...">
</div>
</div>
<div class="form-group has-warning">
<label class="col-md-3 control-label" for="state-warning">Warning</label>
<div class="col-md-6">
<input type="text" id="state-warning" name="state-warning" class="form-control" placeholder="...">
</div>
</div>
<div class="form-group has-error">
<label class="col-md-3 control-label" for="state-danger">Danger</label>
<div class="col-md-6">
<input type="text" id="state-danger" name="state-danger" class="form-control" placeholder="...">
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="col-sm-3 control-label">Input with success </label>
<div class="col-sm-6">
<input type="text" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-3 control-label">Input with warning </label>
<div class="col-sm-6">
<input type="text" class="form-control inputmask">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-3 control-label">Input with error </label>
<div class="col-sm-6">
<input type="text" class="form-control inputmask">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<div class="form-group has-feedback">
<label class="col-sm-3 control-label">Custom Icons</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Custom icons">
<i class="fa fa-envelope form-control-feedback l-h-34"></i>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<h4 class="m-t-0 header-title"><b>Input Sizes</b></h4>
<p class="text-muted m-b-30 font-13">
Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.
</p>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label" for="example-input-small">Small</label>
<div class="col-sm-6">
<input type="text" id="example-input-small" name="example-input-small" class="form-control input-sm" placeholder=".input-sm">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="example-input-normal">Normal</label>
<div class="col-sm-6">
<input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="example-input-large">Large</label>
<div class="col-sm-6">
<input type="text" id="example-input-large" name="example-input-large" class="form-control input-lg" placeholder=".input-lg">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Grid Sizes</label>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder=".col-sm-4">
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<input type="text" class="form-control" placeholder=".col-sm-5">
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input type="text" class="form-control" placeholder=".col-sm-6">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<input type="text" class="form-control" placeholder=".col-sm-9">
</div>
</div>
</form>
</div> <!-- end col -->
</div>
<!-- end row -->
<h4 class="p-t-50 header-title"><b>Input groups</b></h4>
<p class="text-muted m-b-30 font-13">
Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code><input></code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> or <code>.input-group-btn</code> to prepend or append elements to a single <code>.form-control</code>.
</p>
<div class="row">
<div class="col-md-4">
<form role="form">
<div class="form-group">
<label class="control-label" for="example-input1-group1">Static</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control" placeholder="Username">
</div>
<div class="input-group m-t-10">
<input type="email" id="example-input2-group1" name="example-input2-group1" class="form-control" placeholder="Email">
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
<div class="input-group m-t-10">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="text" id="example-input3-group1" name="example-input3-group1" class="form-control" placeholder="..">
<span class="input-group-addon">.00</span>
</div>
</div> <!-- form-group -->
</form>
</div>
<div class="col-md-4">
<form role="form">
<div class="form-group">
<label class="control-label" for="example-input1-group2">Buttons</label>
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button>
</span>
<input type="text" id="example-input1-group2" name="example-input1-group2" class="form-control" placeholder="Search">
</div>
<div class="input-group m-t-10">
<input type="email" id="example-input2-group2" name="example-input2-group2" class="form-control" placeholder="Email">
<span class="input-group-btn">
<button type="button" class="btn btn-primary">Submit</button>
</span>
</div>
<div class="input-group m-t-10">
<span class="input-group-btn">
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
</span>
<input type="text" id="example-input3-group2" name="example-input3-group2" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-primary"><i class="fa fa-twitter"></i></button>
</span>
</div>
</div> <!-- form-group -->
</form>
</div>
<div class="col-md-4">
<form role="form">
<div class="form-group">
<label class="control-label" for="example-input1-group3">Dropdowns</label>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
<input type="text" id="example-input1-group3" name="example-input1-group3" class="form-control" placeholder="Username">
</div>
<div class="input-group m-t-10">
<input type="email" id="example-input2-group3" name="example-input2-group3" class="form-control" placeholder="Email">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
</div>
<div class="input-group m-t-10">
<div class="input-group-btn">
<button type="button" class="btn btn-primary" style="overflow: hidden; position: relative;">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
<input type="text" id="example-input3-group3" name="example-input3-group3" class="form-control" placeholder="..">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
</div>
</div> <!-- form-group -->
</form>
</div>
</div>
<!-- end row -->
<div class="row p-t-50">
<div class="col-md-6 m-b-20">
<h4 class="m-b-20 header-title"><b>Basic example</b></h4>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<div class="checkbox checkbox-primary">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-6 m-b-20">
<h4 class="m-b-20 header-title"><b>Horizontal form</b></h4>
<form class="form-horizontal m-t-10" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword4" class="col-sm-3 control-label">Re Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword4" placeholder="Retype Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox checkbox-info">
<input id="checkbox222" type="checkbox">
<label for="checkbox222">
Check me out !
</label>
</div>
</div>
</div>
<div class="form-group m-b-0">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-info">Sign in</button>
</div>
</div>
</form>
</div>
</div>
<!-- end row -->
<h4 class="p-t-50 header-title">Checkbox and Radio</h4>
<div class="row">
<div class="col-md-4">
<div class="m-b-20">
<h5>Basic</h5>
<p class="text-muted font-13 m-b-15">
Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.
</p>
<div class="checkbox">
<input id="checkbox0" type="checkbox">
<label for="checkbox0">
Default
</label>
</div>
<div class="checkbox checkbox-custom">
<input id="checkbox111" type="checkbox">
<label for="checkbox111">
Custom
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox2" type="checkbox" checked>
<label for="checkbox2">
Primary
</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
Success
</label>
</div>
<div class="checkbox checkbox-info">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
Info
</label>
</div>
<div class="checkbox checkbox-warning">
<input id="checkbox5" type="checkbox" checked>
<label for="checkbox5">
Warning
</label>
</div>
<div class="checkbox checkbox-danger">
<input id="checkbox6" type="checkbox" checked>
<label for="checkbox6">
Danger
</label>
</div>
<div class="checkbox checkbox-dark">
<input id="checkbox6c" type="checkbox">
<label for="checkbox6c">
Dark
</label>
</div>
<p class="text-muted font-13 m-b-15 m-t-20">Checkboxes without label text <code>.checkbox-single</code></p>
<div class="checkbox checkbox-single">
<input type="checkbox" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
<label></label>
</div>
<div class="checkbox checkbox-primary checkbox-single">
<input type="checkbox" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
<label></label>
</div>
<p class="text-muted font-13 m-b-15 m-t-20">Inline checkboxes</p>
<div class="checkbox checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1">
<label for="inlineCheckbox1"> Inline One </label>
</div>
<div class="checkbox checkbox-success checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option1" checked>
<label for="inlineCheckbox2"> Inline Two </label>
</div>
<div class="checkbox checkbox-pink checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option1">
<label for="inlineCheckbox3"> Inline Three </label>
</div>
</div>
</div><!-- end col -->
<div class="col-md-4">
<div class="m-b-20">
<h5>Circled</h5>
<p class="text-muted font-13 m-b-15">
<code>.checkbox-circle</code> for roundness.
</p>
<div class="checkbox checkbox-custom checkbox-circle">
<input id="checkbox08" type="checkbox" checked>
<label for="checkbox08">
Custom
</label>
</div>
<div class="checkbox checkbox-circle">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
Simply Rounded
</label>
</div>
<div class="checkbox checkbox-info checkbox-circle">
<input id="checkbox8" type="checkbox" checked>
<label for="checkbox8">
Info
</label>
</div>
<div class="checkbox checkbox-primary checkbox-circle">
<input id="checkbox-9" type="checkbox">
<label for="checkbox-9">
Primary
</label>
</div>
<div class="checkbox checkbox-success checkbox-circle">
<input id="checkbox-10" type="checkbox" checked>
<label for="checkbox-10">
Success
</label>
</div>
<div class="checkbox checkbox-warning checkbox-circle">
<input id="checkbox-11" type="checkbox">
<label for="checkbox-11">
Warning
</label>
</div>
<div class="checkbox checkbox-danger checkbox-circle">
<input id="checkbox-12" type="checkbox" checked>
<label for="checkbox-12">
Danger
</label>
</div>
<div class="checkbox checkbox-dark checkbox-circle">
<input id="checkbox-15" type="checkbox" checked>
<label for="checkbox-15">
Dark
</label>
</div>
<p class="text-muted font-13 m-b-15 m-t-20">Checkboxes without label text <code>.checkbox-single</code></p>
<div class="checkbox checkbox-single checkbox-circle">
<input type="checkbox" id="singleCheckbox11" value="option1" aria-label="Single checkbox One">
<label></label>
</div>
<div class="checkbox checkbox-primary checkbox-single checkbox-circle">
<input type="checkbox" id="singleCheckbox21" value="option2" checked aria-label="Single checkbox Two">
<label></label>
</div>
<p class="text-muted font-13 m-b-15 m-t-20">Inline checkboxes</p>
<div class="checkbox checkbox-inline checkbox-circle">
<input type="checkbox" id="inlineCheckbox11" value="option1">
<label for="inlineCheckbox11"> Inline One </label>
</div>
<div class="checkbox checkbox-success checkbox-inline checkbox-circle">
<input type="checkbox" id="inlineCheckbox21" value="option1" checked>
<label for="inlineCheckbox21"> Inline Two </label>
</div>
<div class="checkbox checkbox-primary checkbox-inline checkbox-circle">
<input type="checkbox" id="inlineCheckbox31" value="option1">
<label for="inlineCheckbox31"> Inline Three </label>
</div>
</div>
</div><!-- end col -->
<div class="col-md-4">
<div class="m-b-20">
<h5>Disabled</h5>
<p class="text-muted font-13 m-b-15">
Disabled state also supported.
</p>
<div class="checkbox">
<input id="checkbox9" type="checkbox" disabled>
<label for="checkbox9">
Can't check this
</label>
</div>
<div class="checkbox checkbox-custom">
<input id="checkbox10" type="checkbox" disabled checked>
<label for="checkbox10">
This too
</label>
</div>
<div class="checkbox checkbox-warning checkbox-circle">
<input id="checkbox110" type="checkbox" disabled checked>
<label for="checkbox110">
And this
</label>
</div>
<div class="checkbox checkbox-info">
<input id="checkbox12" type="checkbox" disabled checked>
<label for="checkbox12">
Can't check this
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox13" type="checkbox" disabled checked>
<label for="checkbox13">
This too
</label>
</div>
<div class="checkbox checkbox-danger checkbox-circle">
<input id="checkbox14" type="checkbox" disabled checked>
<label for="checkbox14">
And this
</label>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="m-b-20">
<h5>Basic</h5>
<p class="text-muted font-13 m-b-15">
Supports bootstrap brand colors: <code>.radio-primary</code>, <code>.radio-danger</code> etc.
</p>
<div class="row">
<div class="col-sm-6">
<div class="radio">
<input type="radio" name="radio" id="radio1" value="option1" checked>
<label for="radio1">
Default
</label>
</div>
<div class="radio radio-custom">
<input type="radio" name="radio" id="radio03" value="option3">
<label for="radio03">
Custom
</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio" id="radio3" value="option3">
<label for="radio3">
Primary
</label>
</div>
<div class="radio radio-success">
<input type="radio" name="radio" id="radio4" value="option4">
<label for="radio4">
Success
</label>
</div>
<div class="radio radio-info">
<input type="radio" name="radio" id="radio5" value="option5">
<label for="radio5">
Info
</label>
</div>
<div class="radio radio-danger">
<input type="radio" name="radio" id="radio6" value="option6">
<label for="radio6">
Danger
</label>
</div>
<div class="radio radio-warning">
<input type="radio" name="radio" id="radio7" value="option7">
<label for="radio7">
Warning
</label>
</div>
</div><!-- end col -->
<div class="col-sm-6">
<div class="radio">
<input type="radio" name="radio1" id="radio11" value="option1" checked>
<label for="radio11">
Default
</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio3" id="radio13" value="option3">
<label for="radio13">
Primary
</label>
</div>
<div class="radio radio-success">
<input type="radio" name="radio4" id="radio14" value="option4" checked>
<label for="radio14">
Success
</label>
</div>
<div class="radio radio-info">
<input type="radio" name="radio5" id="radio15" value="option5" checked>
<label for="radio15">
Info
</label>
</div>
<div class="radio radio-danger">
<input type="radio" name="radio6" id="radio16" value="option6">
<label for="radio16">
Danger
</label>
</div>
<div class="radio radio-warning">
<input type="radio" name="radio7" id="radio17" value="option7" checked>
<label for="radio17">
Warning
</label>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
<p class="text-muted font-13 m-b-15 m-t-20">Radios without label text <code>.radio-single</code></p>
<div class="radio radio-single">
<input type="radio" id="singleRadio1" value="option1.1" name="radioSingle1" aria-label="Single radio One">
<label></label>
</div>
<div class="radio radio-success radio-single">
<input type="radio" id="singleRadio2" value="option2.1" name="radioSingle1" checked aria-label="Single radio Two">
<label></label>
</div>
<p class="text-muted font-13 m-b-15 m-t-20">Inline radios</p>
<div class="radio radio-info radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>
<label for="inlineRadio1"> Inline One </label>
</div>
<div class="radio radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline" checked>
<label for="inlineRadio2"> Inline Two </label>
</div>
</div>
</div><!-- end col -->
<div class="col-lg-4 col-md-6">
<div class="m-b-20">
<h5>Disabled</h5>
<p class="text-muted font-13 m-b-15">
Disabled state also supported.
</p>
<div class="radio radio-danger">
<input type="radio" name="radio31" id="radio51" value="option1" checked disabled>
<label for="radio51">
Next
</label>
</div>
<div class="radio">
<input type="radio" name="radio41" id="radio61" value="option2" checked disabled>
<label for="radio61">
One
</label>
</div>
<div class="radio radio-info">
<input type="radio" name="radio61" id="radio81" value="option4" checked disabled>
<label for="radio81">
One
</label>
</div>
</div>
</div><!-- end col -->
</div>
<!-- end row -->
</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 助手