推荐的bootstrap之 formgroup表单布局样式
一直没能找到比较好的Form Group样式,直到找到如下样式
转自 https://www.cnblogs.com/jokerjason/p/5721349.html
其他:https://blog.csdn.net/xiaoxiaohai0000/article/details/86719988
https://blog.csdn.net/weixin_38134491/article/details/86420147
<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之 formgroup表单布局样式
<form class="form-horizontal" role="form"> <fieldset> <legend> ...
- Bootstrap表单布局样式
1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> < ...
- 一步一步学习Bootstrap系列--表单布局
前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- JS实战 · 收缩菜单表单布局
获取节点的两种方式: 1.通过event对象的srcElement属性: 2.通过事件源对象用this传入. 代码如下: <html> <head> ...
- DIV的表单布局
表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤. <!DOCTYPE html> <html> <head> <meta charset=& ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
随机推荐
- linux与unix时间戳互转
linux与unix时间戳互转 今天在消费kafka数据时遇到了这样一个问题,kafka数据中所有的数据时间戳格式都是unix上时间戳的格式,例如:1505786829101,看到这个时间戳真的是头都 ...
- ActiveMq 总结(二)
4.2.6 MessageConsumer MessageConsumer是一个由Session创建的对象,用来从Destination接收消息. 4.2.6.1 创建MessageConsumer ...
- clob 转 String
import javax.sql.rowset.serial.SerialClob; import java.io.BufferedReader; import java.io.IOException ...
- ASP.NET Core使用Elasticsearch记录NLog日志
ASP.NET Core使用Elasticsearch记录NLog日志 1.新建一个 ASP.NET Core项目 2.安装Nuge包 运行:Install-Package NLog.Web.AspN ...
- Restframework 频率throttle组件实例-3
频率逻辑: from rest_framework.throttling import BaseThrottle import time VISIT_RECORD={} class VisitThro ...
- day111 爬虫第一天
一.模拟浏览器发请求. import requests r1 =requests.get( url ="https://dig.chouti.com/", headers ={ & ...
- AndroidStudio的一些快捷键的使用
1.返回上一次浏览快捷键的设置 https://blog.csdn.net/yingtian648/article/details/73277388 2.格式化代码的快捷键的设置 htt ...
- 栈的实现——c++
栈(stack),是一种线性存储结构,它有以下几个特点: (01) 栈中数据是按照"后进先出(LIFO, Last In First Out)"方式进出栈的. (02) 向栈中添加 ...
- jQuery基础笔记 事件(6)
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
- chrome浏览器本地文件支持ajax请求的解决方法
.右键chrome的快捷键--->点击属性 .在快捷方式的选项卡的目标里末尾填上如下内容: --allow-file-access-from-files 要关闭所有的chrome打开的网页