位置:电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > 内联表单
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 堆叠表单 下一篇: Bootstrap4 表单控件

所有内联表单中的元素都是左对齐的。

注意:在屏幕宽度小于 576px 时为垂直堆叠,如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

内联表单需要在 <form> 元素上添加 .form-inline类。

以下实例使用两个输入框,一个复选框,一个提交按钮来创建内联表单:

实例

<form>

  <label for="email">Email address:</label>

  <input type="email" id="email">

  <label for="pwd">Password:</label>

  <input type="password" id="pwd">

  <div>

    <label>

      <input type="checkbox"> Remember me

    </label>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

完整代码

<!DOCTYPE html>

<html>

<head>

  <title>Bootstrap 实例(小白教程网 2d5.net)</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

 

<div>

  <h2>内联表单</h2>

  <p>屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。</p>

  <form>

    <label for="email">Email:</label>

    <input type="email" id="email" placeholder="Enter email">

    <label for="pwd">Password:</label>

    <input type="password" id="pwd" placeholder="Enter password">

    <div>

      <label>

        <input type="checkbox"> Remember me

      </label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

  </form>

</div>

 

</body>

</html>

效果图

小白教程网www.2d5.net

image.png

image.png


上一篇: 堆叠表单 下一篇: Bootstrap4 表单控件
毕业设计网             广告联系QQ:45157718(微信同号)