Bootstrap学习笔记——表单


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础表单title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
head>
<body>

body>
html>

1 表单

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。
表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域按钮等。
其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。

1.1 基础表单

对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。主要将这些元素的margin、padding和border等进行了细化设置。

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

  • 1、宽度变成了100%
  • 2、设置了一个浅灰色(#ccc)的边框
  • 3、具有4px的圆角
  • 4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
  • 5、设置了placeholder的颜色为#999

代码演示:

<body>
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱:label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
  div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
  div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    label>
  div>
  <button type="submit" class="btn btn-default">进入邮箱button>
form> 

Bootstrap学习笔记——表单_第1张图片

1.2 水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)见下图。
这里写图片描述
而不是如1.1基础表单中的那样垂直显示风格.

在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统(网格布局)。

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



class="form-horizontal" role="form">
  <div class="form-group">
    
    <div class="col-sm-10">
      "email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
    div>
  div>
  <div class="form-group">
    
    <div class="col-sm-10">
      "password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
    div>
  div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        
      div>
    div>
  div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      
    div>
  div>

显示效果:
Bootstrap学习笔记——表单_第2张图片

注意:如果将类.form-group去掉也能产生水平表单效果,只是行之间表达太紧凑。显示效果非常差。

1.3 内联表单

通过在

元素中添加类名“form-inline”即可实现表单控件在一行显示——将表单控件设置成内联块元素(display:inline-block)。
具体详细其他案例可以参考http://www.imooc.com/code/2344

2 表单控件

每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。

2.1 表单控件(输入框input)

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

为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如:

<body>
<form role="form">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  div>
form>   
body>

这里写图片描述


form-group和form-control有什么实质的区别呢?
form-group一般用于div,form-control一般用于置于div中的标签元素(如input)

"form">//这里的 role = “form” 强调这个元素是表单让其更容易匹配读屏软件
class = "form-group">//这里的class = "form-group"相当于段落标签 让段落之间距离增大15px 更好看

http://wenda.jikexueyuan.com/question/9680/


2.2 表单控件(下拉选择框select)

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple。Bootstrap框架会为这些元素提供统一的样式风格。如:

<body>
<form role="form">
  <div class="form-group">
    <select class="form-control"> 
      <option>1option> 
      <option>2option> 
      <option>3option> 
      <option>4option> 
      <option>5option> 
      select>
  div>
  <div class="form-group">
      <select multiple="mutiple" class="form-control"> 
        <option>1option> 
        <option>2option> 
        <option>3option> 
        <option>4option> 
        <option>5option> 
      select>
  div>
form>   
body>

运行效果:
Bootstrap学习笔记——表单_第3张图片

备注:multiple="multiple"multiple都可以

2.3 表单控件(文本域textarea)

文本域和原始使用方法一样。

  • 设置rows可定义其高度
  • 设置cols可定义其宽度

但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<body>
<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3">textarea>
  div>
form>    
body>

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

Bootstrap框架中checkboxradio有点特殊,Bootstrap针对他们做了一些特殊化处理;
checkboxradiolabel标签配合使用会出现一些小问题(最头痛的是对齐问题)。
使用Bootstrap框架,开发人员无需考虑太多,只需要按照下面的方法使用即可。

<body>
<form role="form">
  <h3>案例1h3>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    label>
  div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
    label>
  div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    label>
  div>
form>     
body>

实现效果:
这里写图片描述

备注:
从上面的示例,我们可以得知:
1、不管是checkbox还是radio都使用label包起来
2、checkbox连同label标签放置在一个名为“.checkbox”的容器
3、radio连同label标签放置在一个名为“.radio”的容器
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。源码请查看bootstrap.css文件第1742行~第1762行。

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

将复选框和单选按钮需要水平排列的布局要求。
1、checkbox需要水平排列,在label标签上添加类名“checkbox-inline”
2、radio需要水平排列,在label标签上添加类名“radio-inline”

<body>
<form role="form">
    <form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戏
    label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">摄影
  div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
  div>
form>
body>

实现效果:
这里写图片描述

这里写图片描述

备注:第二个实现效果checkbox标签中的label标签没有使用类checkbox-inline也可以实现水平,只是页面样式略有区别。


单选控件radio标签:

  • 1.属性name设置或返回单选按钮的名称。name属性值相同表明为一组单选控件,以实现单选。不同的name属性值表明非一组单选控件,实现不了单选功能。
  • 2.“value”设置或返回单选按钮的 value 属性的值。该属性值是提交服务器以区别选项,通过该值的不同来识别不同的选项。,所以属性“value”的值必须不同;
  • 3.文本输入窗口在标签之后。
  • 4.总之“name”必须相同,”value”必须不同文本在标签之后

2.6 表单控件(按钮)

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

☑ input[type=“submit”]

☑ input[type=“button”]

☑ input[type=“reset”]

在Bootstrap框架中的按钮都是采用来实现。

2.7 表单控件大小

HTML中的表单控件大小通过height,line-height,padding和font-size等属性来实现控件的高度设置。

Bootstrap框架采用

  • 1、input-sm:让控件比正常大小更小
  • 2、input-lg:让控件比正常大小更大

来控制表单中的input,textareaselec控件的高度

<body>
<form role="form">
  <div class="form-group">
    <label class="control-label">控件变大label>
    <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
  div>
  <div class="form-group">
    <label class="control-label">正常大小label>
    <input class="form-control" type="text" placeholder="正常大小">
  div>  
  <div class="form-group">
    <label class="control-label">控件变小label>
    <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
  div> 
form> 
body>

实现效果:
Bootstrap学习笔记——表单_第4张图片
源码请查阅bootstrap.css文件第1795~第1824行。

表单控件的宽度处理类:.col-xs-*。其中*表示1~12之间的任意整数(系统会自动分为最多12列);三个等宽的可以用“.col-xs-4“来实现。

"form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-4">
      class="form-control input-lg" type="text" placeholder=".col-xs-4">
    div>
    <div class="col-xs-4">
      class="form-control input-lg" type="text" placeholder=".col-xs-4">
    div>
    <div class="col-xs-4">
      class="form-control input-lg" type="text" placeholder=".col-xs-4">
    div>
  div>
  <div class="form-group">
    <div class="col-xs-6">class="form-control" type="text" placeholder=".col-xs-6">div>
    <div class="col-xs-6">class="form-control" type="text" placeholder=".col-xs-6">div>

  div>  
  <div class="form-group">
    <div class="col-xs-5">
      class="form-control input-sm" type="text" placeholder=".col-xs-5">
    div>
    <div class="col-xs-7">
      class="form-control input-sm" type="text" placeholder=".col-xs-7">
    div>
  div> 

这里写图片描述

如果表单使用了类名“form-horizontal”,其中“form-group”就相当于网格系统中的“row”。换句话说,如果没有这样做,要通过网格系统来控制表单控件宽度.

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

焦点状态是通过伪类“:focus”来实现。
Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。

源码请查阅bootstrap.css文件第1707行~第1712行:

.form-control:focus {
border-color: #66afe9;
outline: 0;
  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

这段代码应该是不正确的,因为没有引入类.form-control:focus

"form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> class="form-control input-lg" type="text" placeholder="不是焦点状态下效果"> div> <div class="col-xs-6"> class="form-control form-control:focus input-lg" type="text" placeholder="焦点点状态下效果"> div> div>

这里写图片描述

class="form-horizontal" role="form"> <div class="form-group"> <div class="col-sm-10"> "text" id="focus" class="form-control" placeholder="获取焦点" /> div> div>

这里写图片描述
通过for=”focus“id=”focus “来实现绑定。

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

Bootstrap框架表单控件的禁用状态仅在样式风格上优化以下,其实现方法是一样的——在相应的表单控件上添加属性“disabled”。

class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

具体实现

"form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> class="form-control input-lg" type="text" placeholder="表单可输入"> div> <div class="col-xs-6"> class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled> div> div>

这里写图片描述

备注:在使用了类“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来(删除之后没有出来,只是鼠标点不动,与浏览器有关)。

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">禁用的输入框label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
    div>
    <div class="form-group">
      <label for="disabledSelect">禁用的下拉框label>
      <select id="disabledSelect" class="form-control">
        <option>不可选择option>
      select>
    div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 无法选择
      label>
    div>
    <button type="submit" class="btn btn-primary">提交button>
  fieldset>
form> 

Bootstrap学习笔记——表单_第5张图片

属性disabled作用在

标签中禁用整个域时,如果标签中有输入框的话,这个输入框是无法被禁用的。
标签为 fieldset 元素定义标题。
常规用法:


<html>
<body>
<form>
  <fieldset>
    <legend>健康信息legend>
    身高:<input type="text" />
    体重:<input type="text" />
  fieldset>
form>
body>
html>

这里写图片描述

Bootstrap 框架中的使用方法

<form role="form">
  <fieldset disabled>
    <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" />legend>
    <div class="form-group">
      <label for="disabledTextInput">禁用的输入框label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
    div>
    <div class="form-group">
      <label for="disabledSelect">禁用的下拉框label>
      <select id="disabledSelect" class="form-control">
        <option>不可选择option>
      select>
    div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> 无法选择
      label>
    div>
    <button type="submit" class="btn btn-primary">提交button>
  fieldset>
form>  

Bootstrap学习笔记——表单_第6张图片

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

表单验证的几个验证状态样式,

  • .has-warning:警告状态(黄色)
  • .has-error:错误状态(红色)
  • .has-success:成功状态(绿色)

使用的时候只需要在form-group容器上对应添加状态类名。

"form"> <div class="form-group has-success"> "text" class="form-control" id="inputSuccess1" placeholder="成功状态" > div> <div class="form-group has-warning"> "text" class="form-control" id="inputWarning1" placeholder="警告状态"> div> <div class="form-group has-error"> "text" class="form-control" id="inputError1" placeholder="错误状态"> div>

Bootstrap学习笔记——表单_第7张图片
三种状态主要是颜色不一样来体现验证状态

如果在不同表单验证状态下显示不同的icon,如成功是一个对号(√),错误是一个叉号(×)等。
让表单显示对应的icon则在对应状态下添加类名“.has-feedback”,此类名必须与与“.has-error”、“.has-warning”“.has-success”同时出现。

"form"> <div class="form-group has-success has-feedback"> "text" class="form-control" id="inputSuccess1" placeholder="成功状态" > class="glyphicon glyphicon-ok form-control-feedback"> div> <div class="form-group has-warning has-feedback"> "text" class="form-control" id="inputWarning1" placeholder="警告状态"> class="glyphicon glyphicon-warning-sign form-control-feedback"> div> <div class="form-group has-error has-feedback"> "text" class="form-control" id="inputError1" placeholder="错误状态"> class="glyphicon glyphicon-remove form-control-feedback"> div>

Bootstrap学习笔记——表单_第8张图片
备注:在 Bootstrap 的小图标都是使用@font-face来制作。而且必须在表单中添加了一个 span 元素。

2.11 表单提示信息

使用了一个类”.help-block”样式可以为表单验证时提供不同的提示信息,将提示信息以块状显示,并且显示在控件底部。

<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="help-block">你输入的信息是正确的span>
    <span class="glyphicon glyphicon-ok form-control-feedback">span>
  div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="help-block">请输入正确信息span>
    <span class="glyphicon glyphicon-warning-sign form-control-feedback">span>
  div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="help-block">您输入的信息是错误的span>
    <span class="glyphicon glyphicon-remove form-control-feedback">span>  
  div>
form>   

Bootstrap学习笔记——表单_第9张图片

Bootstrap V2.x版本的行内提示信息使用类名”help-inline“实现的,但是在Bootstrap V3.x中取消了,可以添加如下代码来实现提示信息显示在控件的后面。

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

如果不想为bootstrap.css增加自己的代码,而且设计又有这种样的需求,那么只能借助于Bootstrap的网格系统。

"form"> <div class="form-group"> <div class="row"> <div class="col-xs-6"> "text" class="form-control" id="inputSuccess1" placeholder="成功状态" > div> class="col-xs-6 help-block">你输入的信息是正确的 div> div>

这里写图片描述

3 按钮

3.1 按钮类型


     
    
    
    
    
    
    
    

Bootstrap学习笔记——表单_第10张图片

3.2 按钮大小调整

通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。


     
    
    
     

这里写图片描述

备注:类.btn-primary去掉后蓝色变为灰色

3.3 块状按钮

使用类名“btn-block”让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。常把这种按钮称为块状按钮


    
    
    
<   button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs

Bootstrap学习笔记——表单_第11张图片

4 图像

图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格通过在标签上添加对应的类名实现:

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

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <span"140x140" src="http://placehold.it/140x140">
        <div>默认图片div>
    div>
    <div class="col-sm-4">
      class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
        <div>圆角图片div>
    div>
    <div class="col-sm-4">
      class="img-circle" alt="140x140" src="http://placehold.it/140x140">
        <div>圆形图片div>
    div>
      <div class="row">
        <div class="col-sm-6">
          class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> 
            <div>缩略图div>
        div>
        <div class="col-sm-6">
          class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> 
          <div>响应式图片div>
        div>
      div>
  div>
div> 

Bootstrap学习笔记——表单_第12张图片

注意:对于圆角图片和圆形图片效果,因为是使用了CSS3的圆角样式来实现的,所以注意对于IE8以及其以下版本不支持,是没有圆角效果的。

Bootstrap框架为了更好的维护图像的样式,同样将这部分样式独立出来:
1、LESS版本,可以查阅scaffolding.less
2、Sass版本,可以查阅_scaffolding.scss
可以修改其中之一,重新编译就可以得到自己需要的图片样式效果。

5 图标

在Bootstrap框架中用CSS3的@font-face属性配合字体来实现的200个icon效果图片。
代码示例:

<body>
    <span class="glyphicon glyphicon-search">span>
    <span class="glyphicon glyphicon-asterisk">span>
    <span class="glyphicon glyphicon-plus">span>
    <span class="glyphicon glyphicon-cloud">span>
 body>

这里写图片描述

在Bootstrap框架中glyphicon默认样式是通过给元素添加“glyphicon”类名来实现,然后通过伪元素“:before”的“content”属性调取对应的icon编码:
/源码请查看bootstrap.css文件第2381行~第2992行/

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
….

另:
Bootstrap框架将内部样式也提取出来:
1、LESS版本:对应源文件为glyphicons.less文件
2、Sass版本:对应源文件为_glyphicons.scss文件
3、编译后的Bootstrap版本:查看bootstrap.css文件第2375行~第2992行

该icon是由http://glyphicons.com/提供的

可能时先入为主的思想观念,个人觉得http://fontawesome.dashgame.com/更值得拥有


http://www.imooc.com/code/2804

你可能感兴趣的