Bootstrap表单布局样式源代码


Posted in Javascript onJuly 04, 2016

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单
创建垂直或基本表单:
•·向父 <form> 元素添加 role="form"。
•·把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
•·向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control

内联表单:
内联表单中所有元素都向左对齐,标签并排,要创建内联表单,需要在form标签中加入class.form-inline

水平表单:和其它两种表单有所不同,要创建水平表单需要遵循以下步骤.
•向父 <form> 元素添加 class .form-horizontal。
•把标签和控件放在一个带有 class .form-group 的 <div> 中。
•向标签添加 class .control-label。

Bootstrap表单布局样式如下

Bootstrap表单布局样式源代码

实现代码:

<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学习教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js option删除代码集合
Nov 12 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
详解Vue slot插槽
Nov 20 Vue.js
JS JSOP跨域请求实例详解
Jul 04 #Javascript
json格式的javascript对象用法分析
Jul 04 #Javascript
jQuery简单动画变换效果实例分析
Jul 04 #Javascript
Node.js Streams文件读写操作详解
Jul 04 #Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 #Javascript
jQuery实现的导航下拉菜单效果
Jul 04 #Javascript
表单中单选框添加选项和移除选项
Jul 04 #Javascript
You might like
elgg 获取文件图标地址的方法
2010/03/20 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
js实现二级导航功能
2017/03/03 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Django中template for如何使用方法
2021/01/31 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
学生自我鉴定
2013/12/18 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
2014年终工作总结范本
2014/12/15 职场文书
中学语文教学反思
2016/02/16 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL