DPL基于Bootstrap的组件,提供各种布局的表单。
DPL可以使你的表单元素和控件看上去非常好,没有任何多余的HTML,我们会提供你需要的多种模式。
使用简洁和可扩展的样式实现了复杂的布局,是你可以方便的实现样式和绑定事件,你可以按照下面的内容一步步的去做。
DPL 支持4种典型的表单布局:
不同布局类型的表单需要修改一些标签,但是控件的行为是一致的。
DPL 中包含你所希望的所有表单控件的样式,同时包含一系列的自定义组件,例如在input前面或者后面附加内容;支持复选框列表。
表单控件有各种状态:错误、警告和成功,除此之外还有当禁用控件时的不可用状态。
DPL提供了简单的标签和样式来实现常见的四种表单。
名称 | 样式 | 描述 |
---|---|---|
垂直表单 (默认) | .form-vertical |
左对齐的栈式表单控件布局 |
内联表单 | .form-inline |
居左的label和内联的元素组成的简洁的表单 |
搜索表单 | .form-search |
精致的圆形边框搜索表单 |
水平表单 | .form-horizontal |
居左但内容右对齐的label和控件在一行 |
仅使用表单元素,没有额外的标签
<form class="form-vertical"> <label>Label name</label> <input type="text" class="span6" placeholder="Type something…"> <span class="help-inline">Associated help text!</span> <label class="checkbox"> <input type="checkbox"> Check me out </label> <div class="ks-button">Submit</div> </form>
使用默认的WebKit样式,只是添加样式.form-search
在搜索域上添加圆角。
<form class="well form-search"> <input type="text" class="input-medium search-query"> <div class="ks-button">搜索</div> </form>
对于 .form-inline
和 .form-horizontal
样式, 我们使用”inline-block“方式.
<form class="form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <div class="ks-button">Sign in</div> </form>
使用上面的表单布局,这里一个标签跟一些控件组成控件组。控件组 .control-group
, .control-label
, 和 .controls
样式是下面的表单需要的。
<form class="form-horizontal"> <fieldset> <legend>Legend text</legend> <div class="control-group"> <label class="control-label" for="input01">Text input</label> <div class="controls"> <input type="text" class="input-xlarge" id="input01"> <p class="help-block">Supporting help text</p> </div> </div> </fieldset> </form>
左边的是我们支持的表单默认元素,如下面列表所示:
DPL 突出了浏览器支持的 focused
和 disabled
状态。我们移除了当:focus
时Webkit默认的outline
使用 box-shadow
来替代。
DPL同时包含各种验证状态样式:错误、警告和成功。可以在.control-group
元素上应用这些样式。
<fieldset class="control-group error"> … </fieldset>
输入框组—包含前置后者后置文本—给输入框提供了上下文,更方便用户输入。一个很好的例子是在一个需要输入邮箱名的输入框中附加”@“。
可以非常简单的使用<label class="checkbox">
包围着<input type="checkbox">
元素形成一个选项。
同时支持内联的复选框和单选框,仅仅附加.control-inline
样式在应用了.checkbox
和 .radio
的元素上。
在内联表单上使用前置后置文本时,要将 .add-on
和 input
放在同一行上,不要有空格。
可以为表单元素添加帮助文本,在表单元素后面使用<span class="help-inline">
或者<p class="help-block">
包含帮助信息