<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />  
	 <title>Bootstrap3响应式后台管理系统模版MeAdmin 表单布局</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"
    />
    <!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="plugins/jquery-ui/jquery.ui.1.10.2.ie.css"
      />
    <![endif]-->
    <link href="assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/responsive.css" rel="stylesheet" type="text/css"
    />
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="assets/css/fontawesome/font-awesome.min.css">
    <!--[if IE 7]>
      <link rel="stylesheet" href="assets/css/fontawesome/font-awesome-ie7.min.css">
    <![endif]-->
    <!--[if IE 8]>
      <link href="assets/css/ie8.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <link href='http://fonts.useso.com/css?family=Open+Sans:400,600,700'
    rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="assets/js/libs/jquery-1.10.2.min.js">
    </script>
    <script type="text/javascript" src="plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js">
    </script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="assets/js/libs/lodash.compat.min.js">
    </script>
    <!--[if lt IE 9]>
      <script src="assets/js/libs/html5shiv.js">
      </script>
    <![endif]-->
    <script type="text/javascript" src="plugins/touchpunch/jquery.ui.touch-punch.min.js">
    </script>
    <script type="text/javascript" src="plugins/event.swipe/jquery.event.move.js">
    </script>
    <script type="text/javascript" src="plugins/event.swipe/jquery.event.swipe.js">
    </script>
    <script type="text/javascript" src="assets/js/libs/breakpoints.js">
    </script>
    <script type="text/javascript" src="plugins/respond/respond.min.js">
    </script>
    <script type="text/javascript" src="plugins/cookie/jquery.cookie.min.js">
    </script>
    <script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.min.js">
    </script>
    <script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.horizontal.min.js">
    </script>
    <script type="text/javascript" src="plugins/sparkline/jquery.sparkline.min.js">
    </script>
    <script type="text/javascript" src="plugins/daterangepicker/moment.min.js">
    </script>
    <script type="text/javascript" src="plugins/daterangepicker/daterangepicker.js">
    </script>
    <script type="text/javascript" src="plugins/blockui/jquery.blockUI.min.js">
    </script>
    <script type="text/javascript" src="assets/js/app.js">
    </script>
    <script type="text/javascript" src="assets/js/plugins.js">
    </script>
    <script type="text/javascript" src="assets/js/plugins.form-components.js">
    </script>
    <script>
      $(document).ready(function() {
        App.init();
        Plugins.init();
        FormComponents.init()
      });
    </script>
    <script type="text/javascript" src="assets/js/custom.js">
    </script>
  </head>
  
  <body>
    <header class="header navbar navbar-fixed-top" role="banner">
      <div class="container">
        <ul class="nav navbar-nav">
          <li class="nav-toggle">
            <a href="javascript:void(0);" title="">
              <i class="icon-reorder">
              </i>
            </a>
          </li>
        </ul>
        <a class="navbar-brand" href="index.html">
          <img src="assets/img/logo.png" alt="logo" />
          <strong>
            Me
          </strong>
          Admin
        </a>
        <a href="#" class="toggle-sidebar bs-tooltip" data-placement="bottom"
        data-original-title="Toggle navigation">
          <i class="icon-reorder">
          </i>
        </a>
        <ul class="nav navbar-nav navbar-left hidden-xs hidden-sm">
          <li>
            <a href="#">
              Dashboard
            </a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Dropdown
              <i class="icon-caret-down small">
              </i>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">
                  <i class="icon-user">
                  </i>
                  Example #1
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-calendar">
                  </i>
                  Example #2
                </a>
              </li>
              <li class="divider">
              </li>
              <li>
                <a href="#">
                  <i class="icon-tasks">
                  </i>
                  Example #3
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-warning-sign">
              </i>
              <span class="badge">
                5
              </span>
            </a>
            <ul class="dropdown-menu extended notification">
              <li class="title">
                <p>
                  You have 5 new notifications
                </p>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-success">
                    <i class="icon-plus">
                    </i>
                  </span>
                  <span class="message">
                    New user registration.
                  </span>
                  <span class="time">
                    1 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-danger">
                    <i class="icon-warning-sign">
                    </i>
                  </span>
                  <span class="message">
                    High CPU load on cluster #2.
                  </span>
                  <span class="time">
                    5 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-success">
                    <i class="icon-plus">
                    </i>
                  </span>
                  <span class="message">
                    New user registration.
                  </span>
                  <span class="time">
                    10 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-info">
                    <i class="icon-bullhorn">
                    </i>
                  </span>
                  <span class="message">
                    New items are in queue.
                  </span>
                  <span class="time">
                    25 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-warning">
                    <i class="icon-bolt">
                    </i>
                  </span>
                  <span class="message">
                    Disk space to 85% full.
                  </span>
                  <span class="time">
                    55 mins
                  </span>
                </a>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">
                  View all notifications
                </a>
              </li>
            </ul>
          </li>
          <li class="dropdown hidden-xs hidden-sm">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-tasks">
              </i>
              <span class="badge">
                7
              </span>
            </a>
            <ul class="dropdown-menu extended notification">
              <li class="title">
                <p>
                  You have 7 pending tasks
                </p>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Preparing new release
                    </span>
                    <span class="percent">
                      30%
                    </span>
                  </span>
                  <div class="progress progress-small">
                    <div style="width: 30%;" class="progress-bar progress-bar-info">
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Change management
                    </span>
                    <span class="percent">
                      80%
                    </span>
                  </span>
                  <div class="progress progress-small progress-striped active">
                    <div style="width: 80%;" class="progress-bar progress-bar-danger">
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Mobile development
                    </span>
                    <span class="percent">
                      60%
                    </span>
                  </span>
                  <div class="progress progress-small">
                    <div style="width: 60%;" class="progress-bar progress-bar-success">
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Database migration
                    </span>
                    <span class="percent">
                      20%
                    </span>
                  </span>
                  <div class="progress progress-small">
                    <div style="width: 20%;" class="progress-bar progress-bar-warning">
                    </div>
                  </div>
                </a>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">
                  View all tasks
                </a>
              </li>
            </ul>
          </li>
          <li class="dropdown hidden-xs hidden-sm">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-envelope">
              </i>
              <span class="badge">
                1
              </span>
            </a>
            <ul class="dropdown-menu extended notification">
              <li class="title">
                <p>
                  You have 3 new messages
                </p>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="photo">
                    <img src="assets/img/demo/avatar-1.jpg" alt="" />
                  </span>
                  <span class="subject">
                    <span class="from">
                      Bob Carter
                    </span>
                    <span class="time">
                      Just Now
                    </span>
                  </span>
                  <span class="text">
                    Consetetur sadipscing elitr...
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="photo">
                    <img src="assets/img/demo/avatar-2.jpg" alt="" />
                  </span>
                  <span class="subject">
                    <span class="from">
                      Jane Doe
                    </span>
                    <span class="time">
                      45 mins
                    </span>
                  </span>
                  <span class="text">
                    Sed diam nonumy...
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="photo">
                    <img src="assets/img/demo/avatar-3.jpg" alt="" />
                  </span>
                  <span class="subject">
                    <span class="from">
                      Patrick Nilson
                    </span>
                    <span class="time">
                      6 hours
                    </span>
                  </span>
                  <span class="text">
                    No sea takimata sanctus...
                  </span>
                </a>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">
                  View all messages
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" class="dropdown-toggle row-bg-toggle">
              <i class="icon-resize-vertical">
              </i>
            </a>
          </li>
          <li class="dropdown">
            <a href="#" class="project-switcher-btn dropdown-toggle">
              <i class="icon-folder-open">
              </i>
              <span>
                Projects
              </span>
            </a>
          </li>
          <li class="dropdown user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-male">
              </i>
              <span class="username">
                John Doe
              </span>
              <i class="icon-caret-down small">
              </i>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="pages_user_profile.html">
                  <i class="icon-user">
                  </i>
                  My Profile
                </a>
              </li>
              <li>
                <a href="pages_calendar.html">
                  <i class="icon-calendar">
                  </i>
                  My Calendar
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-tasks">
                  </i>
                  My Tasks
                </a>
              </li>
              <li class="divider">
              </li>
              <li>
                <a href="login.html">
                  <i class="icon-key">
                  </i>
                  Log Out
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="project-switcher" class="container project-switcher">
        <div id="scrollbar">
          <div class="handle">
          </div>
        </div>
        <div id="frame">
          <ul class="project-list">
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-desktop">
                  </i>
                </span>
                <span class="title">
                  Lorem ipsum dolor
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-compass">
                  </i>
                </span>
                <span class="title">
                  Dolor sit invidunt
                </span>
              </a>
            </li>
            <li class="current">
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-male">
                  </i>
                </span>
                <span class="title">
                  Consetetur sadipscing elitr
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-thumbs-up">
                  </i>
                </span>
                <span class="title">
                  Sed diam nonumy
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-female">
                  </i>
                </span>
                <span class="title">
                  At vero eos et
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-beaker">
                  </i>
                </span>
                <span class="title">
                  Sed diam voluptua
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-desktop">
                  </i>
                </span>
                <span class="title">
                  Lorem ipsum dolor
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-compass">
                  </i>
                </span>
                <span class="title">
                  Dolor sit invidunt
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-male">
                  </i>
                </span>
                <span class="title">
                  Consetetur sadipscing elitr
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-thumbs-up">
                  </i>
                </span>
                <span class="title">
                  Sed diam nonumy
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-female">
                  </i>
                </span>
                <span class="title">
                  At vero eos et
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-beaker">
                  </i>
                </span>
                <span class="title">
                  Sed diam voluptua
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </header>
    <div id="container">
      <div id="sidebar" class="sidebar-fixed">
        <div id="sidebar-content">
          <form class="sidebar-search">
            <div class="input-box">
              <button type="submit" class="submit">
                <i class="icon-search">
                </i>
              </button>
              <span>
                <input type="text" placeholder="Search...">
              </span>
            </div>
          </form>
          <div class="sidebar-search-results">
            <i class="icon-remove close">
            </i>
            <div class="title">
              Documents
            </div>
            <ul class="notifications">
              <li>
                <a href="javascript:void(0);">
                  <div class="col-left">
                    <span class="label label-info">
                      <i class="icon-file-text">
                      </i>
                    </span>
                  </div>
                  <div class="col-right with-margin">
                    <span class="message">
                      <strong>
                        John Doe
                      </strong>
                      received $1.527,32
                    </span>
                    <span class="time">
                      finances.xls
                    </span>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <div class="col-left">
                    <span class="label label-success">
                      <i class="icon-file-text">
                      </i>
                    </span>
                  </div>
                  <div class="col-right with-margin">
                    <span class="message">
                      My name is
                      <strong>
                        John Doe
                      </strong>
                      ...
                    </span>
                    <span class="time">
                      briefing.docx
                    </span>
                  </div>
                </a>
              </li>
            </ul>
            <div class="title">
              Persons
            </div>
            <ul class="notifications">
              <li>
                <a href="javascript:void(0);">
                  <div class="col-left">
                    <span class="label label-danger">
                      <i class="icon-female">
                      </i>
                    </span>
                  </div>
                  <div class="col-right with-margin">
                    <span class="message">
                      Jane
                      <strong>
                        Doe
                      </strong>
                    </span>
                    <span class="time">
                      21 years old
                    </span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <ul id="nav">
            <li>
              <a href="index.html">
                <i class="icon-dashboard">
                </i>
                Dashboard
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-desktop">
                </i>
                UI Features
                <span class="label label-info pull-right">
                  6
                </span>
              </a>
              <ul class="sub-menu">
                <li>
                  <a href="ui_general.html">
                    <i class="icon-angle-right">
                    </i>
                    General
                  </a>
                </li>
                <li>
                  <a href="ui_buttons.html">
                    <i class="icon-angle-right">
                    </i>
                    Buttons
                  </a>
                </li>
                <li>
                  <a href="ui_tabs_accordions.html">
                    <i class="icon-angle-right">
                    </i>
                    Tabs &amp; Accordions
                  </a>
                </li>
                <li>
                  <a href="ui_sliders.html">
                    <i class="icon-angle-right">
                    </i>
                    Sliders
                  </a>
                </li>
                <li>
                  <a href="ui_nestable_list.html">
                    <i class="icon-angle-right">
                    </i>
                    Nestable List
                  </a>
                </li>
                <li>
                  <a href="ui_typography.html">
                    <i class="icon-angle-right">
                    </i>
                    Typography / Icons
                  </a>
                </li>
                <li>
                  <a href="ui_google_maps.html">
                    <i class="icon-angle-right">
                    </i>
                    Google Maps
                  </a>
                </li>
                <li>
                  <a href="ui_grid.html">
                    <i class="icon-angle-right">
                    </i>
                    Grid
                  </a>
                </li>
              </ul>
            </li>
            <li class="current open">
              <a href="javascript:void(0);">
                <i class="icon-edit">
                </i>
                Form Elements
              </a>
              <ul class="sub-menu">
                <li>
                  <a href="form_components.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Components
                  </a>
                </li>
                <li class="current">
                  <a href="form_layouts.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Layouts
                  </a>
                </li>
                <li>
                  <a href="form_validation.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Validation
                  </a>
                </li>
                <li>
                  <a href="form_wizard.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Wizard
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-table">
                </i>
                Tables
              </a>
              <ul class="sub-menu">
                <li>
                  <a href="tables_static.html">
                    <i class="icon-angle-right">
                    </i>
                    Static Tables
                  </a>
                </li>
                <li>
                  <a href="http://envato.stammtec.de/themeforest/melon/tables_dynamic.html">
                    <i class="icon-angle-right">
                    </i>
                    Dynamic Tables (DataTables)
                  </a>
                </li>
                <li>
                  <a href="tables_responsive.html">
                    <i class="icon-angle-right">
                    </i>
                    Responsive Tables
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="charts.html">
                <i class="icon-bar-chart">
                </i>
                Charts &amp; Statistics
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-folder-open-alt">
                </i>
                Pages
              </a>
              <ul class="sub-menu">
                <li>
                  <a href="login.html">
                    <i class="icon-angle-right">
                    </i>
                    Login
                  </a>
                </li>
                <li>
                  <a href="pages_user_profile.html">
                    <i class="icon-angle-right">
                    </i>
                    User Profile
                  </a>
                </li>
                <li>
                  <a href="pages_calendar.html">
                    <i class="icon-angle-right">
                    </i>
                    Calendar
                  </a>
                </li>
                <li>
                  <a href="pages_invoice.html">
                    <i class="icon-angle-right">
                    </i>
                    Invoice
                  </a>
                </li>
                <li>
                  <a href="404.html">
                    <i class="icon-angle-right">
                    </i>
                    404 Page
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-list-ol">
                </i>
                4 Level Menu
              </a>
              <ul class="sub-menu">
                <li class="open-default">
                  <a href="javascript:void(0);">
                    <i class="icon-cogs">
                    </i>
                    Item 1
                    <span class="arrow">
                    </span>
                  </a>
                  <ul class="sub-menu">
                    <li class="open-default">
                      <a href="javascript:void(0);">
                        <i class="icon-user">
                        </i>
                        Sample Link 1
                        <span class="arrow">
                        </span>
                      </a>
                      <ul class="sub-menu">
                        <li class="current">
                          <a href="javascript:void(0);">
                            <i class="icon-remove">
                            </i>
                            Sample Link 1
                          </a>
                        </li>
                        <li>
                          <a href="javascript:void(0);">
                            <i class="icon-pencil">
                            </i>
                            Sample Link 1
                          </a>
                        </li>
                        <li>
                          <a href="javascript:void(0);">
                            <i class="icon-edit">
                            </i>
                            Sample Link 1
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-user">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-external-link">
                        </i>
                        Sample Link 2
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-bell">
                        </i>
                        Sample Link 3
                      </a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <i class="icon-globe">
                    </i>
                    Item 2
                    <span class="arrow">
                    </span>
                  </a>
                  <ul class="sub-menu">
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-user">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-external-link">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-bell">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <i class="icon-folder-open">
                    </i>
                    Item 3
                  </a>
                </li>
              </ul>
            </li>
          </ul>
          <div class="sidebar-title">
            <span>
              Notifications
            </span>
          </div>
          <ul class="notifications demo-slide-in">
            <li style="display: none;">
              <div class="col-left">
                <span class="label label-danger">
                  <i class="icon-warning-sign">
                  </i>
                </span>
              </div>
              <div class="col-right with-margin">
                <span class="message">
                  Server
                  <strong>
                    #512
                  </strong>
                  crashed.
                </span>
                <span class="time">
                  few seconds ago
                </span>
              </div>
            </li>
            <li style="display: none;">
              <div class="col-left">
                <span class="label label-info">
                  <i class="icon-envelope">
                  </i>
                </span>
              </div>
              <div class="col-right with-margin">
                <span class="message">
                  <strong>
                    John
                  </strong>
                  sent you a message
                </span>
                <span class="time">
                  few second ago
                </span>
              </div>
            </li>
            <li>
              <div class="col-left">
                <span class="label label-success">
                  <i class="icon-plus">
                  </i>
                </span>
              </div>
              <div class="col-right with-margin">
                <span class="message">
                  <strong>
                    Emma
                  </strong>
                  's account was created
                </span>
                <span class="time">
                  4 hours ago
                </span>
              </div>
            </li>
          </ul>
          <div class="sidebar-widget align-center">
            <div class="btn-group" data-toggle="buttons" id="theme-switcher">
              <label class="btn active">
                <input type="radio" name="theme-switcher" data-theme="bright">
                <i class="icon-sun">
                </i>
                Bright
              </label>
              <label class="btn">
                <input type="radio" name="theme-switcher" data-theme="dark">
                <i class="icon-moon">
                </i>
                Dark
              </label>
            </div>
          </div>
        </div>
        <div id="divider" class="resizeable">
        </div>
      </div>
      <div id="content">
        <div class="container">
          <div class="crumbs">
            <ul id="breadcrumbs" class="breadcrumb">
              <li>
                <i class="icon-home">
                </i>
                <a href="index.html">
                  Dashboard
                </a>
              </li>
              <li class="current">
                <a href="pages_calendar.html" title="">
                  Calendar
                </a>
              </li>
            </ul>
            <ul class="crumb-buttons">
              <li>
                <a href="charts.html" title="">
                  <i class="icon-signal">
                  </i>
                  <span>
                    Statistics
                  </span>
                </a>
              </li>
              <li class="dropdown">
                <a href="#" title="" data-toggle="dropdown">
                  <i class="icon-tasks">
                  </i>
                  <span>
                    Users
                    <strong>
                      (+3)
                    </strong>
                  </span>
                  <i class="icon-angle-down left-padding">
                  </i>
                </a>
                <ul class="dropdown-menu pull-right">
                  <li>
                    <a href="form_components.html" title="">
                      <i class="icon-plus">
                      </i>
                      Add new User
                    </a>
                  </li>
                  <li>
                    <a href="http://envato.stammtec.de/themeforest/melon/tables_dynamic.html"
                    title="">
                      <i class="icon-reorder">
                      </i>
                      Overview
                    </a>
                  </li>
                </ul>
              </li>
              <li class="range">
                <a href="#">
                  <i class="icon-calendar">
                  </i>
                  <span>
                  </span>
                  <i class="icon-angle-down">
                  </i>
                </a>
              </li>
            </ul>
          </div>
          <div class="page-header">
            <div class="page-title">
              <h3>
                Form Layouts
              </h3>
              <span>
                Good morning, John!
              </span>
            </div>
            <ul class="page-stats">
              <li>
                <div class="summary">
                  <span>
                    New orders
                  </span>
                  <h3>
                    17,561
                  </h3>
                </div>
                <div id="sparkline-bar" class="graph sparkline hidden-xs">
                  20,15,8,50,20,40,20,30,20,15,30,20,25,20
                </div>
              </li>
              <li>
                <div class="summary">
                  <span>
                    My balance
                  </span>
                  <h3>
                    $21,561.21
                  </h3>
                </div>
                <div id="sparkline-bar2" class="graph sparkline hidden-xs">
                  20,15,8,50,20,40,20,30,20,15,30,20,25,20
                </div>
              </li>
            </ul>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Horizontal Forms
                  </h4>
                </div>
                <div class="widget-content">
                  <form class="form-horizontal row-border" action="#">
                    <div class="form-group">
                      <label class="col-md-2 control-label">
                        Full width input:
                      </label>
                      <div class="col-md-10">
                        <input type="text" name="regular" class="form-control">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-2 control-label">
                        Multiple inputs:
                      </label>
                      <div class="col-md-10">
                        <div class="row">
                          <div class="col-md-4">
                            <input type="text" name="regular" class="form-control">
                            <span class="help-block">
                              Left aligned helper
                            </span>
                          </div>
                          <div class="col-md-4">
                            <input type="text" name="regular" class="form-control">
                            <span class="help-block align-center">
                              Centered helper
                            </span>
                          </div>
                          <div class="col-md-4">
                            <input type="text" name="regular" class="form-control">
                            <span class="help-block align-right">
                              Right aligned helper
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-2 control-label">
                        Predefined width:
                      </label>
                      <div class="col-md-10">
                        <input class="form-control input-width-mini" type="text" placeholder=".input-width-mini"
                        style="display: block;">
                        <input class="form-control input-width-small" type="text" placeholder=".input-width-small"
                        style="display: block; margin-top: 6px;">
                        <input class="form-control input-width-medium" type="text" placeholder=".input-width-medium"
                        style="display: block; margin-top: 6px;">
                        <input class="form-control input-width-large" type="text" placeholder=".input-width-large"
                        style="display: block; margin-top: 6px;">
                        <input class="form-control input-width-xlarge" type="text" placeholder=".input-width-xlarge"
                        style="display: block; margin-top: 6px;">
                        <input class="form-control input-width-xxlarge" type="text" placeholder=".input-width-xxlarge"
                        style="display: block; margin-top: 6px;">
                        <input class="form-control input-block-level" type="text" placeholder=".input-block-level"
                        style="display: block; margin-top: 6px;">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-md-2 control-label">
                        Select:
                      </label>
                      <div class="col-md-10">
                        <div class="row">
                          <div class="col-md-4">
                            <select class="form-control" name="select">
                              <option value="opt1">
                                col-md-4
                              </option>
                              <option value="opt2">
                                Option 2
                              </option>
                              <option value="opt3">
                                Option 3
                              </option>
                            </select>
                          </div>
                        </div>
                        <div class="row next-row">
                          <div class="col-md-6">
                            <select class="form-control" name="select">
                              <option value="opt1">
                                col-md-6
                              </option>
                              <option value="opt2">
                                Option 2
                              </option>
                              <option value="opt3">
                                Option 3
                              </option>
                            </select>
                          </div>
                        </div>
                        <div class="row next-row">
                          <div class="col-md-8">
                            <select class="form-control" name="select">
                              <option value="opt1">
                                col-md-8
                              </option>
                              <option value="opt2">
                                Option 2
                              </option>
                              <option value="opt3">
                                Option 3
                              </option>
                            </select>
                          </div>
                        </div>
                        <div class="row next-row">
                          <div class="col-md-12">
                            <select class="form-control" name="select">
                              <option value="opt1">
                                col-md-12
                              </option>
                              <option value="opt2">
                                Option 2
                              </option>
                              <option value="opt3">
                                Option 3
                              </option>
                            </select>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Vertical Forms
                  </h4>
                </div>
                <div class="widget-content">
                  <form class="form-vertical row-border" action="#">
                    <div class="form-group">
                      <label class="control-label">
                        Full width input:
                      </label>
                      <input type="text" name="regular" class="form-control">
                    </div>
                    <div class="form-group">
                      <label class="control-label">
                        Multiple inputs:
                      </label>
                      <div class="row">
                        <div class="col-md-4">
                          <input type="text" name="regular" class="form-control">
                          <span class="help-block">
                            Left aligned helper
                          </span>
                        </div>
                        <div class="col-md-4">
                          <input type="text" name="regular" class="form-control">
                          <span class="help-block align-center">
                            Centered helper
                          </span>
                        </div>
                        <div class="col-md-4">
                          <input type="text" name="regular" class="form-control">
                          <span class="help-block align-right">
                            Right aligned helper
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label">
                        Predefined width:
                      </label>
                      <input class="form-control input-width-mini" type="text" placeholder=".input-width-mini"
                      style="display: block;">
                      <input class="form-control input-width-small" type="text" placeholder=".input-width-small"
                      style="display: block; margin-top: 6px;">
                      <input class="form-control input-width-medium" type="text" placeholder=".input-width-medium"
                      style="display: block; margin-top: 6px;">
                      <input class="form-control input-width-large" type="text" placeholder=".input-width-large"
                      style="display: block; margin-top: 6px;">
                      <input class="form-control input-width-xlarge" type="text" placeholder=".input-width-xlarge"
                      style="display: block; margin-top: 6px;">
                      <input class="form-control input-width-xxlarge" type="text" placeholder=".input-width-xxlarge"
                      style="display: block; margin-top: 6px;">
                      <input class="form-control input-block-level" type="text" placeholder=".input-block-level"
                      style="display: block; margin-top: 6px;">
                    </div>
                    <div class="form-group">
                      <label class="control-label">
                        Select:
                      </label>
                      <div class="row">
                        <div class="col-md-4">
                          <select class="form-control" name="select">
                            <option value="opt1">
                              col-md-4
                            </option>
                            <option value="opt2">
                              Option 2
                            </option>
                            <option value="opt3">
                              Option 3
                            </option>
                          </select>
                        </div>
                      </div>
                      <div class="row next-row">
                        <div class="col-md-6">
                          <select class="form-control" name="select">
                            <option value="opt1">
                              col-md-6
                            </option>
                            <option value="opt2">
                              Option 2
                            </option>
                            <option value="opt3">
                              Option 3
                            </option>
                          </select>
                        </div>
                      </div>
                      <div class="row next-row">
                        <div class="col-md-8">
                          <select class="form-control" name="select">
                            <option value="opt1">
                              col-md-8
                            </option>
                            <option value="opt2">
                              Option 2
                            </option>
                            <option value="opt3">
                              Option 3
                            </option>
                          </select>
                        </div>
                      </div>
                      <div class="row next-row">
                        <div class="col-md-12">
                          <select class="form-control" name="select">
                            <option value="opt1">
                              col-md-12
                            </option>
                            <option value="opt2">
                              Option 2
                            </option>
                            <option value="opt3">
                              Option 3
                            </option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Form Grid
                  </h4>
                </div>
                <div class="widget-content">
                  <form class="form-vertical" action="#">
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-12">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-12">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-11">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-11">
                        </div>
                        <div class="col-md-1">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-1">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-10">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-10">
                        </div>
                        <div class="col-md-2">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-2">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-9">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-9">
                        </div>
                        <div class="col-md-3">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-3">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-8">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-8">
                        </div>
                        <div class="col-md-4">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-4">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-7">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-7">
                        </div>
                        <div class="col-md-5">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-5">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-6">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-6">
                        </div>
                        <div class="col-md-6">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-6">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-5">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-5">
                        </div>
                        <div class="col-md-7">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-7">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-4">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-4">
                        </div>
                        <div class="col-md-8">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-8">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-3">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-3">
                        </div>
                        <div class="col-md-9">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-9">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-2">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-2">
                        </div>
                        <div class="col-md-10">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-10">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="row">
                        <div class="col-md-1">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-1">
                        </div>
                        <div class="col-md-11">
                          <input type="text" name="regular" class="form-control" placeholder=".col-md-11">
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>