bootstrap之 formgroup表单布局样式
<form class="form-horizontal" role="form"><fieldset><legend>配置数据源</legend><div class="form-group"><label class="col-sm-2 control-label" for="ds_host">主机名</label><div class="col-sm-4"><input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/></div><label class="col-sm-2 control-label" for="ds_name">数据库名</label><div class="col-sm-4"><input class="form-control" id="ds_name" type="text" placeholder="msh"/></div></div><div class="form-group"><label class="col-sm-2 control-label" for="ds_username">用户名</label><div class="col-sm-4"><input class="form-control" id="ds_username" type="text" placeholder="root"/></div><label class="col-sm-2 control-label" for="ds_password">密码</label><div class="col-sm-4"><input class="form-control" id="ds_password" type="password" placeholder="123456"/></div></div></fieldset> <fieldset><legend>选择相关表</legend><div class="form-group"><label for="disabledSelect" class="col-sm-2 control-label">表名</label><div class="col-sm-10"><select id="disabledSelect" class="form-control"><option>禁止选择</option><option>禁止选择</option></select></div></div></fieldset><fieldset><legend>字段名</legend><div class="form-group"><label for="disabledSelect" class="col-sm-2 control-label">表名</label><div class="col-sm-10"><select id="disabledSelect" class="form-control"><option>禁止选择</option><option>禁止选择</option></select></div></div></fieldset></form>
效果图:
bootstrap之 formgroup表单布局样式相关推荐
- 一步一步学习Bootstrap系列--表单布局
前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...
- BPM实例分享:如何设置表单字体样式
系统版本:V10.0 一些业务场景中,时尔需要改变表单字体 那如何设置表单字体样式? 本文将会针对全局表单和单个表单进行阐述! 1.全局表单: 修改WFRES\CSS\MvcSheet.css , ...
- CSS特效(1)——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- div css表单布局的五个小技巧
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加 ...
- html多级折叠菜单表单,JS实战篇之收缩菜单表单布局
获取节点的两种方式: 1.通过event对象的srcElement属性: 2.通过事件源对象用this传入. 代码如下: 收缩菜单 · 表单布局 function list(dtNode){ // v ...
- Qt之表单布局(QFormLayout)
简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例 ...
- python嵌套html开发gui_python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例...
PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于 ...
- vue如何制作自定义表单校验样式
vue如何制作自定义表单校验样式 先上效果图 由于vue的优越性,所以衍生出很多与之匹配并非常受欢迎的ui组件库,比如最常见的element-ui和antvue,两者内容几乎相同,样式略有差异,所以在 ...
- 4.UI界面PyQt-三大布局(盒子布局、网格布局、表单布局)
1.1盒子布局-BoxLayout垂直 代码如下(示例): import sysfrom PyQt5.QtWidgets import (QApplication, QWidget, QVBoxLay ...
最新文章
- TCP/UDP对比总结
- 采用 AI 技术的医疗创业公司大量涌现
- ajax数据字符串拼接,ajax请求到后台数据,前台不用拼接字符串,一样显示到页面...
- 基于Flink的高可靠实时ETL系统
- php与mysql基础教程第二版_PHP 和 MySQL 基础教程(二)
- spring集合的注入
- Java JDBC初步
- PLC-PC communication with C#: a quick resume about data exchange libraries
- 解决keil5不支持Samsung 2440A等较旧型号Soc的方法
- ora 所有表记录数_ORACLE中如何查找定位表最后DML操作的时间小结
- mysql连接外部数据库名字错误_数据库连接出错! 可能出错原因:数据库位置或名称不对、数据库损坏!...
- 017—mysql问答
- 沪江swf文件怎么打开_.swf文件的打开方法
- dos窗口运行java程序时中文乱码的解决方法
- WCDMA 基本信令流程
- Unity3D角色换装及换装编辑器
- Inrie(洪晓军)
- python如何将数据写入excel_使用python将数据写入excel
- matlab机械臂运动仿真
- Spring报错 conflicts with existing, non-compatible bean definition of same name and class
热门文章
- 经常使用的eclipse插件
- 在项目管理工具Redmine中使用SubVersion进行版本管理(转)
- 在巴塞罗那,华为挥别昨日 | MWC 2019
- 手写简单的双向数据绑定
- 【转】微信公共号开发,提示“该公众号暂时无法提供服务,请稍后再试”,如何解决?...
- WPF中对三维模型的控制
- wpf slider 控件模板
- 不为人知的动网7.1 SQL版注入漏洞
- 深入理解Java Proxy和CGLIB动态代理原理
- 如何安装和配置 Rex-Ray?- 每天5分钟玩转 Docker 容器技术(74)