Foundation之自定义表单和开关-Web前端之家

新澳门萄京娱乐场官网 22

难得今天事情不多,一口气整理了几篇关于Foundation的教程了,难得啊,再接再厉,继续搞起啊。上节主要学习了Foundation的按钮制作,现在让我们看看自定义表单和表单开关制作。在本教程中我们主要以联系表单作为一个练习,您可以添加到您的项目或者只是拿来玩玩。一旦我们创建了这样的表单,我们将来可以直接搬到项目表单中使用:

基础表单

表单,至少对于我来说,一直是比较烦人的,特别是想当他们融入到我的设计中之时。Foundation通过JavaScript定制表单插件使整个过程变得容易了许多。这是非常简单的设置,使您能够轻松地定制你的表单元素需要的CSS。

表单中常见的元素主要包括:文本输入框下拉选择框、单选按钮、复选按钮文本域按钮等。

注意:为了能顺利得到自定义表单功能,你需要加载foundation.form.js。同时你要确保在表单插件上面加载zepto.js和foundation.js。

 

插件会将每个表单元素本身隐藏,同时会生成更多的视觉可控的元素,比如像div和a这样的标签。然后它通过交互隐藏原来的元素,这意味着表单需要函数来支持。接下来让我们看看这是如何准备工作的。

当然表单除了这几个元素之外,还有inputselecttextarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。

联系表单

1、宽度变成了100%

对于网站而言,联系表单是最常见表单之一。在这个练习中,你将看到一些标准的输入框。在你的项目中你也可以添加一个或两个对你有用的不同例子。

2、设置了一个浅灰色(#ccc)的边框

现在我们先从左列开始,在这个例子中,我使用了一个下拉选择框制作称呼,紧跟着是一个输入框用来制作姓名。在行的标准标签中我们都添加了一个collapse的类名。我们接下放置了一个邮箱的字段和下“如何找到我们的”下接选择项。

3、具有4px的圆角

Mr.

4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化

Mrs.

5、设置了placeholder的颜色为#999

Miss.

注意:类名“.form-control”是添加在
input、select上面的。只控制输入框的样式。

Ms.

新澳门萄京娱乐场官网 1

Dr.

注意:当 input 的类型是 checkbox 或者 radio 时,<label> 是包裹住了
<input> 的>。

Howdidyoufindus?

 

Google

水平表单

Afriendtoldme

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)见下图。

Notsure,whereamI?

新澳门萄京娱乐场官网 2

你需要确认你选择元素有一个id,但是除了这样之外你可以从模板中直接找到元素。所以我们先来看看表单代码的合并,你需要将它们放在第一个命名为large-6的div里。

<form  role="form">  <div >    <label for="inputEmail3" >邮箱</label>    <div >    <input type="email"  id="inputEmail3" placeholder="请输入您的邮箱地址">    </div>  </div>

接下来看第二列中的元素。它包括了文本域textarea,一个spam
me的复选框和一个切换的单选按钮,最后是一个提交按钮。

从上面可以看出水平表单的使用方法:

Sendmespam  

  1. 为 form 增添 .form-horizontal 类。

  2. 用一个 div.form-group 包裹 label 和 input

  3. 为 label 增添 .col-sm-2 .control-label

  4. 用一个 .col-sm-10 的div 包裹 input

  5. 为 input 增添 form-control 类

CCme?

 

No

 

yes

在<form>元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。

单选按钮切换

 

我们还没有覆盖单选按钮切换,所以现在我们来做。

内联表单

单选按钮切换是一个强大的input效果。其结构放在一个div标签中,并且命名为switch,紧跟着是尺寸的类名。这尺寸的类名主要包括tiny,small和large。你也可以给单选按钮切换设置一个类名rounded实现圆角。这个结构包含了两个input,用于单选按钮切换的状态。它们都有自己各自的标签,Foundation用来实现切换状态的文本。这里的input需要设置id名,并且label必须设置for属性。

有时候我们需要将表单的控件都在一行内显示,类似这样的:

No

 

这几乎涵盖了我们一个小的联系方式,你可以只是做做玩,也可以将它用到你的下一个项目中。

新澳门萄京娱乐场官网 3

其他表单元素

 

你在一个Web表单中还有什么可能需要用到呢?比如设置为未选择的radio,并表给他们设置了相同的样式display:none;。

只需要在<form>元素中添加类名“form-inline”即可。

注意:我知道使用内联样式是多么可怕的一件事情,但建议在这种情况下,还是不要将这样式写到样式表中。

 

这些自定义表单快速通过元素创建起来是多么美好的事情。用这种方式显示什么已经存在,或暗示什么用的用户交互是必需的。

如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在div容器“form-group”中,如:

下面你可以看到我们有一个span元素,并且设置了prefix类名,其次紧跟了一个下接选择项。你仍然需要把这些元素放在一个带有prefix和postfix类名的列结构中,用来防止元素分离。你也可以充分利用postfix类名加在一个对象上,如一个搜索框。即你的文本输入框后紧跟一个按钮。

 

<form  role="form">  <div >    <label  for="exampleInputEmail2">邮箱</label>    <input type="email"  id="exampleInputEmail2" placeholder="请输入你的邮箱地址">  </div>  

.com

 

.co

你或许会问,为什么添加了label标签,而且没有放置在”form-group”这样的容器中,input也不会换行;还有label标签没显示出来。如果你仔细看,在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了。

.ca

 

错误信息

注意:那么Bootstrap为什么要这么做呢?这样不是多此一举吗?其实不是的,如果没有为输入控件设置label标签,屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处,为残障人员进行了一定的考虑。

大多数表单至少会有一个必须的字段或者表单无法正常提交的属性。Foundation为了实现这些验证状态使用了error类。简单的将它添加到任何input,label,small标签或列中,就可以看到这些元素呈现红色的风格。

 

需要真正验证是否有效,你需要使用jQuery
Validate插件和使用所需的参数。当用户输入信息不正确的时候就会显示这些效果。

除了checkbox和radio,每一个表单控件都用一个 div.form-group 包裹?

有用的工具

另外,对于内联的 input checkbox radio 一个div.form-group
就包裹了所有要内联的表单控件?

在Foundation中涉及到颜色的选择,在没有设计师的帮助下并不是件容易的事。令人高兴的是,Colourco.de为大家提供了整套的颜色文案查询。移动你的鼠标,向左或向右改变颜色的色相,向上或向下改变颜色的亮度。提供菜单让你选择不同的配色方案。

 

总结

表单控件(输入框input)

表单是每个网站的重要组成部分,Foundation在表单的基础上增加了一些不错的功能,让你的表单更加强大。如果你有足够的好奇心,为什么不看看Zurb关于表单的其他开发实验,包括他们的AjAX图像上传。下章我们继续学习“Foundation之进度条、提醒、提示工具和mega下拉”。

单行输入框,常见的文本输入框,也就是inputtype属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。

 

表单控件(下拉选择select)

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple

 

表单控件(文本域textarea)

文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%新澳门萄京娱乐场官网,auto。所以为
input 增添 .form-control 后框的宽度到浏览器边缘了。可以通过增添
.col-sm-数字 来缩短宽度? 

 

表单控件(复选框checkbox和单选择按钮radio)

Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)。比如下面这样:

新澳门萄京娱乐场官网 4.png)

 新澳门萄京娱乐场官网 5

因此要采取下面的方法:

1、不管是 checkbox 还是 radio 都使用label包起来了
2、checkbox 连同 label 标签放置在一个名为“.checkbox”的div容器内 
(2) radio连同label标签放置在一个名为“.radio”的div容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。

<div >  <label>  <input type="checkbox" value="">  记住密码  </label>  </div>  

 

<div >  <label>  <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">  不喜欢  </label>  </div>  

这样就变成了:

新澳门萄京娱乐场官网 6

新澳门萄京娱乐场官网 7.png)

从上面可以看出,对于 checkbox 和 radio 可以这样做:

  1. 用一个 div.checkbox 包裹 label 和 input[type=”checkbox”] 或者用一个
    .radio 包裹 label 和 input[type=”radio”]。

  2. 让 label 包裹住 input[type=”checkbox”] 
    或者 input[type=”radio”]。

 

表单控件(复选框和单选框按钮水平排列)

有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑:
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

<div >      <label >        <input type="checkbox"  value="option1">游戏      </label>      <label >        <input type="checkbox"  value="option2">摄影      </label>      <label >      <input type="checkbox"  value="option3">旅游      </label>    </div>  

上面代码的显示是:

新澳门萄京娱乐场官网 8

新澳门萄京娱乐场官网 9.png)

注意:同样需要用div把label和input包裹起来,但是这时候div的class不像上面那样是”checkbox”或者“radio”,而是“form-group”了。

 

<div >      <label>        <input type="checkbox"  value="option1">游戏      </label>      <label>        <input type="checkbox"  value="option2">摄影      </label>      <label>      <input type="checkbox"  value="option3">旅游      </label>    </div>  

上面代码的显示是:

新澳门萄京娱乐场官网 10

新澳门萄京娱乐场官网 11.png)

注意区分不同!后者的 input 没有 .checkbox-inline

 

表单控件(按钮)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:

  ☑  input[type=“submit”]

  ☑  input[type=“button”]

  ☑  input[type=“reset”]

  ☑  <button>

在Bootstrap框架中的按钮都是采用<button>来实现,注意button中也要有
type = “button”。

新澳门萄京娱乐场官网 12

注意:从上面可以看出 “.btn”都是必须的

 

表单控件大小:

前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,paddingfont-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

这两个类适用于表单中的inputtextareaselect控件。

<input  type="text" placeholder="添加.input-lg,控件变大">  

 

然而,不管是“input-sm”还是“input-lg”仅对控件高度做了处理。但往往很多时候,我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统

 <div >      <input  type="text" placeholder=".col-xs-4">    </div>

 

表单控件状态(焦点状态)

表单状态的作用:

每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。

要让控件在焦点状态下有上面样式效果,需要给控件添加类名“form-control”

在Bootstrap框架中,fileradiocheckbox控件在焦点状态下的效果也与普通的input控件不太一样,主要是因为Bootstrap对他们做了一些特殊处理:

 

表单控件状态(禁用状态)

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。

注意:要让radio和checkbox默认被选中,是添加属性”checked”

 

但是对于整个禁用的域中(即在fieldset中设置了disabled),如果legend中有输入框的话,这个输入框是无法被禁用

<form role="form">  <fieldset disabled>  <legend><input type="text"  placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>      …  </fieldset>  </form>  

 

表单控件状态(验证状态)

在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
注意:这个是在form-group容器上对应添加状态类名的。<label>上加入,同时也会把里面的label字体颜色改变。

<div >    <label  for="inputSuccess1">成功状态</label>    <input type="text"  id="inputSuccess1" placeholder="成功状态" >  </div>

新澳门萄京娱乐场官网 13.png)

注意:<label> 没有包裹住 <input>

 

很多时候,在表单验证的时候,不同的状态会提供不同的
icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示
icon
出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

<div >    <label  for="inputSuccess1">成功状态</label>    <input type="text"  id="inputSuccess1" placeholder="成功状态" >    

注意:一定要在表单中添加最后的那个<span>,这个 span 有 3 个类。

新澳门萄京娱乐场官网 14.png)

表单提示信息

在Bootstrap框架中使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部。

<div >    <label  for="inputSuccess1">成功状态</label>    <input type="text"  id="inputSuccess1" placeholder="成功状态" >    你输入的信息是正确的      </div>  

新澳门萄京娱乐场官网 15

 

如果想让提示信息显示在控件的后面,也就是同一水平显示,可以借助于Bootstrap的网格系统:

<form role="form">  <div >  <label  for="inputSuccess1">成功状态</label>  <div ><div >  <input type="text"  id="inputSuccess1" placeholder="成功状态" >  </div>  你输入的信息是正确的  </div>  </div>  </form>  

新澳门萄京娱乐场官网 16

 

默认按钮

Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色边框颜色文本颜色

注意:要同时有.btn 和.btn-default 类

新澳门萄京娱乐场官网 17

新澳门萄京娱乐场官网 18.png)

左边是 .btn,右边是 .btn .btn-default

 

按钮多标签支持

一般制作按钮除了使用<button>标签元素之外,还可以使用<input
type=”submit”>和<a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

注意:.btn-default也需要加上,不然没边框?

 

<button  type="button">button标签按钮</button>  <input type="submit"  value="input标签按钮"/>  <a   >a标签按钮</a>  span标签按钮  <div >div标签按钮</div>  

 

注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用buttona标签来制作按钮。

 

定制风格

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

 

新澳门萄京娱乐场官网 19

新澳门萄京娱乐场官网 20

 

使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。

 

按钮大小

在Bootstrap框架中,对于按钮的大小,也是可以定制的。类似于input一样,通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小: .btn-lg  .btn-sm .btn-xs

新澳门萄京娱乐场官网 21

 

块状按钮

Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的paddingmargin值。

新澳门萄京娱乐场官网 22

禁用按钮

和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

在Bootstrap框架中,要禁用按钮有两种实现方式:

方法1:在标签中添加disabled属性

方法2:在元素标签中添加类名“disabled”

两者的主要区别是:

“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

 

图像

图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:

1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

使用方法:

使用方法非常简单,只需要在<img>标签上添加对应的类名,如下代码:

<img  alt="140x140" src="http://placehold.it/140x140">  <img   alt="140x140" src="http://placehold.it/140x140">  <img   alt="140x140" src="http://placehold.it/140x140">  <img   alt="140x140" src="http://placehold.it/140x140">  <img   alt="140x140" src="http://placehold.it/140x140">  

 

图标

 

使用方法:

 

1.不要和其他组件混合使用

 

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签,并将图标类应用到这个 标签上。

 

2.只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

。。。。

注意:把 Bootstrap 文件夹中的 fonts
文件夹放到CSS同级,不然图标不会显示。

 

文档查看: 


发表评论

电子邮件地址不会被公开。 必填项已用*标注