• 表单类型 标签和控件放在一个里 所有的文本元素input、textarea、select 隐藏标签 向标签添加 垂直基本表单 role = “form” class = “form-group” class = “form-control” 内联表单 role = ...
    | 表单类型 |`` |标签和控件放在一个``里|所有的文本元素input、textarea、select|隐藏``标签|向标签``添加|
    | ------------- |:-------------:| -----:|
    | 垂直基本表单 |role = "form" |class = "form-group"|class = "form-control"|||
    |内联表单|role = "form" class = "form-inline"|class = "form-group"|class = "form-control"|class = "sr-only"||
    |水平表单|role = "form" class = "form-horizontal"|class = "form-group"|class = "form-control"||class = "control-label"|
    
    
    ----------
    
    
    **垂直或基本表单**
    基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。创建基本表单的步骤:
    (1)向父 `` 元素添加 role="form"。
    (2)把标签和控件放在一个带有 class .form-group 的 ` 中。这是获取最佳间距所必需的。
    (3)向所有的文本元素 ``、`` 和 `` 添加 class .form-control。
    
    ```
    
    	
    		名称
    		
    	
    	
    	
    		文件输入
    		
    		这是块级帮助文本的实例
    	
    	
    	
    		
    			请打钩		
    		
    	
    	
    	提交
    
    ```
    ![这里写图片描述](https://img-blog.csdn.net/20170306104348755?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzY3NDgyNzg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    
    ----------
    **内联表单**
    (1)如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,可以向 `` 标签添加 class .form-inline。
    (2)默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
    (3)使用 class .sr-only,您可以隐藏内联表单的标签。
    
    ```
    
    
    		名称
    		
    	
    	
    	
    		文件输入
    		
    	
    	
    	
    		
    			请打钩		
    		
    	
    	
    	提交
    
    ```
    ![这里写图片描述](https://img-blog.csdn.net/20170306104927013?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzY3NDgyNzg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    
    ----------
    
    **水平表单**
    水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:
    (1)向父 `` 元素添加 class .form-horizontal。
    (2)把标签和控件放在一个带有 class .form-group 的 `` 中。
    (3)向标签添加 class .control-label。
    
    ```
    
    	
    		名字
    		
    			
    		
    	
    	
    	
    		姓
    		
    			
    		
    	
    	
    	
    		
    			
    				
    					请记住我
    				
    			
    		
    	
    	
    	
    		
    			提交
    		
    	
    
    ```
    ![这里写图片描述](https://img-blog.csdn.net/20170306105916269?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzY3NDgyNzg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    
    ----------
    
    
    展开全文
  • bootstrap 水平排列表单 2015-12-30 11:01:00
    水平排列的表单 通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,...水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几
  • bootstrap水平表单 2017-10-09 14:19:01
    水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行: 向父 元素添加 class .form-horizontal。 把标签和控件放在一个带有 class .form-...
  • Bootstrap表单布局类型有哪些? 垂直表单 内联表单 水平表单 向父 <form> 元素添加 role="form" 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 向所有...
  • bootstrap表单组框 2018-12-27 21:51:05
    bootstrap提供三种表单布局: 垂直布局。(默认使用) 内联布局。 水平布局。 创建表单步骤: 向&lt;form&gt;元素添加 role="form"。 把标签和控件放在一个带有 class .form-group 的 &...
  • Bootstrap 表单详解 2018-04-27 09:55:25
    Bootstrap 通过一些简单的 ...* 水平表单 1.1 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤: 向父 &lt;form&gt; 元素...
  • 详解Bootstrap表单组件 2019-06-27 21:58:29
    表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本: LESS: forms.less ...bootstrap仅对表单内的fieldset、legend、label标签进行了定制 fi...
  • Bootstrap 框架-表单 2018-08-10 15:17:49
    表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控...
  • Bootstrap表单 2018-09-01 17:15:31
    同表格一样,在Bootstrap中对表单标签进行了细化,配合扩展类你可以创建出各种样式的表单, Boostrap表单分类 垂直表单(默认表单) 内联表单 水平表单 垂直表单或基本表单  在Bootstrap中对于表单已经有了...
  • Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1、在<form>元素是使用类名“form-...
  • Bootstrap3 表单支持的控件 2019-05-07 16:04:55
    Bootstrap支持所有的标准表单控件,包括 input 控件、textarea 控件、checkbox 和 radio 控件、select 控件等。 1、input 控件 Bootstrap除了支持大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入...
  • <!-- 为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。 --> --> <!--[if lt IE 9] ... 内联元素:让元素排成一行显示出来,且高度和宽度由内容决定,不能用css
  • Bootstrap提供了三种表单布局:垂直表单,内联表单水平表单 创建垂直表单: <!DOCTYPE html> <html> <head> <title>表单</title> <meta charset="utf-8"> <meta name=...
  • Bootstrap简介Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。它是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 ...
  • Bootstrap系列---表单 2019-05-29 14:40:05
    Bootstrap表单 注:本系列转载于菜鸟教程,仅用以自己学习总结和使用,只会显示自己学习使用的内容, 详细内容可以查看菜鸟教程网址:https://www.runoob.com/bootstrap/bootstrap-forms.html 表单布局 ...
  • Bootstrap 表单 2017-03-23 16:10:17
    基础表单表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通...对于基础表单Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制
  • Bootstrap表单 2015-08-05 11:33:52
    Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名form-control, 也就是说,如果这几...
1 2 3 4 5 ... 20
收藏数 2,392
精华内容 956