<form class="form-horizontal" role="form">
<fieldset>
<legend>基础信息</legend>
<div class="col-md-4">
<div class="form-group">
<label class="col-sm-3 control-label">标准类别</label>
<div class="col-sm-9">
<select class="form-control" style="width:60%" autocomplete="off" id="cdd_filetype">
<option value="" selected="selected">食品加工产品</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">名称</label>
<div class="col-sm-9">
<input class="form-control" style="width:60%" id="username" type="text" placeholder="" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-sm-3 control-label">标准编号</label>
<div class="col-sm-9">
<input type="text" id="cdd_filename" name="FileName" style="width:60%" value="GB 9681-88" placeholder="标准编号" class="form-control" required="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">别名</label>
<div class="col-sm-9">
<input class="form-control" style="width:60%" id="biename" type="text" placeholder="" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-sm-3 control-label">过期时间</label>
<div class="col-sm-9">
<input type="text" class="layui-input" id="test1" style="width:auto" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</fieldset>
</form>

效果图:

bootstrap 3列表单布局的更多相关文章

  1. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  2. Bootstrap常用表单布局

    参考链接: https://blog.csdn.net/shuai_wy/article/details/78978023

  3. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  4. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  5. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  6. bootstrap之表单

    一.表单布局 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是 ...

  7. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  8. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  9. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

随机推荐

  1. Python Thrift 简单示例

    本文基于Thrift-0.10,使用Python实现服务器端,使用Java实现客户端,演示了Thrift RPC调用示例.Java客户端提供两个字符串参数,Python服务器端计算这两个字符串的相似度 ...

  2. Android获取版本号

    public static String getVersionName(Context context) { PackageManager manager = context.getPackageMa ...

  3. 三十六、Linux 线程——线程基本概念及线程的创建和终止

    36.1 线程介绍 36.1.1 线程的基本概念 进程是资源管理的最小单位,线程是程序执行的最小单位 每个进程都有自己的数据段.代码段和堆栈段. 线程通常叫做轻型的进程,它包含独立的栈和 CPU 寄存 ...

  4. axis2客户端

    package com.yq.test; /** * Created by yangqing on 2016/12/6. */ import java.util.Date; import java.u ...

  5. SSR搭建服务器

    SSR搭建服务器一站式教程:https://ssr.tools/252

  6. 第28月第3天 c语言读写文件

    1. int ConfigIniFile::OpenFile( const char* szFileName ) { FILE *fp; size_t nLen; int nRet; CloseFil ...

  7. VMWare14 安装Mac OS系统(图解)

    ★ 背景 瞅了瞅自己干瘪的钱包,没忍心入手期待已久的 macPro,只好在虚拟机里玩一下 mac好了,等以后钱包傲气的时候再来个真实的. 安装环境: windows10 VMWare14.2 一.准备 ...

  8. Java -cp 命令行引用多个jar包的简单写法(Windows、Linux

    1.Windows下用法 在Windows上,可以使用 用法:java your-jar-lib-folder/* your-main-class your-jar-lib-folder为存放一堆ja ...

  9. tidb调研

    TiDB是新一代开源分布式 NewSQL 数据库,相比较于我们常见的数据库MySQL,TiDB具有水平伸缩.强一致性的分布式事务.基于 Raft 算法的多副本复制等特性.同时,TiDB兼容MySQL生 ...

  10. DIY一些基于netty的开源框架

    几款基于netty的开源框架,有益于对netty的理解和学习! 基于netty的http server框架 https://github.com/TogetherOS/cicada 基于netty的即 ...