【技术分享】Bootstrap之CSS篇(4)

本篇我们来学习Bootstrap表单，并对一些常用表单控件进行介绍。

本篇主要介绍Bootstrap的三种表单的创建方法，如何快速设计表单，并对一些常用的表单控件使用进行介绍。

表单

表单样式

Bootstrap提供了三种表单样式

• 垂直表单（块级）

• 内联表单

• 水平表单

表单类

Bootstrap默认的全局样式中已经设置好了基础表单的样式

1. .form-group 让表单控制和标签元素获得最好的排列效果

2. .form-control 设置了该类的<input>、<textarea>、<select>标签元素将设置width:100%。

创建垂直表单(块级)

<div id="container" style="width:96%;margin-left:2%;">
    <form id="form">
        <div class="form-group text-center">
            <h1>XXXX登陆界面</h1>
        </div>
        <div class="form-group">            
            <lable for="user">用户名：</lable>
            <input type="text" class="form-control" id="user">
        </div>
        <div class="form-group">
            <lable for="password">密码：</lable>
            <input type="password" class="form-control" id="password">
        </div> 
        <div class="form-group">
                <lable for="code">验证码：</lable>
            <input type="text" class="form-control" id="code">
        </div>
        <div class="form-group">
            <lable>
                <input type="checkbox" id="saveUser"> 记住用户名            </lable>
        </div>
        <button type="submit" class="btn btn-default">登陆</button>
    </form></div>

垂直表单创建-经验小结:

• 构建.container类容器来存放表单各种标签元素

• 构建.form-group类容器来存放每一行的表单控件

• 根据需要增加html表单控件标签

创建内联表单

• <form>中使用.form-inline类，表单控件将拥有inline-block属性。

• 内联表单只适合在视口(viewport) 不小于768px宽度时才会生效，小低这个宽度表单将会折叠起来

• 在Bootstrap中已经默认将输入框、单选、多选框默认宽度为100%，但内联表单中这些控件的宽度被设置为auto，，控制将以水平方式排列在同一行中。

• 在内联表单中所有控件都必须有label标签

• 隐藏lable标签 <lable class="sr-only"></lable>

<div id="container" style="width:96%;margin-left:2%;">
    <form class="form-inline">
        <div class="form-group">
            <label for="User">User</label>
            <input type="text" class="form-control" id="User">
        </div>
        <div class="form-group">
            <label for="password">password</label>
            <input type="password" class="form-control" id="password">
        </div>
        <div class="form-group">
            <lable for="saveUser" class="sr-only"></lable>
            <input type="checkbox" id="saveUser"> 记住用户名                
        </div>
        <button type="submit" class="btn btn-default">登陆</button>
        </form></div>

内联表单创建-经验小结:

• 同块级表单一样，需要构建.container类和.form-group类作为容器存放表单控件元素

• 每个表单控件都需要label标签，如不需要其显示可使用.sr-only类将label标签藏隐起来

创建水平表单

• 通过.form-horizontal类与栅格系统相结合，可以实现lable标签和表单控件组的水平并排布局

• 引用.form-horizontal类后，其中所包含标签与表单控件的.form-group类也效果也会变成与row类一致，我们可不再单独为每行引用.row类

<div id="container" style="width:96%;margin-left:2%;">
    <form class="form-horizontal">
        <label for="User" class="col-sm-2">User</label>
        <div class="form-group col-sm-10">
            <input type="text" class="form-control" id="User">
        </div>
        <label for="password" class="col-sm-2">password</label>
        <div class="form-group col-sm-10">
            <input type="password" class="form-control" id="password">
        </div>
        <lable for="saveUser" class="col-sm-2"></lable>
        <div class="form-group col-sm-10">
            <input type="checkbox" id="saveUser"> 记住用户名                
        </div>
        <dir class="col-sm-offset-2 col-sm-10"><!--列偏移局中-->
            <button type="submit" class="btn btn-default col-sm-4">登陆</button>
        </dir>
    </form></div>

水平表单创建-经验小结：

• 从代码中可以看出水平表单和垂直、内联表单不同的地方是同时使用了Bootstrap栅格系统

• .form-group在水平单表.form-horizontal类下即等同于.row类的效果

• 通过栅格系统col-sm-offset-2 col-sm-10实现了“登陆”按钮居中的效果

常用表单控件介绍

在表单设计中是离不开各种类表单控件支持的，下面我们来介绍几个常用的表单控件，当然大家有兴趣陬可以自行去Bootstrap网站了解更多关于表单的知识 https://v3.bootcss.com/css/#forms。

input 输入框

• text 文本

• password 密码

• datetime-local 日期和时间

• date 日期

• month 年和月，不含时区

• time 时间，不含时区

• week 年和周数

• number 数字

• email 邮箱

• url 网址，类似text，有验证参数，支持在动态键盘

• search 搜索字符串

• tel 电话号码，支持动态键盘

• color 颜色

以上控件需要通过type来引用，具体用法可查询 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input

    <input type="date" class="form-control">

textarea 文本框

• 用于多行文本输入

<form>
    <lable for="inputText"></lable>
    <textarea class="form-control" rows="5" id="inputText"></textarea></form>

radio / checkbox 单选和多选

• radio 单选

• checkbox 多选

• .radio-inline类 将一组单选控件显示在同一行

• .checkbox-inline类 将一组多选控件显示在同一行

单选框实例

<lable for="name">单选标签应用</lable><div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="option1" value="1" checked>单选1    </label>    </div><div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="option2" value="2" >单选2    </label>    </div><div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="option3" value="3" disabled>单选3    </label>    </div>

多选框实例

    <lable for="name">多选标签应用</lable>
    <div class="checkbox checked">
        <label>
            <input type="checkbox" value="" checked>
            多选1        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            多选2        </label>
    </div>
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" value="" disabled>
            多选3        </label>
    </div>

内联单选和多选框实例

• 通过引用.radio-inline和.checkbox-inline类，可以将单先和多先框放在同一行中

<labe class="radio-inline">
    <input type="radio" name="optionsRadios" id="option1" value="1">单选1</label>    <label class="radio-inline">
    <input type="radio" name="optionsRadios" id="option2" value="2">单选2</label>    <label class="checkbox-inline">
    <input type="checkbox" value="">多选1</label><label class="checkbox-inline">
    <input type="checkbox" value="">多选2</label>

不带label标签的单选和多选框实例

<labe class="radio">
    <input type="radio" name="optionsRadios" id="option1" value="1" aria-label="..."">
</label>
<label class="checkbox">
    <input type="checkbox" value="" aria-label="...">
</label>

select 下拉列表

提供下拉菜单选项

• multiple 支持多选项

下拉列表

<select class="form-control">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option></select>

下拉列表（显示选项）

<select multiple class="form-control">
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option></select>

关于本篇的总结

三种表单创建

• Bootstrap中表格设计我们经常会使用到，所以以上三种表格的创建方式我们需要完全掌握，以后在布局中才能得心应手的使用。我个人比较推荐使用水平表格的方式来创建表格，所有表单标签和控件都在栅格系统的管理中，可以自己掌控表格的展示效果。

表单控件的使用

• 表单控件在使用上并不复杂，常用的就是<input>、<textarea>、<select>这三种，其中数<input>这个输入框type类型是最多的，单选和多选这种都是属于<input>多种type中的一员

• 一定要熟悉常握好<input>和它五花八门的type类型

Bootstrap表单中除了我总结这几个常用控件还有一些比较实用的状态，，如焦点状态、禁用状态、校验状态这些就不一 一列举了，可自行前往官网查询使用方法 https://v3.bootcss.com/css/#forms

Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap

书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.9.13 at home