form表单如何加css框架,如何写好CSS系列之表单(form)

表单模块可以分为两部分：一是表单的布局，也就是规范表单元素单元的排列位置；二是表单元素，如：输入框、单选、复选、列表组件、搜索组件等，由于列表组件、搜索组件不是单纯的css组件，所以暂且没有实现。

一、表单布局的实现

表单布局分为：表单容器、行、表单元素组(包含元素标题、元素)。并且实现根据屏幕进行自适应。示例效果如下：

从示例效果可以看出，布局会根据浏览器大小实现自适应。自适应代码如下：

@import '../mixins/breakpoints';

.f-form-container{

@extend .border-sizing;

margin-top: $form-row-space;

> .f-form-row{

display: block;

white-space: nowrap;

margin: 0px;

padding: 0px;

font-size: 0px;

}

> .f-form-row + .f-form-row{

margin-top: $form-row-space;

}

&.fluid{

//自适应 xs = md -1

@include media-breakpoint-max('xs'){

.f-form-group{

display: block;

margin: 0px;

+ .f-form-group{

margin-top: get-space(lg);

}

}

}

}

}

首先对容器内部的f-form-row(表单行)进行了Magin-top的设置。然后增加了fluid类名，用于控制此表单列表是否需要支持自适应效果 。

二、表单元素的实现(部分)

表单元素只实现的input、checkbox、radio等三个基本元素类型。