gramps
373ebc8c93
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
810 lines
37 KiB
HTML
810 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Material Design Bootstrap</title>
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<!-- Bootstrap core CSS -->
|
|
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
|
<!-- Material Design Bootstrap -->
|
|
<link rel="stylesheet" href="../../css/mdb.min.css">
|
|
|
|
<!-- Your custom styles (optional) -->
|
|
<style>
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body class="fixed-sn white-skin">
|
|
|
|
<!--Main Navigation-->
|
|
<header>
|
|
|
|
<!-- Sidebar navigation -->
|
|
<div id="slide-out" class="side-nav sn-bg-4 fixed">
|
|
<ul class="custom-scrollbar">
|
|
<!-- Logo -->
|
|
<li class="logo-sn waves-effect">
|
|
<div class="text-center">
|
|
<a href="#" class="pl-0"><img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" class=""></a>
|
|
</div>
|
|
</li>
|
|
<!--/. Logo -->
|
|
|
|
<!--Search Form-->
|
|
<li>
|
|
<form class="search-form" role="search">
|
|
<div class="form-group md-form mt-0 pt-1 waves-light">
|
|
<input type="text" class="form-control" placeholder="Search">
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<!--/.Search Form-->
|
|
<!-- Side navigation links -->
|
|
<li>
|
|
<ul class="collapsible collapsible-accordion">
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-tachometer"></i> Dashboards<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../dashboards/v-1.html" class="waves-effect">Version 1</a>
|
|
</li>
|
|
<li><a href="../dashboards/v-2.html" class="waves-effect">Version 2</a>
|
|
</li>
|
|
<li><a href="../dashboards/v-3.html" class="waves-effect">Version 3</a>
|
|
</li>
|
|
<li><a href="../dashboards/v-4.html" class="waves-effect">Version 4</a>
|
|
</li>
|
|
<li><a href="../dashboards/v-5.html" class="waves-effect">Version 5</a>
|
|
</li>
|
|
<li><a href="../dashboards/v-6.html" class="waves-effect">Version 6</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-photo"></i> Pages<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../pages/login.html" class="waves-effect">Login</a>
|
|
</li>
|
|
<li><a href="../pages/register.html" class="waves-effect">Register</a>
|
|
</li>
|
|
<li><a href="../pages/pricing.html" class="waves-effect">Pricing</a>
|
|
</li>
|
|
<li><a href="../pages/about.html" class="waves-effect">About us</a>
|
|
</li>
|
|
<li><a href="../pages/single.html" class="waves-effect">Single post</a>
|
|
</li>
|
|
<li><a href="../pages/post.html" class="waves-effect">Post listing</a>
|
|
</li>
|
|
<li><a href="../pages/landing.html" class="waves-effect">Landing page</a>
|
|
</li>
|
|
<li><a href="../pages/customers.html" class="waves-effect">Cusomers</a>
|
|
</li>
|
|
<li><a href="../pages/invoice.html" class="waves-effect">Invoice</a>
|
|
</li>
|
|
<li><a href="../pages/page-creator.html" class="waves-effect">Page Creator</a>
|
|
</li>
|
|
<li><a href="../pages/support.html" class="waves-effect">Support</a>
|
|
</li>
|
|
<li><a href="../pages/chat.html" class="waves-effect">Chat</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-user"></i> Profile<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../profile/basic-1.html" class="waves-effect">Basic 1</a>
|
|
</li>
|
|
<li><a href="../profile/basic-2.html" class="waves-effect">Basic 2</a>
|
|
</li>
|
|
<li><a href="../profile/extended.html" class="waves-effect">Extended</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-css3"></i> CSS<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../css/grid.html" class="waves-effect">Grid system</a>
|
|
</li>
|
|
<li><a href="../css/media.html" class="waves-effect">Media object</a>
|
|
</li>
|
|
<li><a href="../css/utilities.html" class="waves-effect">Utilities / helpers</a>
|
|
</li>
|
|
<li><a href="../css/code.html" class="waves-effect">Code</a>
|
|
</li>
|
|
<li><a href="../css/icons.html" class="waves-effect">Icons</a>
|
|
</li>
|
|
<li><a href="../css/images.html" class="waves-effect">Images</a>
|
|
</li>
|
|
<li><a href="../css/typography.html" class="waves-effect">Typography</a>
|
|
</li>
|
|
<li><a href="../css/animations.html" class="waves-effect">Animations</a>
|
|
</li>
|
|
<li><a href="../css/colors.html" class="waves-effect">Colors</a>
|
|
</li>
|
|
<li><a href="../css/hover.html" class="waves-effect">Hover effects</a>
|
|
</li>
|
|
<li><a href="../css/masks.html" class="waves-effect">Masks</a>
|
|
</li>
|
|
<li><a href="../css/shadows.html" class="waves-effect">Shadows</a>
|
|
</li>
|
|
<li><a href="../css/skins.html" class="waves-effect">Skins</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-th"></i> Components<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../components/buttons.html" class="waves-effect">Buttons</a>
|
|
</li>
|
|
<li><a href="../components/cards.html" class="waves-effect">Cards</a>
|
|
</li>
|
|
<li><a href="../components/panels.html" class="waves-effect">Panels</a>
|
|
</li>
|
|
<li><a href="../components/list.html" class="waves-effect">List group</a>
|
|
</li>
|
|
<li><a href="../components/pagination.html" class="waves-effect">Pagination</a>
|
|
</li>
|
|
<li><a href="../components/progress.html" class="waves-effect">Progress bars</a>
|
|
</li>
|
|
<li><a href="../components/tabs.html" class="waves-effect">Tabs & pills</a>
|
|
</li>
|
|
<li><a href="../components/tags.html" class="waves-effect">Tags, labels & badges</a>
|
|
</li>
|
|
<li><a href="../components/collapse.html" class="waves-effect">Collapse</a>
|
|
</li>
|
|
<li><a href="../components/date.html" class="waves-effect">Date picker</a>
|
|
</li>
|
|
<li><a href="../components/time.html" class="waves-effect">Time picker</a>
|
|
</li>
|
|
<li><a href="../components/tooltips.html" class="waves-effect">Tooltips</a>
|
|
</li>
|
|
<li><a href="../components/popovers.html" class="waves-effect">Popovers</a>
|
|
</li>
|
|
<li><a href="../components/stepper.html" class="waves-effect">Stepper</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-check-square-o"></i> Forms<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../forms/basic.html" class="waves-effect">Basic</a>
|
|
</li>
|
|
<li><a href="../forms/extended.html" class="waves-effect">Extended</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-table"></i> Tables<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../tables/basic.html" class="waves-effect">Basic</a>
|
|
</li>
|
|
<li><a href="../tables/extended.html" class="waves-effect">Extended</a>
|
|
</li>
|
|
<li><a href="../tables/datatables.html" class="waves-effect">DataTables.net</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-map"></i> Maps<i class="fa fa-angle-down rotate-icon"></i></a>
|
|
<div class="collapsible-body">
|
|
<ul>
|
|
<li><a href="../maps/google.html" class="waves-effect">Google Maps</a>
|
|
</li>
|
|
<li><a href="../maps/full.html" class="waves-effect">Full screen map</a>
|
|
</li>
|
|
<li><a href="../maps/vector.html" class="waves-effect">Vector world map</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<!-- Simple link -->
|
|
<li><a href="../alerts/alerts.html" class="collapsible-header waves-effect"><i class="fa fa-bell-o"></i> Alerts</a></li>
|
|
|
|
<li><a href="../modals/modals.html" class="collapsible-header waves-effect"><i class="fa fa-bolt"></i> Modals</a></li>
|
|
|
|
<li><a href="../charts/charts.html" class="collapsible-header waves-effect"><i class="fa fa-pie-chart"></i> Charts</a></li>
|
|
|
|
<li><a href="../calendar/calendar.html" class="collapsible-header waves-effect"><i class="fa fa-calendar-check-o"></i> Calendar</a></li>
|
|
|
|
<li><a href="../sections/sections.html" class="collapsible-header waves-effect"><i class="fa fa-th-large"></i> Sections</a></li>
|
|
|
|
</ul>
|
|
</li>
|
|
<!--/. Side navigation links -->
|
|
</ul>
|
|
<div class="sidenav-bg mask-strong"></div>
|
|
</div>
|
|
<!--/. Sidebar navigation -->
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar double-nav">
|
|
<!-- SideNav slide-out button -->
|
|
<div class="float-left">
|
|
<a href="#" data-activates="slide-out" class="button-collapse black-text"><i class="fa fa-bars"></i></a>
|
|
</div>
|
|
<!-- Breadcrumb-->
|
|
<div class="breadcrumb-dn mr-auto">
|
|
<p>Forms basic</p>
|
|
</div>
|
|
|
|
<!--Navbar links-->
|
|
<ul class="nav navbar-nav nav-flex-icons ml-auto">
|
|
|
|
<!-- Dropdown -->
|
|
<li class="nav-item dropdown notifications-nav">
|
|
<a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false">
|
|
<span class="badge red">3</span> <i class="fa fa-bell"></i>
|
|
<span class="d-none d-md-inline-block">Notifications</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
|
|
<a class="dropdown-item" href="#">
|
|
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
|
<span>New order received</span>
|
|
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 13 min</span>
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<i class="fa fa-money mr-2" aria-hidden="true"></i>
|
|
<span>New order received</span>
|
|
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 33 min</span>
|
|
</a>
|
|
<a class="dropdown-item" href="#">
|
|
<i class="fa fa-line-chart mr-2" aria-hidden="true"></i>
|
|
<span>Your campaign is about to end</span>
|
|
<span class="float-right"><i class="fa fa-clock-o" aria-hidden="true"></i> 53 min</span>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link waves-effect"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link waves-effect"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle waves-effect" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Profile</span></a>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
|
<a class="dropdown-item" href="#">Log Out</a>
|
|
<a class="dropdown-item" href="#">My account</a>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
<!--/Navbar links-->
|
|
</nav>
|
|
<!-- /.Navbar -->
|
|
|
|
</header>
|
|
<!--Main Navigation-->
|
|
|
|
<!--Main layout-->
|
|
<main>
|
|
<div class="container-fluid">
|
|
|
|
<!--Section: Inputs-->
|
|
<section class="section card mb-5">
|
|
|
|
<div class="card-body">
|
|
|
|
<!--Section heading-->
|
|
<h1 class="text-center my-5 h1">Inputs</h1>
|
|
|
|
<h5 class="pb-5">Input fields</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<div class="md-form">
|
|
<input type="text" id="form1" class="form-control">
|
|
<label for="form1" class="">Basic example</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<div class="md-form form-sm">
|
|
<input type="text" id="form2" class="form-control form-control-sm">
|
|
<label for="form2" class="">Small input</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-4 mb-4">
|
|
|
|
<div class="md-form">
|
|
<input placeholder="Placeholder" type="text" id="form3" class="form-control">
|
|
<label for="form3" class="active">Example label</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<div class="md-form">
|
|
<input value="John Doe" type="text" id="form4" class="form-control">
|
|
<label class="active" for="form4">Prefilling text inputs</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<div class="md-form">
|
|
<input type="text" id="form5" class="form-control" disabled>
|
|
<label for="form5" class="disabled">Disabled input</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<!--Grid row-->
|
|
<div class="row text-left">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<!--Email validation-->
|
|
<div class="md-form">
|
|
<i class="fa fa-envelope prefix"></i>
|
|
<input type="email" id="form6" class="form-control validate">
|
|
<label for="form6" data-error="wrong" data-success="right">Type your email</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<!--Password validation-->
|
|
<div class="md-form">
|
|
<i class="fa fa-lock prefix"></i>
|
|
<input type="password" id="form7" class="form-control validate">
|
|
<label for="form7" data-error="wrong" data-success="right">Type your password</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<h5 class="pb-5">Error or Success Messages</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row text-left">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<!--Email validation-->
|
|
<div class="md-form">
|
|
<i class="fa fa-envelope prefix"></i>
|
|
<input type="email" id="form8" class="form-control validate">
|
|
<label for="form8" data-error="wrong" data-success="right">Type your email</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<!--Password validation-->
|
|
<div class="md-form">
|
|
<i class="fa fa-lock prefix"></i>
|
|
<input type="password" id="form9" class="form-control validate">
|
|
<label for="form9" data-error="wrong" data-success="right">Type your password</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<h5 class="pb-5">Textarea</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row text-left">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<!--Basic textarea-->
|
|
<div class="md-form">
|
|
<textarea type="text" id="form10" class="md-textarea form-control" rows="3"></textarea>
|
|
<label for="form10">Basic textarea</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<!--Textarea with icon prefix-->
|
|
<div class="md-form">
|
|
<i class="fa fa-pencil prefix"></i>
|
|
<textarea type="text" id="form11" class="md-textarea form-control" rows="3"></textarea>
|
|
<label for="form11">Icon Prefix</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<h5 class="pb-5">Checkboxes and Radio</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-12 mb-4">
|
|
|
|
<fieldset class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="checkbox1" checked="checked">
|
|
<label class="form-check-label" for="checkbox1">Classic checkbox</label>
|
|
</fieldset>
|
|
|
|
<fieldset class="form-check mt-4">
|
|
<input class="form-check-input filled-in" type="checkbox" id="checkbox2" checked="checked">
|
|
<label class="form-check-label" for="checkbox2">Filled-in checkbox</label>
|
|
</fieldset>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
|
|
<fieldset class="form-check mb-4">
|
|
<input class="form-check-input" name="group1" type="radio" id="radio1" checked="checked">
|
|
<label class="form-check-label" for="radio1">Option 1</label>
|
|
</fieldset>
|
|
|
|
<fieldset class="form-check mb-4">
|
|
<input class="form-check-input" name="group1" type="radio" id="radio2">
|
|
<label class="form-check-label" for="radio2">Option 2</label>
|
|
</fieldset>
|
|
|
|
<fieldset class="form-check mb-4">
|
|
<input class="form-check-input" name="group1" type="radio" id="radio3">
|
|
<label class="form-check-label" for="radio3">Option 3</label>
|
|
</fieldset>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
|
|
<!-- Switch -->
|
|
<div class="switch">
|
|
<label>
|
|
Off
|
|
<input type="checkbox" checked="checked">
|
|
<span class="lever"></span> On
|
|
</label>
|
|
</div>
|
|
<!-- Disabled Switch -->
|
|
<div class="switch">
|
|
<label>
|
|
Off
|
|
<input disabled="" type="checkbox">
|
|
<span class="lever"></span> On
|
|
</label>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<h5 class="pb-5">File input</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<form>
|
|
<div class="md-form">
|
|
<div class="file-field">
|
|
<div class="btn btn-primary btn-sm float-left">
|
|
<span>Choose file</span>
|
|
<input type="file">
|
|
</div>
|
|
<div class="file-path-wrapper">
|
|
<input class="file-path validate" type="text" placeholder="Upload your file">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
|
|
<form action="#">
|
|
<div class="md-form">
|
|
<div class="file-field">
|
|
<div class="btn btn-primary btn-sm float-left">
|
|
<span>Choose files</span>
|
|
<input type="file" multiple>
|
|
</div>
|
|
<div class="file-path-wrapper">
|
|
<input class="file-path validate" type="text" placeholder="Upload one or more files">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<h5 class="pb-5">Range</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-12 mb-4">
|
|
|
|
<form class="range-field">
|
|
<input type="range" min="0" max="100"><span class="thumb"><span class="value"></span></span>
|
|
</form>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<h5 class="">Character counters</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row mb-5">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6">
|
|
<div style="height:83px;"></div>
|
|
<div class="md-form">
|
|
<input id="input-char-counter" type="text" length="10" class="form-control">
|
|
<label for="input-char-counter">Input text</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6">
|
|
|
|
<div class="md-form">
|
|
<textarea id="textarea-char-counter" class="md-textarea form-control" rows="3" length="120"></textarea>
|
|
<label for="textarea-char-counter">Type your text</label>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<h5 class="pb-5">Select</h5>
|
|
|
|
<!--Grid row-->
|
|
<div class="row mb-5">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-12 mb-4">
|
|
|
|
<!--Name-->
|
|
<select class="mdb-select" multiple>
|
|
<option value="" disabled selected>Basic select</option>
|
|
<option value="1">USA</option>
|
|
<option value="2">Germany</option>
|
|
<option value="3">France</option>
|
|
<option value="3">Poland</option>
|
|
<option value="3">Japan</option>
|
|
</select>
|
|
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
|
|
<!--Name-->
|
|
<!--Name-->
|
|
<select class="mdb-select colorful-select dropdown-primary" multiple>
|
|
<option value="" disabled selected>Material select</option>
|
|
<option value="1">USA</option>
|
|
<option value="2">Germany</option>
|
|
<option value="3">France</option>
|
|
<option value="3">Poland</option>
|
|
<option value="3">Japan</option>
|
|
</select>
|
|
<label>Label example</label>
|
|
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
|
|
<!--Name-->
|
|
<select class="mdb-select">
|
|
<optgroup label="team 1" >
|
|
<option value="1">Option 1</option>
|
|
<option value="2">Option 2</option>
|
|
</optgroup>
|
|
<optgroup label="team 2">
|
|
<option value="3">Option 3</option>
|
|
<option value="4">Option 4</option>
|
|
</optgroup>
|
|
</select>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-12 mb-4">
|
|
|
|
<!--Name-->
|
|
<select class="mdb-select" multiple searchable="Search here..">
|
|
<option value="" disabled selected>Search select</option>
|
|
<option value="1">USA</option>
|
|
<option value="2">Germany</option>
|
|
<option value="3">France</option>
|
|
<option value="3">Poland</option>
|
|
<option value="3">Japan</option>
|
|
</select>
|
|
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
|
|
<!--Name-->
|
|
<select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
|
|
<option value="" disabled selected>Choose your country</option>
|
|
<option value="1">USA</option>
|
|
<option value="2">Germany</option>
|
|
<option value="3">France</option>
|
|
<option value="3">Poland</option>
|
|
<option value="3">Japan</option>
|
|
</select>
|
|
<label>Search material selects</label>
|
|
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
|
|
<!--Name-->
|
|
<select class="mdb-select" multiple searchable="Search here..">
|
|
<option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">example 1</option>
|
|
<option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="rounded-circle">example 2</option>
|
|
<option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" class="rounded-circle">example 1</option>
|
|
</select>
|
|
<button class="btn-save btn btn-primary btn-sm">Save</button>
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
</div>
|
|
|
|
</section>
|
|
<!--Section: Inputs-->
|
|
|
|
<!--Section: Docs link-->
|
|
<section class="pb-5">
|
|
|
|
<!--Panel-->
|
|
<div class="card text-center">
|
|
<h3 class="card-header primary-color white-text">Full documentation</h3>
|
|
<div class="card-body">
|
|
<p class="card-text">Read the full documentation for these components.</p>
|
|
<a href="https://mdbootstrap.com/components/inputs/" target="_blank" class="btn btn-primary">Learn more</a>
|
|
</div>
|
|
</div>
|
|
<!--/.Panel-->
|
|
|
|
|
|
</section>
|
|
<!--Section: Docs link-->
|
|
|
|
</div>
|
|
</main>
|
|
<!--Main layout-->
|
|
|
|
|
|
|
|
<!-- SCRIPTS -->
|
|
<!-- JQuery -->
|
|
<script src="../../js/jquery-3.3.1.min.js"></script>
|
|
<!-- Bootstrap tooltips -->
|
|
<script type="text/javascript" src="../../js/popper.min.js"></script>
|
|
<!-- Bootstrap core JavaScript -->
|
|
<script type="text/javascript" src="../../js/bootstrap.js"></script>
|
|
<!-- MDB core JavaScript -->
|
|
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
|
<!--Custom scripts-->
|
|
<script>
|
|
// SideNav Initialization
|
|
$(".button-collapse").sideNav();
|
|
|
|
var container = document.querySelector('.custom-scrollbar');
|
|
Ps.initialize(container, {
|
|
wheelSpeed: 2,
|
|
wheelPropagation: true,
|
|
minScrollbarLength: 20
|
|
});
|
|
|
|
// Material Select Initialization
|
|
$(document).ready(function () {
|
|
$('.mdb-select').material_select();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |