Bootstrap表单布局样式源代码

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

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

时间: 2016-07-01

浅谈bootstrap源码分析之scrollspy(滚动侦听)

源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致 <div id="selector" class="navbar navbar-default">

浅谈bootstrap源码分析之tab(选项卡)

实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hideen.bs.tab:隐藏上一个元素完成 1.4.

Bootstrap每天必学之模态框(Modal)插件

本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l

Bootstrap每天必学之工具提示(Tooltip)插件

当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发.工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息. 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js.或者,正如Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min

Bootstrap每天必学之面板

1.面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能.同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ☑ Sass版本:对应的源码文件是 _panels.scss ☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行-第5302行 2.面板–基础面板 基础面板非常简单,就是一个div容器运用了"panel"样式,产生一个具有边框的文本显示块.由于&

Bootstrap每天必学之按钮(Button)插件

按钮(Button)在 Bootstrap 按钮 一章中介绍过.通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组. 如果您想要单独引用该插件的功能,那么您需要引用 button.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.加载状态 如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loading-text="

Bootstrap每天必学之日期控制

一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的, 控件地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm GitHub上开源地址:https://github.com/smalot/bootstrap-datetimepicker 在使用datetimepicker之前,先要经过以下几个步骤 1.引用JS脚本库 <script src="

基于Bootstrap实现Material Design风格表单插件 附源码下载

Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件.该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效. 在线预览         源码下载 使用方法 使用该Material Design风格表单需要在页面中引入jquery,bootstrap相关文件和materialFormStyles.css.materialForm.js文件. <link rel=

Bootstrap每天必学之警告框插件

警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 如果您想要单独引用该插件的功能,那么您需要引用 alert.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Dat

Bootstrap 源代码分析(未完待续)

Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 中文文档 Bootstrap 因为支持响应式布局.移动设备优先和易用易学等特点,使得它成为最受欢迎的前端开发框架. Bootstrap 的响应式设计.组件开发和 JavaScript 插件开发和 预处理脚本的开发方法,也是值得学习的. 源代码 源代码下载和编译 推荐到 GitHub 下载最新.最全的 Bootstrap 源代码. GitHub 是 Boo

Android系统进程间通信(IPC)机制Binder中的Client获得Server远程接口过程源代码分析

在上一篇文章中,我们分析了Android系统进程间通信机制Binder中的Server在启动过程使用Service Manager的addService接口把自己添加到Service Manager守护过程中接受管理.在这一篇文章中,我们将深入到Binder驱动程序源代码去分析Client是如何通过Service Manager的getService接口中来获得Server远程接口的.Client只有获得了Server的远程接口之后,才能进一步调用Server提供的服务. 这里,我们仍然是通过A

Android系统进程间通信Binder机制在应用程序框架层的Java接口源代码分析

在前面几篇文章中,我们详细介绍了Android系统进程间通信机制Binder的原理,并且深入分析了系统提供的Binder运行库和驱动程序的源代码.细心的读者会发现,这几篇文章分析的Binder接口都是基于C/C++语言来实现的,但是我们在编写应用程序都是基于Java语言的,那么,我们如何使用Java语言来使用系统的Binder机制来进行进程间通信呢?这就是本文要介绍的Android系统应用程序框架层的用Java语言来实现的Binder接口了. 熟悉Android系统的读者,应该能想到应用程序框架

Android系统进程间通信(IPC)机制Binder中的Server启动过程源代码分析

在前面一篇文章Android系统进程间通信(IPC)机制Binder中的Server和Client获得Service Manager接口之路中,介绍了在Android系统中Binder进程间通信机制中的Server角色是如何获得Service Manager远程接口的,即defaultServiceManager函数的实现.Server获得了Service Manager远程接口之后,就要把自己的Service添加到Service Manager中去,然后把自己启动起来,等待Client的请求.

FCKeditor 源代码分析附中文注释

这几天都在研究FCKeditor的源代码 (FCKeditor就是网络中应用比较广泛的网页编辑器)  这里需要感谢nileaderblog的辛苦翻译. 几乎搜遍了Internet,似乎对于fckconfig.js这个文件讲解的很多,但对于fckeditor.js这个FCK的核心类文件的资料几乎为0. 所以,花了整整一天的时间,以挤牙膏的方式,对fckeditor.js这个fck核心类文件作了自己力所能及的注释,供同样学习fck的网友一个参考. 鉴于笔者水平有限,在此,请广大高手指出我的注释中不妥

JQuery组件基于Bootstrap的DropDownList(完整版)

在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆盖菜单右侧的两个圆角.使得下拉菜单左侧有2个圆角,右侧没有,看上去不是很完美.如下图所示: 本文的内容就是如何恢复右侧的圆角 先看看原本的下拉菜单的HTML结构: <ul class="dropdown-menu dropdown-menu-right" role="me

从源代码分析Android Universal ImageLoader的缓存处理机制

通过本文带大家一起看过UIL这个国内外大牛都追捧的图片缓存类库的缓存处理机制.看了UIL中的缓存实现,才发现其实这个东西不难,没有太多的进程调度,没有各种内存读取控制机制.没有各种异常处理.反正UIL中不单代码写的简单,连处理都简单.但是这个类库这么好用,又有这么多人用,那么非常有必要看看他是怎么实现的.先了解UIL中缓存流程的原理图. 原理示意图 主体有三个,分别是UI,缓存模块和数据源(网络).它们之间的关系如下: ① UI:请求数据,使用唯一的Key值索引Memory Cache中的Bit

PHP 源代码分析 Zend HashTable详解第1/3页

HashTable在通常的数据结构教材中也称作散列表,哈希表.其基本原理比较简单(如果你对其不熟悉,请查阅随便一本数据结构教材或在网上搜索),但PHP的实现有其独特的地方.理解了HashTable的数据存储结构,对我们分析PHP的源代码,特别是Zend Engine中的虚拟机的实现时,有很重要的帮助.它可以帮助我们在大脑中模拟一个完整的虚拟机的形象.它也是PHP中其它一些数据结构如数组实现的基础. Zend HashTable的实现结合了双向链表和向量(数组)两种数据结构的优点,为PHP提供了非

Android ArrayMap源代码分析

分析源码之前先来介绍一下ArrayMap的存储结构,ArrayMap数据的存储不同于HashMap和SparseArray. Java提供了HashMap,但是HashMap对于手机端而言,对空间的利用太大,所以Android提供了SparseArray和ArrayMap.二者都是基于二分查找,所以数据量大的时候,最坏效率会比HashMap慢很多.因此建议数量在千以内比较合适.  一.SparseArray SparseArray对应的key只能是int类型,它不会对key进行装箱操作.它使用了

新型ASP后门源代码分析

本是为了逃LAKER2兄 查ASP木马程序的  现在已经挑战成功,已经加为检查对象了.公布出代码给冰点的朋友使使,希望大家喜欢! 利用的是ADOX.Catalog组件 复制代码 代码如下: <%    'code by netpatch   dim dbfile,sql    db="netpatch.asp"   dbfile=server.MapPath(db) set ydb=server.CreateObject("ADOX.Catalog")