bootstrap3.0实例教程之表单(form)应用详解

日期:2021-03-08 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

本文关键解读的是表单,这个实际上针对做过网站的人来讲,其实不生疏,并且能够说是最为常见的递交数据信息的Form表单。本文关键来说解1下內容:

1.基础实例

2.内联表单

3.水平排序的表单

4.被适用的控制

5.静态数据控制

6.控制情况

7.控制规格

8.协助文字

9.总结

基础实例
独立的表单控制会被全自动授予1些全局性款式。全部设定了.form-control的<input>、<textarea>和<select>元素都将被默认设置设定为width: 100%;。将label和前面提到的这些控制包裹在.form-group中能够得到最好是的排序。


拷贝编码
编码以下:

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>


两个文字框的宽度确实为100%。而且有3个form-group。

内联表单

为左对齐和inline-block级別的控制设定.form-inline,能够将其排布的更紧凑型。

必须设定宽度:在Bootstrap中,input、select和textarea默认设置被设定为100%宽度。以便应用内联表单,你必须专业为应用到的表单控制设定宽度。

1定要设定label:假如你沒有为每一个键入控制设定label,显示屏阅读文章器将没法正确识读。针对这些内联表单,你能够根据为label设定.sr-only已将其掩藏。

拷贝编码
编码以下:

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>


水平排序的表单

 根据为表单加上.form-horizontal,并应用Bootstrap预置的栅格数据class能够将label和控制组水平并排合理布局。这样做将更改.form-group的个人行为,使其主要表现为栅格数据系统软件中的行(row),因而就不用再应用.row了。


拷贝编码
编码以下:

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm⑵ control-label">Email</label>
<div class="col-sm⑴0">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm⑵ control-label">Password</label>
<div class="col-sm⑴0">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset⑵ col-sm⑴0">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset⑵ col-sm⑴0">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>



被适用的控制

在表单合理布局实例中展现了其所适用的规范表单控制。

Input
绝大多数表单控制、文字键入域控制。包含HTML5适用的全部种类:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

留意:有正确设定了type的input控制才可以被授予正确的款式。

文字框示例

拷贝编码
编码以下:

<input type="text" class="form-control" placeholder="Text input">


Textarea

适用多写作本的表单控制。可依据必须更改rows特性。

拷贝编码
编码以下:

<h1>textarea</h1>
<textarea class="form-control" rows="3"></textarea>

Checkbox 和 radio

Checkbox用于挑选目录中的1个或好几个选项,而radio用于从好几个选项中只挑选1个。

默认设置外型(层叠在1起)

拷贝编码
编码以下:

<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div></p> <p><div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>

Inline checkboxes

根据将.checkbox-inline 或 .radio-inline运用到1系列的checkbox或radio控制上,可使这些控制排序在1行。


拷贝编码
编码以下:

<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

 
同理Radio是1样的,只必须加上1下款式便可。

Select

拷贝编码
编码以下:

<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></p> <p><select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>


静态数据控制
在水平合理布局的表单中,假如必须将1行纯文字置放于label的同1行,为<p>元素加上.form-control-static便可。


拷贝编码
编码以下:

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm⑵ control-label">Email</label>
<div class="col-sm⑴0">
<p class="form-control-static">email</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm⑵ control-label">Password</label>
<div class="col-sm⑴0">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>

控制情况
根据为控制和label设定1些基础情况,能够为客户出示回馈。

键入聚焦点

大家移除一些表单控制的默认设置outline款式,并对其:focus情况授予了box-shadow款式。

拷贝编码
编码以下:

<input class="form-control" id="focusedInput" type="text" value="This is focused...">

被禁用的键入框
 为键入框设定disabled特性能够避免客户键入,并能更改1点外型,使其更直观。

拷贝编码
编码以下:

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

被禁用的fieldset
为<fieldset>设定disabled特性能够禁用<fieldset>中包括的全部控制。

<a>标识的连接作用不会受到危害
这个class只更改<a class="btn btn-default">按钮的外型,其实不能禁用其作用。提议自身根据JavaScript编码禁用连接作用。

跨访问器适配性
尽管Bootstrap会将这些款式运用到全部访问器上,Internet Explorer 9及下列访问器中的<fieldset>其实不适用disabled特性。因而提议在这些访问器上根据JavaScript编码来禁用fieldset


拷贝编码
编码以下:

<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>


可将电脑鼠标移到各个控制勤奋行查询实际效果。

校检情况
Bootstrap对表单控制的校检情况,如error、warning和success情况,都界定了款式。应用时,加上.has-warning、.has-error或.has-success到这些控制的父元素便可。任何包括在此元素以内的.control-label、.form-control和.help-block都将接纳这些校检情况的款式。


拷贝编码
编码以下:

<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>


控制规格

根据.input-lg之类的class能够为控制设定高宽比,根据.col-lg-*之类的class能够为控制设定宽度。

高宽比规格
建立大1些或小1些的表单控制以配对按钮规格。


拷贝编码
编码以下:

<inputclass="form-controlinput-lg"type="text"placeholder=".input-lg">
<inputclass="form-control"type="text"placeholder="Defaultinput">
<inputclass="form-controlinput-sm"type="text"placeholder=".input-sm"></p> <p><selectclass="form-controlinput-lg">...</select>
<selectclass="form-control">...</select>
<selectclass="form-controlinput-sm">...</select>


调剂列规格
用栅格数据系统软件中的列包裹input或其任何父元素,都可以很非常容易的为其设定宽度。


拷贝编码
编码以下:

<divclass="row">
<divclass="col-xs⑵">
<inputtype="text"class="form-control"placeholder=".col-xs⑵">
</div>
<divclass="col-xs⑶">
<inputtype="text"class="form-control"placeholder=".col-xs⑶">
</div>
<divclass="col-xs⑷">
<inputtype="text"class="form-control"placeholder=".col-xs⑷">
</div>
</div>


协助文字
用于表单控制的块级协助文字。

拷贝编码
编码以下:

<spanclass="help-block">自身占有1行或多行的块级协助文字。</span>

总结
本篇文章内容关键解读表单中各种各样控制的款式操纵。在其中也是有看到按钮的简易款式应用。

上一篇:网络服务器应用Apache的益处 返回下一篇:没有了