`

Bootstrap 内联表单

 
阅读更多
详细教程 http://www.runoob.com/bootstrap/bootstrap-forms.html


Bootstrap 内联表单  http://w3c.3306.biz/bootstrap_forms/show-25-56-1.html
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

需要手动设置宽度
在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。



<form class="form-inline" role="form"> 
  <div class="form-group"> 
    <label class="sr-only" for="exampleInputEmail2">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> 
  </div> 
  <div class="form-group"> 
    <div class="input-group"> 
      <div class="input-group-addon">@</div> 
      <input class="form-control" type="email" placeholder="Enter email"> 
    </div> 
  </div> 
  <div class="form-group"> 
    <label class="sr-only" for="exampleInputPassword2">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> 
  </div> 
  <div class="checkbox"> 
    <label> 
      <input type="checkbox"> Remember me 
    </label> 
  </div> 
  <button type="submit" class="btn btn-default">Sign in</button> 
</form> 




Bootstrap表单布局样式  http://www.cnblogs.com/ivan0626/p/4174350.html

<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>
  • 大小: 7 KB
分享到:
评论

相关推荐

    详解Bootstrap创建表单的三种格式(一)

     Bootstrap表单类型分为三种格式:垂直或基本表单、内联表单、水平表单。 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤...

    bootstrap为水平排列的表单和内联表单设置可选的图标

    Bootstrap提供了多种表单样式,包括水平排列的表单和内联表单,以满足不同设计需求。这些表单可以通过添加特定的类来设置可选的图标,以增强用户体验,提供视觉反馈。本文将详细介绍如何在Bootstrap中为水平排列的...

    Bootstrap表单使用方法详解

    Bootstrap框架提供了三种主要的表单布局方式:垂直表单(默认)、内联表单和水平表单,以适应不同的设计需求。 1. **垂直表单**(默认) 垂直表单是最常见的布局,其中标签位于输入框之上,形成一种垂直的阅读顺序...

    bootstrap表单示例代码分享

    在本文中,我们将详细介绍 Bootstrap 表单的示例代码,包括基本表单、内联表单、加入input-group-addon等多种样式。 基本表单 在Bootstrap中,基本表单是最基本的表单样式。下面是一个基本表单的示例代码: ```...

    如何使用Bootstrap创建表单

    - **内联表单**:若希望表单元素排列在同一行,可以在`&lt;form&gt;`标签上添加`.form-inline`类。需要注意的是,内联表单中的控件通常需要设置宽度,以确保布局美观。同时,可以使用`.sr-only`类隐藏标签,使其对屏幕阅读...

    Bootstrap简单表单显示学习笔记

    基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 1、向父&lt;form&gt;元素添加role = “form”; 2、为了获取最佳的间距,把标签和控件放在一个div.form-group中,div放在父form下; 3、向所有的文本元素...

    Bootstrap表单布局样式源代码

    在本文中,我们将深入探讨Bootstrap中的表单布局,特别是垂直表单、内联表单和水平表单的创建方法。 **垂直表单**是最基础的表单样式,它的特点是输入框与对应的标签垂直排列。创建垂直表单,你需要遵循以下步骤: ...

    全面解析Bootstrap表单使用方法(表单样式)

    此外,Bootstrap还支持其他高级表单功能,如表单验证、按钮组、下拉菜单等,可以与基础、水平或内联表单结合使用。表单验证可以通过添加`required`属性、自定义错误消息或使用JavaScript插件实现。按钮组和下拉菜单...

    Bootstrap每天必学之表单

    内联表单允许你将表单元素紧密排列在同一行内,通过添加`.form-inline`类到`&lt;form&gt;`标签实现。需要注意的是,由于Bootstrap的控件默认宽度为100%,所以要实现内联效果,需要为每个控件指定宽度。同时,内联表单的`...

    BootStrap中的表单大全

    内联表单的`.form-group`会变为内联块元素,且`.form-control`的宽度设置为`auto`,确保元素可以在一行内排列。 示例代码: ```html &lt;form action="" class="form-inline"&gt;&lt;div class="form-group"&gt;用户名:...

    Bootstrap表单制作代码

    内联表单 水平表单 小妞妞做的表单实例: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 教学意见调查表&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" href...

    Bootstrap4 表单

    Bootstrap4 表单 ... 内联表单:水平方向 Bootstrap 提供了两种类型的表单布局: 堆叠表单 以下实例使用两个输入框,一个复选框,一个提交按钮来创建堆叠表单: 实例 Email address: Password:

    Bootstrap作业26.zip

    同时,Bootstrap还支持表单的水平和垂直布局,以及内联表单。 按钮是任何界面中的关键元素,Bootstrap提供了一系列预设的按钮样式,如`.btn`、`.btn-primary`、`.btn-success`等,这些按钮可以根据需要进行大小和...

    bootstrap经典实用案例.

    案例中可能有多种表单布局,如内联表单、水平表单以及如何添加验证反馈。 6. **卡片(Cards)**:卡片是Bootstrap4引入的一个新组件,常用于展示内容,如图片、标题、文本等。案例中会展示卡片的不同变体,包括带有...

    第七篇Bootstrap表单布局实例代码详解(三种表单布局)

    在Bootstrap中,表单布局有三种主要类型:垂直表单、内联表单和水平表单,每种都有其特定的应用场景和设计风格。 1. 垂直表单(Vertical Form): 垂直表单是最基础的布局方式,通常用于标准的多行表单,其中每个...

Global site tag (gtag.js) - Google Analytics