<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. Node.js学习入门

    Node.js是什么 Node.js是一个可以允许我们在服务器端运行JavaScript代码的程序. 这是什么意思呢?通常,我们写的JavaScript代码都是在浏览器中运行的. 实际上,浏览器就是一 ...

  2. 细说REST API

    1. REST概述 REST(英文:Representational State Transfer,又称具象状态传输)是Roy Thomas Fielding博士于2000年在他的博士论文中提出来的一 ...

  3. 网易PM599产品笔试题

    前几天做了网易PM599的云计算领域产培生的笔试题目,下面整理了一下各个方向的笔试题和我对这些题目的解答. 云计算领域: 1.对工业互联网的理解,结合自身优势谈谈自己应该怎么去创业. 工业互联网是一次 ...

  4. Keil5创建GPIO

    软件仿真如下图 Main.c内容 #include "stm32f10x.h" int main(void) { GPIO_InitTypeDef GPIO_InitStructu ...

  5. 【十二】jvm 性能调优工具之 jhat (JVM Heap Analysis Tool)

    jhat也是jdk内置的工具之一.主要是用来分析java堆的命令,可以将堆中的对象以html的形式显示出来,包括对象的数量,大小等等,并支持对象查询语言. jhat 非常耗费cpu和内存,所以一般不使 ...

  6. Win下安装nvm

    nvm 是 windows 下切换 node 版本的管理工具,mac 下可以使用 TJ 写的 n . 1.https://github.com/coreybutler/nvm-windows/rele ...

  7. 三十五、minishell(3)

    35.1 内容 在当前的 minishell 中,如果执行 date clear 命令等,minishell 会停止: 这是因为引入进程组的时候,mshell 放置在前台进程组,同时之后在子进程中又创 ...

  8. HTTP访问控制(CORS)

    当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求.   比如,站点 http://domain-a.com 的某 HTML 页面通过 <img ...

  9. 利用PHP+MySql+Ajax操作实现年月日联动功能

    PHP+MySql+Ajax实现年月日的三级联动 <!DOCTYPE html><html>    <head>        <meta charset=& ...

  10. ubuntu 中文变成小方框 口

    今天打开ubuntu所有原来是中文的地方都变成口口口口    ,下面是解决办法,其实很简单,更新一下字体库就可以了 1. 进入到字体的目录下 /usr/share/fonts/  ,输入下面的命令 c ...