Bootstrap系列 -- 13. 内联表单

  有时候我们需要将表单的控件都在一行内显示。在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可

  如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中

<form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">邮箱</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"/>
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"/>
                记住密码

            </label>
        </div>
        <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

  在label标签运用了一个类名“sr-only”,可以将label标签影藏起来

时间: 2024-11-06 22:49:27

Bootstrap系列 -- 13. 内联表单的相关文章

bootstrap 基础表单 内联表单 横向表单

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body> <p c

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:内联表单

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 内联表单</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&q

Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

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

说明 为水平排列的表单和内联表单设置可选的图标 示例 <!DOCTYPE html> <html lang="zh-CN">    <head>      <meta charset="utf-8">      <meta http-equiv="X-UA-Compatible" content="IE=edge">      <meta name="

Bootstrap内联表单

有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可. <form class="form-inline" role="form"> <div class="form-group"> <label class=&q

bootstrap: 内联表单;

<form class="form-inline"> <div class="form-group"> <label for="time">Time</label> <input type="text" class="form-control" placeholder="time"> </div> <div c

Bootstrap入门(五)表单

先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet"> 一.内联表单 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 而内联表单,要为 <form> 元素添加 .form-inli

bootstrap19-内联表单

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联表单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </he

Bootstrap学习笔记(四)-----Bootstrap每天必学之表单

本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例2.内联表单3.水平排列的表单4.被支持的控件5.静态控件6.控件状态7.控件尺寸8.帮助文本 基本案例 单独的表单控件会被自动赋予一些全局样式.所有设置了.form-control的<input>.<textarea>和<select>元素都将被默认设置为width: 100%;.将label和前面提到的这些控件包裹在.fo