Dr.

? label-success：成功标签，绿色

222

SmallButton

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

? list-group-item-danger：错误，背景色为红色

具体解释：
有时我们会用到在网页顶部的导航栏输入用户名和密码，这时就需要在一行显示，此时给form标签添加.form-inline类就可轻而易举的实现；同时当改变显示设备大小时就会自动发生换行，呈普通表单的样式。

Thisisalink

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

5.6下拉菜单（菜单项状态）
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：

给form添加.form-control类: 1.宽度100%显示； 2.设置了一个浅灰色的边框；
3.具有4px的圆角；
4.设置阴影效果，并且元素得到聚焦时，阴影和边框效果会有所变化；

Button2

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

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

具体解释：
给div加上不同的类，如.has-warning警告状态，显示为黄色，.has-error错误状态，显示为红色，.has-success成功状态，显示为绿色；第一个span的.help-block为提示信息；第二个span加上后面的一长串类名，是为了在输入框后面提示不同的图标，其中.form-control-feedback必须和div的.has-feedback一同使用，不然图标不能显示在输入框内部。

下拉按钮

Mr.

6、Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left： 左对齐
.text-center： 居中对齐
.text-right： 右对齐
.text-justify：两端对齐

给div设定.form-group类名，是为了让每个输入框上下间隔一定的距离，不然两个就会挨着；

实现这些基本按钮是简单的，实现按钮组也正是如此。一个简单的按钮组的结构如下：

Miss.

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

前言：由于表单的元素比较多，因此将Bootstrap的表单单独做个总结，表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

分隔按钮

.co

上述单独插件的下载可到github去下载（

还有label的for属性和input的id必须同名，是为了标识它俩是一组，且当鼠标点击label标签时，光标会自动锁定到输入框，不用for属性时也可这样写：邮箱：
，此时input的长度不是屏幕宽度；

Button2

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

? 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

在form标签上使用类.form-horizontal主要有以下作用：
1、设置表单控件padding和margin值；
2、改变“form-group”的表现形式，类似于网格系统的“row”；
在使用时必须和网格系统配合使用，才能实现水平方向的效果，对于不同宽度的设备显示不同的布局，使用时可以调节浏览器的大小看不同的效果，当浏览器大小小于某个值就会呈垂直显示。

TinyButton

Howdidyoufindus?

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

1、input元素：加上类.form-control就可以实现最基本的输入框样式

清除插件

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

7.3可关闭的警示框
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

对于form标签的role属性，只是为了增强语义性，并无其他作用；

上一章我们学习了网页顶部导航的定制功能，这节我们要介绍Foundation一系列稳定的、风格一致的按钮，并且是很容易使用的。添加一个class”button”在任意一个锚点、输入框
或者按钮元素，则使得该元素转化为Foundation样式的按钮，这得到的也只是标准的、默认的按钮，然
而你却可以使用不同样式与种类的按钮。如下示例图：

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

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

总结：以上介绍了表单的不同显示样式，以及表单的具体的一些标签，个人觉得作为框架，最主要的是它的嵌套结构，在用时需要知道哪个标签里嵌套哪个标签。想要不同的风格，可以加入自己的css样式，总之灵活运用吧！

注意到上面代码，“f-dropdown”是非常重要的，不要遗漏了。

有用的工具

7.19面板–带有头和尾的面板
? panel-heading：用来设置面板头部样式
? panel-footer：用来设置面板尾部样式

一、基础表单

值得你去学习最后的灵活布局是在按钮里添加一个分隔按钮来提供选择。分隔按钮可以用来指示可以下拉、下载等你想要的功能。使用也很简单，只需在上面代码例子中添加class“split”，如下代码示例：

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

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

3.、select元素：与原始一致，作为下拉选择框，可以实现多行选择和单行选择，加上.form-control类只是为了同一风格

Thisisanother

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

3.14基本按钮
Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。
可以通过input a span 等标签实现

给checkbox和radio专门写了.checkbox和.radio这两个类，是为了解决对齐问题，下面的代码是垂直显示

到目前为止，你应该对Foundation的列表结构运作方式比较熟悉了，同时也是这个插件的核心。创建一个无序列表，在ul标签中添加class”clearing-thumbs”和一个空值的自定义属性为“data-clearing”，接着在每个li里添加内容。

yes

? panel-info:信息蓝

复选框和单选框水平显示，此时不需要.checkbox和.radio类，但是要配合.form-group类同时使用，给label标签加上.check-inline或.radio-inline类即可

Button3

单选按钮切换

5.11按钮（等分按钮）
自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

二、水平表单

好吧，今天就学到这里了，比较累了，选择几首好听的歌曲听听吧，今天我们完成按钮和下拉功能学习，接下来将学习定制的表单和切换了，努力吧！

No

? list-group-item-info：信息，背景色蓝色

四、表单的基本元素

如果你在第一个li标签中添加class”clearing-feature”，那么第一张图片就作为默认图片。清除也使用了前面文章所介绍的初学者学习foundation：网格系统，使得所有的缩略图搞一致，并且均匀分布。

联系表单

10、Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
.table：基础表格
给表格设置了margin-bottom:20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线
.table-striped：斑马线表格
<table class=”table table-striped”>
.table-bordered：带边框的表格
<table class=”table table-bordered”>
.table-hover：鼠标悬停高亮的表格
<table class=”table table-hover”>
.table-condensed：紧凑型表格
<table class=”table table-condensed”>
.table-responsive：响应式表格
<table class=”table table-bordered”>

4.、复选框checkbox和单选按钮radio：

Yetanother

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

? label-danger：错误标签，红色

 ` `

总结

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

? progress-bar-warning：表示警告进度条，进度条颜色为黄色

五、表单的验证

RoundButton

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

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

2、
textarea元素：加上类.form-control可以不用设置cols属性值，此时标签宽度为100%

在最新的Foundation版本中，添加了一个新的JavaScript插件叫dropdowns，这个插件放置在顶部按钮是非常方便的。当你使用它的时候，需要在button标签中添加class”dropdown”和一个自定义属性名为”data-dropdown”。

Google

? 图片轮播Carousel：对应的插件文件“carousel.js”

三、内联表单

按钮组

? 提示框（Tooltips）：对应的插件文件“tooltop.js”

按钮工具栏

Ms.

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

备注：千万别忘记添加已下载来的Foundation工程包中的“foundation.dropdown.js”。

.ca

3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss=”alert””（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

代码实现了一组标准的按钮，你还可以添加“radius”来取得圆角，添加能够控制宽度的class“even-2”、“even-3”一直到
“even-8”。里面的数字表示按钮的大小，最好是使用按钮组中的按钮个数。举个例子，如果你要创建4个按钮，那么最好使用“even-4”。

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

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

SecondaryButton

Afriendtoldme

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

清除是一个超级快、轻量级插件。当orbit滑动不起作用时，使用这个插件是很简单的且有用的。

.com

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

RadiusButton

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

6.4响应式导航条
使用方法：

Button3

错误信息

2、保证在窄屏时要显示的图标样式（固定写法）：

Yetanother

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

3.23按钮状态——禁用状态
在Bootstrap框架中，要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

Button1

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

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

Button1

CCme?

? .navbar-fixed-top：导航条固定在浏览器窗口顶部

SuccessButton

No

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

Button2