Bootstrap 输入框组

最新推荐文章于 2023-03-16 15:07:47 发布

书香水墨

最新推荐文章于 2023-03-16 15:07:47 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： Bootstrap

本文链接：https://blog.csdn.net/qq_27870421/article/details/97133063

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

`一、Bootstrap4 输入框组`

1.1 基本输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
使用.input-group-prepend 类可以在输入框的的前面添加文本信息，.input-group-append 类添加在输入框的后面。
最后，我们还需要使用.input-group-text 类来设置文本的样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootstrap</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/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.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>
<style>

</style>

<body>

<form>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">@</span>
        </div>
        <input type="text" class="form-control" placeholder="Username">
    </div>

    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Your Email">
        <div class="input-group-append">
            <span class="input-group-text">@runoob.com</span>
        </div>
    </div>
</form>

</body>
</html>

1.1 输入框大小

使用.input-group-sm 类来设置小的输入框， .input-group-lg类设置大的输入框

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</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.1.0/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.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <form>
    <div class="input-group mb-3 input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text">Small</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Default</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
  <form>
    <div class="input-group mb-3 input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text">Large</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
</div>

</body>
</html>

1.3 多个输入框和文本

<!-- 多个输入框 -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Person</span>
    </div>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>
</form>
 
<!-- 多个文本信息 -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">One</span>
      <span class="input-group-text">Two</span>
      <span class="input-group-text">Three</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

1.4 复选框与单选框

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox"> 
    </div>
  </div>
  <input type="text" class="form-control" placeholder="RUNOOB">
</div>
 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio"> 
    </div>
  </div>
  <input type="text" class="form-control" placeholder="GOOGLE">
</div>

1.5 输入框添加按钮组

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Basic Button</button> 
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>
 
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button> 
  </div>
</div>
 
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-danger" type="button">Cancel</button> 
  </div>
</div>

1.6 设置下拉菜单

<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      选择网站
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
      <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a>
      <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="网站地址">
</div>

1.7 输入框组标签

<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@runoob.com</span>
  </div>
</div>

书香水墨

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap 输入框组

一、Bootstrap4 输入框组1.1 基本输入框组我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用.input-group-prepend 类可以在输入框的的前面添加文本信息，.input-group-append 类添加在输入框的后面。最后，我们还需要使用.input-group-text 类来设置文本的样式。<!DOC...
复制链接

扫一扫