aid-elements-cmcc
Version:
AI Design Elements
962 lines (877 loc) • 679 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="../dist/css/aid.min.css">
<link rel="stylesheet" href="docs.min.css">
<link rel="stylesheet" href="quill.snow.css">
<style>
.row {
padding-bottom: 20px;
}
.doc {
padding: 30px;
}
/*.row {
padding-bottom: 20px;
}*/
/*#select .dropdown--open:not(.dropup) > .dropdown__menu {
position: static;
display: block;
margin-bottom: .25rem;
clear: left;
}*/
.color {
width: 60px;
height: 60px;
display: block;
border-radius: 50%;
margin: 10px auto;
}
h1 {
margin-top: 30px;
}
h2 {
margin-top: 20px;
}
aside.bs-docs-sidebar {
top: 60px;
right: 0;
}
.scroll2top {
position: fixed;
bottom: 0;
right: 50px;
font-size: 4rem;
box-shadow: none;
}
/*.date-pick.dropdown__menu {
position: relative;
top: 5px;
}*/
</style>
</head>
<body>
<div class="doc container">
<div class="row">
<!--组件-->
<section class="bs-docs-section col-md-10">
<!--基础-->
<h1 id="Basic">Basic</h1>
<hr>
<div class="col-12">
<!--按钮-->
<h2>按钮-buttons</h2>
<div class="col-12">
<h2>基础按钮</h2>
<div>
<div class="bd-example" data-example-id="">
<div>
<p>正常：</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div>
<div class="mt-1">
<p>.active：</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary active">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary active">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success active">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info active">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning active">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger active">Danger</button>
</div>
</div>
<div class="mt-1">
<p>.disabled：</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary" disabled>Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success" disabled>Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info" disabled>Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning" disabled>Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger" disabled>Danger</button>
</div>
</div>
<div class="mt-1">
<p>图标：</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary"><i class="aid aid-cart"></i> 购物车</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary"><i class="aid aid-email text-gray-light"></i> 发邮件</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success"><i class="aid aid-loupe"></i> 新增内容</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-secondary"><i class="aid aid-heart text-red"></i> 已收藏</button>
</div>
</div>
<div class="mt-1">
<p>圆形：圆形按钮需要自己设置width和height一样高</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-circle"><i class="aid aid-cart"></i></button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-danger btn-circle"><i class="aid aid-close"></i></button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-circle"><i class="aid aid-check"></i></button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-secondary btn-circle"><i class="aid aid-heart text-red"></i>
</button>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt"><i class="aid aid-chevron-right"></i></span>Primary<span
class="nt"></button></span>
<span class="c"><!-- Secondary, outline button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-secondary"</span><span
class="nt">></span>Secondary<span
class="nt"></button></span>
<span class="c"><!-- Indicates a successful or positive action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span
class="nt"></button></span>
<span class="c"><!-- Contextual button for informational alert messages --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span
class="nt"></button></span>
<span class="c"><!-- Indicates caution should be taken with this action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span
class="nt"></button></span>
<span class="c"><!-- Indicates a dangerous or potentially negative action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span
class="nt"></button></span></code></pre>
</div>
</div>
<h2>幽灵按钮</h2>
<div>
<div class="bd-example" data-example-id="">
<div>
<p>正常：</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-outline-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-outline-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-outline-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-outline-danger">Danger</button>
</div>
</div>
<div class="mt-1">
<p>.active：</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-outline-primary active">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-outline-secondary active">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-outline-success active">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-outline-info active">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-outline-warning active">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-outline-danger active">Danger</button>
</div>
</div>
<div class="mt-1">
<p>.disabled：</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-outline-primary" disabled>Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-outline-success" disabled>Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-outline-info" disabled>Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-outline-warning" disabled>Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-outline-danger" disabled>Danger</button>
</div>
</div>
<div class="mt-1">
<p>圆形：圆形按钮需要自己设置width和height一样高</p>
<div>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-outline-primary btn-circle"><i class="aid aid-cart"></i></button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-outline-danger btn-circle"><i class="aid aid-close"></i></button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-outline-success btn-circle"><i class="aid aid-check"></i>
</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-outline-secondary btn-circle"><i
class="aid aid-heart text-red"></i>
</button>
</div>
</div>
<p>白色按钮</p>
<div class="mt-1 bg-gray-darker p-3">
<p class="text-white">正常</p>
<button type="button" class="btn btn-outline-white">white</button>
<p class="text-white">active</p>
<button type="button" class="btn btn-outline-white active">white</button>
<p class="text-white">disabled</p>
<button type="button" class="btn btn-outline-white" disabled>white</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span
class="nt">></span>Primary<span class="nt"></button></span>
<span class="c"><!-- Secondary, outline button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Secondary<span
class="nt"></button></span>
<span class="c"><!-- Indicates a successful or positive action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-outline-success"</span><span
class="nt">></span>Success<span class="nt"></button></span>
<span class="c"><!-- Contextual button for informational alert messages --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">></span>Info<span
class="nt"></button></span>
<span class="c"><!-- Indicates caution should be taken with this action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span
class="nt">></span>Warning<span class="nt"></button></span>
<span class="c"><!-- Indicates a dangerous or potentially negative action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span
class="nt">></span>Danger<span
class="nt"></button></span></code></pre>
</div>
</div>
<h2>按钮尺寸</h2>
<div>
<p>给按钮添加<code>.btn-lg</code>或者<code>.btn-sm</code>类以实现额外的大小。</p>
<div class="bd-example" data-example-id="">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Large button</button>
<button type="button" class="btn btn-primary btn-lg"><i class="aid aid-home"></i>Large button</button>
<button type="button" class="btn btn-secondary btn-sm"><i class="aid aid-home"></i>Large button</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span
class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">></span>Large button<span
class="nt"></button></span></code></pre>
</div>
<p>给按钮添加<code>.btn-block</code>类，可以创建一个块区域按钮——即那种延展到父元素全宽的按钮。</p>
<div class="bd-example" data-example-id="">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span
class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-primary btn-lg btn-block"</span><span class="nt">></span>Block level button<span
class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span
class="na">class=</span><span class="s">"btn btn-secondary btn-lg btn-block"</span><span
class="nt">></span>Block level button<span class="nt"></button></span></code></pre>
</div>
</div>
<h2>按钮组</h2>
<div>
<h3>预定义按钮组</h3>
<div>
<p>用<code>.btn-group</code>把一系列带有<code>.btn</code>的按钮包裹起来。</p>
<div class="bd-example" data-example-id="">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary checked">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary"><i class="aid aid-rss"></i></button>
<button type="button" class="btn btn-secondary"><i class="aid aid-windows"></i></button>
<button type="button" class="btn btn-secondary"><i class="aid aid-wifi"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary"><i class="aid aid-thumb-up icon-gradient-primary"></i>
</button>
<button type="button" class="btn btn-secondary"><i class="aid aid-thumb-down"></i></button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span
class="nt"><div</span> <span
class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span class="s">"group"</span> <span
class="na">aria-label=</span><span class="s">"Basic example"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>Left<span
class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>Middle<span
class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>Right<span
class="nt"></button></span>
<span class="nt"></div></span></code></pre>
</div>
</div>
<h3>按钮工具栏</h3>
<div>
<p>将一系列按钮组组合成工具栏以实现更复杂的组件。</p>
<div class="bd-example" data-example-id="">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span
class="nt"><div</span> <span
class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span> <span
class="na">aria-label=</span><span class="s">"Toolbar with button groups"</span><span
class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span
class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span
class="s">"First group"</span><span
class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>1<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>2<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>3<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>4<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group mr-2"</span> <span
class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span
class="s">"Second group"</span><span
class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>5<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>6<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>7<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">role=</span><span
class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"Third group"</span><span
class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span
class="s">"btn btn-secondary"</span><span class="nt">></span>8<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre>
</div>
</div>
<h3>尺寸</h3>
<div>
<p>不需要对组中的每个按钮应用按钮尺寸类，只需要对每个<code>.btn-group</code>添加<code>.btn-group-*</code>类。如果嵌套了多个组，里面每个按钮都会自动获得大小。
</p>
<div class="bd-example">
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-secondary active">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span
class="nt"><div</span> <span
class="na">class=</span><span class="s">"btn-group btn-group-lg"</span> <span class="na">role=</span><span
class="s">"group"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span
class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span
class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span
class="s">"..."</span><span
class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span> <span
class="na">role=</span><span class="s">"group"</span> <span class="na">aria-label=</span><span
class="s">"..."</span><span
class="nt">></span>...<span class="nt"></div></span></code></pre>
</div>
</div>
</div>
</div>
</div>
<!--Form-->
<h1 id="form">Form</h1>
<hr>
<div class="col-12">
<!--Input 输入框-->
<h2 id="inputs">Input 输入框</h2>
<div class="bd-example col-12">
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
<div class="mt-3">
<p>配合js在输入框有内容时候添加<code>.form-input--clear</code>显示清除按钮</p>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入..." value="2017-4-21">
</div>
</div>
<div class="mt-3">
<label>disabled</label>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入..." disabled>
</div>
</div>
<div class="mt-3">
<p>大尺寸:<code>form-control--lg</code></p>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control form-control--lg" placeholder="请输入...">
</div>
<p class="mt-3">小尺寸:<code>form-control--sm</code></p>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control form-control--sm" placeholder="请输入...">
</div>
</div>
<h3 class="mt-3">按钮输入框组</h3>
<p class="mt-3">这里需要配合js在input 的focus的时候加上<code>.input-group--focus</code></p>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
<div class="input-group mt-3">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入..." value="我是输入的内容">
</div>
</div>
<div class="input-group input-group--focus mt-3">
<div class="form-input form-input--clear">
<input type="text" class="form-control" placeholder="请输入..." value="我是输入的内容">
<span class="icon-clear form-input__icon--clear"></span>
</div>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
<div class="mt-3">
<p>disabled，这里只有样式，需要把input和button也添加disabled属性</p>
<div class="input-group" disabled>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" disabled>Go!</button>
</span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入..." disabled>
</div>
</div>
</div>
<div class="mt-3">
<p>大尺寸: <code>.input-group--lg</code></p>
<div class="input-group input-group--lg">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
</div>
<div class="mt-3">
<p>小尺寸: <code>.input-group--sm</code></p>
<div class="input-group input-group--sm">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
</div>
<h3 class="mt-3">图标输入框组</h3>
<div class="input-group ">
<span class="input-group-icon">
<i class="aid aid-magnify"></i>
</span>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
<div class="mt-3">
<p>disabled</p>
<div class="input-group" disabled>
<span class="input-group-icon"><i class="aid aid-magnify"></i></span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入..." disable>
</div>
</div>
</div>
<div class="mt-3">
<p>大尺寸：<code>.input-group--lg</code></p>
<div class="input-group input-group--lg">
<span class="input-group-icon"><i class="aid aid-magnify"></i></span>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
</div>
<div class="mt-3">
<p>小尺寸：<code>.input-group--sm</code></p>
<div class="input-group input-group--sm">
<span class="input-group-icon"><i class="aid aid-magnify"></i></span>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
</div>
</div>
<!--AutoComplete-->
<h2 id="autocomplete">AutoComplete 自动完成</h2>
<div class="bd-example col-12">
<div class="auto-complete dropdown" style="width: 400px;">
<input class="auto-complete__input form-control" type="text" placeholder="please enter" disabled>
<div class="auto-complete__list dropdown__menu" aria-labelledby="dropdownMenuButton">
<a class="select__item active" href="#">Action</a>
<a class="select__item disabled" href="#" disabled>Another action</a>
<div class="dropdown__divider"></div>
<a class="select__item" href="#">Something else here</a>
</div>
</div>
<div class="auto-complete dropdown dropdown--open mt-3" style="width: 400px;">
<input class="auto-complete__input form-control" type="text" placeholder="please enter">
<div class="auto-complete__list dropdown__menu" aria-labelledby="dropdownMenuButton">
<a class="select__item active" href="#">Action</a>
<a class="select__item disabled" href="#" disabled>Another action</a>
<div class="dropdown__divider"></div>
<a class="select__item" href="#">Something else here</a>
</div>
</div>
</div>
<!--Search-Filter-->
<h2 id="search-filter">Search-Filter 搜索框</h2>
<div class="col-12">
<div class="bd-example">
<p>输入内容的时候需要有清除的图标按钮，使用<code>.form-input--clear</code>类名显示标签</p>
<div class="input-group input-group">
<span class="input-group-addon"><i class="aid aid-magnify"></i></span>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
<div class="mt-3"></div>
<div class="input-group input-group">
<span class="input-group-addon"><i class="aid aid-magnify"></i></span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
</div>
<div class="bd-example">
<p>大尺寸：<code>.input-group--lg</code> 小尺寸：<code>.input-group--sm</code></p>
<label>尺寸</label>
<div class="input-group input-group--lg">
<span class="input-group-addon"><i class="aid aid-magnify"></i></span>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
<div class="mt-3"></div>
<div class="input-group input-group--sm">
<span class="input-group-addon"><i class="aid aid-magnify"></i></span>
<div class="form-input form-input--clear">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入...">
</div>
</div>
</div>
<div class="bd-example">
<label>disabled</label>
<p>disabled状态：<code>disabled</code><!-- 属性或者<code>.form-input-search--disabled</code>--></p>
<div class="input-group" disabled>
<span class="input-group-addon"><i class="aid aid-magnify"></i></span>
<div class="form-input">
<a class="form-input__icon--clear">
<i class="icon-clear"></i>
</a>
<input type="text" class="form-control" placeholder="请输入..." disabled>
</div>
</div>
</div>
</div>
<!--Radio-->
<h2 id="radio">Radio 单选框</h2>
<div class="bd-example col-12">
<div>
<label class="form-radio">
<input type="radio" class="form-radio__input">
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio form-radio--lg">
<input type="radio" class="form-radio__input" checked>
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio form-radio--sm">
<input type="radio" class="form-radio__input">
<span class="form-radio__inner">Check this custom radio</span>
</label>
</div>
<div>
<label class="form-radio" disabled>
<input type="radio" class="form-radio__input" disabled>
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio form-radio--lg form-radio--disabled">
<input type="radio" class="form-radio__input" checked disabled>
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio form-radio--sm form-radio--disabled">
<input type="radio" class="form-radio__input" disabled>
<span class="form-radio__inner">Check this custom radio</span>
</label>
</div>
<h3 class="mt-3">radio-group</h3>
<div class="radio-group">
<label class="form-radio">
<input type="radio" name="radio-group" class="form-radio__input">
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio">
<input type="radio" name="radio-group" class="form-radio__input" checked>
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio">
<input type="radio" name="radio-group" class="form-radio__input">
<span class="form-radio__inner">Check this custom radio</span>
</label>
</div>
<h3 class="mt-3">radio-group-inline</h3>
<div class="radio-group radio-group-inline">
<label class="form-radio">
<input type="radio" name="radio-group-inline" class="form-radio__input">
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio">
<input type="radio" name="radio-group-inline" class="form-radio__input">
<span class="form-radio__inner">Check this custom radio</span>
</label>
<label class="form-radio">
<input type="radio" name="radio-group-inline" class="form-radio__input">
<span class="form-radio__inner">Check this custom radio</span>
</label>
</div>
</div>
<!--Checkbox-->
<h2 id="checkbox">Checkbox </h2>
<div class="bd-example col-12">
<div>
<p>
checked状态：可以在<code>label.form-checkbox</code> 后面添加<code>.form-checkbox--checkded</code>类名实现，也可以在<code>input.form-checkbox__input</code>后添加<code>checked</code>属性实现
</p>
<label class="form-checkbox">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox form-checkbox--lg">
<input type="checkbox" class="form-checkbox__input" checked>
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox ">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
</div>
<div class="mt-3">
<p>
disabled状态：可以在<code>label.form-checkbox</code> 后面添加<code>.form-checkbox--disabled</code>类名实现，也可以在<code>input.form-checkbox__input</code>后添加<code>disabled</code>属性实现
</p>
<label class="form-checkbox form-checkbox--disabled">
<input type="checkbox" class="form-checkbox__input" disabled>
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox form-checkbox--lg" disabled>
<input type="checkbox" class="form-checkbox__input" checked disabled>
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox " disabled>
<input type="checkbox" class="form-checkbox__input" disabled>
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
</div>
<div class="mt-3">
<p>
半选状态：可以在<code>label.form-checkbox</code> 后面添加<code>.form-checkbox--indeterminate</code>类名实现，也可以在<code>input.form-checkbox__input</code>后添加<code>indeterminate</code>属性实现
</p>
<label class="form-checkbox form-checkbox--indeterminate">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox form-checkbox--lg">
<input type="checkbox" class="form-checkbox__input" indeterminate>
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox ">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
</div>
<h3 class="mt-3">checkbox-group</h3>
<div class="checkbox-group">
<label class="form-checkbox">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox">
<input type="checkbox" class="form-checkbox__input" checked>
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
</div>
<h3 class="mt-3">checkbox-group-inline</h3>
<div class="checkbox-group checkbox-group-inline">
<label class="form-checkbox">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
<label class="form-checkbox">
<input type="checkbox" class="form-checkbox__input">
<span class="form-checkbox__inner">Check this custom checkbox</span>
</label>
</div>
</div>
<!--Switch-->
<h2 id="switch">Switch 开关</h2>
<div class="col-12">
<div class="bd-example" data-example-id="">
<p>椭圆形用<code>.switch--round</code>类名修饰</p>
<p>checked状态可以使用<code>.switch--checked</code>类名或者<code>checked</code>属性修饰</p>
<label>基本</label>
<div>
<span class="switch switch--round switch--checked">
<span class="switch__inner"></span>
</span>
<span class="switch switch--round">
<span class="switch__inner"></span>
</span>
<span class="switch switch--checked">
<span class="switch__inner">开</span>
</span>
<span class="sw