新葡亰496net Web前端 Foundation之自定义表单和按键-Web前端之家

Foundation之自定义表单和按键-Web前端之家



Howdidyoufindus?

新葡亰 1.png)

5.17导航加下拉菜单(二级导航)
只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul

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

按钮大小

5.7按钮(按钮组)
对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。

.com

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

新葡亰,5.13按钮的向下向上三角形
按钮的向下三角形,我们是通过在<button>标签中添加一个“<span>”标签元素,并且命名为“caret”:
需要在“.btn-group”类上追加“dropup”类名(这也是做向上弹起下拉菜单要用的类名)。

Mrs.

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

第六章 导航条
6.1基础导航条
第一步:首先在制作导航的列表(<ul
class=”nav”>)基础上添加类名“navbar-nav”
第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

yes

 

7.4警示框的链接
Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。

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

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

如果你想给列表项添加什么背景色,只需要在“list-group-item”基础上增加对应的类名:

Afriendtoldme

 

? panel-danger:危险红
使用方法就很简单了,只需要在panel的类名基础上增加自己需要的类名

No

新葡亰 2.png)

5.8按钮(按钮工具栏)
你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中

Notsure,whereamI?

 

3.25 200个icon:
Bootstrap框架中的图标都是字体图标,其实现原理就是通过@font-face属性加载了字体。

Dr.

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

? progress-bar-success:表示成功进度条,进度条颜色为绿色

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

 

7.20面板–彩色面板
? panel-primary:重点蓝

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

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

1、当主标题下需要副标题时可在h中嵌套small
<h1>nihao<small>a</samll></h1>

CCme?

 

6.5反色导航条
使用方法并无区别,只是将navbar-deafult类名换成navbar-inverse。

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

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

5.16自适应导航(使用)
只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

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

新葡亰 3

7.7进度条–条纹进度条
使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”

错误信息

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

7.11媒体对象–默认媒体对象
? 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容

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

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

8.3模态弹出框–触发模态弹出窗2种方法
方法一:模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx
属性。比如data-toggle=”” 或者 data-dismiss=””)
方法二:触发模态弹出窗也可以是一个链接<a>元素,那么可以使用链接元素自带的href属性替代data-target属性

Miss.

 

3.20按钮大小
按钮可通过.btn-lg .btn-sm .btn-xs来改变按钮的大小

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

 

7.6进度条–彩色进度条
? progress-bar-info:表示信息进度条,进度条颜色为蓝色

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

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

3.4表单控件(输入框input)
在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型
为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”

有用的工具

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

第三章 表单
3.1基础表单
在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999

Ms.

  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 类

7.10进度条–带Label的进度条
只需要在进度条中添加你需要的值

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

新葡亰 4

5.3下拉菜单(下拉分隔线)
在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。

其他表单元素

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

3.11表单控件状态(禁用状态)
只需要在需要禁用的表单控件上加上“disabled”即可:
如果fieldset设置了disabled属性,整个域都将处于被禁用状态。

联系表单

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

? label-deafult:默认标签,深灰色

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

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

? 下拉菜单(Dropdown):对应的插件文件“dropdown.js”

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

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

5.5下拉菜单(对齐方式)
Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名,

单选按钮切换

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

? 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容

.co

 

7.11媒体对象–媒体对象的嵌套
只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”

Google

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

? 选项卡(Tab):对应的插件文件“tab.js”

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

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

3.8表单控件(按钮)
在Bootstrap框架中的按钮都是采用<button>来实现。

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

表单控件(按钮)

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

Mr.

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

? 折叠/手风琴(Collapse):对应的插件文件“collapse.js”

No

新葡亰 5

?
媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片

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

新葡亰 6

3.7表单控件(复选框和单选按钮水平排列)
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

Sendmespam  

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

7.16列表组–列表项的状态设置
? active:表示当前状态
? disabled:表示禁用状态

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

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

6.6分页导航(带页码的分页导航)
在ul标签上加入pagination方法

.ca

  ☑  <button>

第七章:其它内置组件
7.1缩略图(一)
Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。
在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等:

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

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

5.9按钮(嵌套分组)
使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级

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

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

? label-success:成功标签,绿色

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

 

3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;

 

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

总结

 

3.3内联表单
你只需要在<form>元素中添加类名“form-inline”即可。

 

5.4下拉菜单(菜单标题)
通过添加dropdown-header类可以给每个组添加一个头部(标题)

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

2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;

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

7.14列表组–带徽章的列表组
具体做法很简单,只需要在“list-group-item”中添加徽章组件“badge”:

<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">  

? list-group-item-info:信息,背景色蓝色

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

6.3固定导航条
Bootstrap框架提供了两种固定导航条的方式:

水平表单

7.5进度条–基本样式
Bootstrap框架中也是按这样的方式实现的,他提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度。

新葡亰 7

4.4列偏移
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度
不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示

新葡亰 8.png)

9、代码风格
在Bootstrap主要提供了三种代码风格:
1、使用<code></code>来显示单行内联代码
你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

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

7.17列表组–多彩列表组
? list-group-item-success:成功,背景色绿色

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

第八章JavaScript插件
8.1导入JavaScript插件
? 动画过渡(Transitions):对应的插件文件“transition.js”

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

? 模态弹窗(Modal):对应的插件文件“modal.js”

新葡亰 9

3.10表单控件状态(焦点状态)
焦点状态是通过伪类“:focus”来实现
要让控件在焦点状态下有样式效果,需要给控件添加类名“form-control”

使用方法:

? panel-success:成功绿

这样就变成了:

8.4模态弹出框–为弹出框增加过度动画效果
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

 

? label-info:信息标签,浅蓝色

 

7、去点无序列表
bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

新葡亰 10.png)

5.18面包屑式导航
使用方式就很简单,为ol加入breadcrumb类

 

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

2、当某一段落需要突出显示时可添加lead类,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理
class=”lead”

标签:

相关文章

发表评论

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

网站地图xml地图