Bootstrap4(3)

这篇博客详细介绍了Bootstrap4的多种组件,包括表单的布局和控件,如输入框、复选框、单选框和下拉菜单。此外,还讲解了轮播、模态框、提示框和滚动监听功能的创建和使用,以及如何通过设置data属性和CSS类来实现不同效果。
摘要由CSDN通过智能技术生成

1.Bootstrap4 表单

表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下,宽度都是

设置为 100%

Bootstrap4 表单布局

1.堆叠表单 (全屏宽度):垂直方向

2.内联表单:水平方向

例如:

​
<!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.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 class="container">
        <h2>堆叠表单</h2>
        <form>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember me
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <h2>内联表单</h2>
        <p>屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。</p>
        <form class="form-inline">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox"> Remember
                </label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>

​

2.Bootstrap4 表单控件

Bootstrap4 支持以下表单控件:input / textarea / checkbox / radio / select

Bootstrap Input

Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month,

time, week, number, email, url, search, tel, 以及 color

注意:: 如果 input 的 type 属性未正确声明,输入框的样式将不会显示

例如:

​
<!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.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 class="container">   
      <h2>表单控件</h2>
        <div>
            <label for="usr">用户名:</label>
            <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
            <label for="pwd">密码:</label>
            <input type="password" class="form-control" id="pwd">
        </div>
    </div>
</body>
</html>

​

Bootstrap textarea

例如:

​
<!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.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 class="container">
    <h2>表单控件---textarea</h2>
    <form>
        <div class="form-group">
            <label form="com">评论:</label>
            <textarea class="form-control" rows="5" id="com"></textarea>
        </div>
    </form>
</body>
</html>

​

Bootstrap 复选框(checkbox)

复选框用于让用户从一系列预设置的选项中进行选择,可以选一个或多个。

使用 .form-check-inline 类可以让选项显示在同一行上

例如:

​
<!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.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 class="container">
    <h2>表单控件---checkbox</h2>
    <form>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" value="" class="form-check-inline">checkbox 1
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" value="" class="form-check-inline">checkbox 2
            </label>
        </div>
        <div class="form-check disabled">
            <label class="form-check-label">
                <input type="checkbox" value="" class="form-check-inline" disabled>checkbox 3
            </label>
        </div>
    </form>
</body>
</html>

​

Bootstrap 单选框(Radio)

单选框用于让用户从一系列预设置的选项中进行选择,只能选一个。

使用 .radio-inline 类可以让选项显示在同一行上

例如:

​
<!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.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 class="container">
        <h2>表单控件---radio</h2>
        <from>
            <label class="radio-inline"><input type="radio" name="radio"> radio 1</label>
            <label class="radio-inline"><input type="radio" name="radio"> radio 2</label>
            <label class="radio-inline"><input type="radio" name="radio" disabled> radio 3</label>
        </from>
    </div>
</body>

</html>

​

Bootstrap select 下拉菜单

当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框

例如:        

​
<!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.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 class="container">
        <h2>表单控件---select</h2>
        <form>
            <div class="form-group">
                <label for="1"单选下拉菜单></label>
                <select class="form-control" id="1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
            <br>
                <label for="2"多选下拉菜单></label>
                <select multiple class="form-control" id="2">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
        </form>
    </div>
</body>

</html>

​

3.Bootstrap4 输入框组

 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加

在输入框的后面

例如:

​
<!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.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 class="container">
        <h2>输入框组</h2>
        <form action="/action_page.php">
            <div class="input-group md-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">@</span>
                </div>
                <input type="text" id="usr" name="username" placeholder="Username" class="form-control">
            </div>
            <div class="input-group mb-3">
                <input type="text" placeholder="Your Email" id="mail" name="email" class="form-control">
                <div class="input-group-append">
                    <span class="input-group-text">@163.com</span>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">submit</button>
        </form>
</div>
</body>
</html>

​

输入框大小

 .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.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 class="container">
        <h2>输入框大小</h2>
        <form>
            <div class="input-group md-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 md-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">middle</span>
                </div>
                <input type="text" class="form-control">
            </div>
        </form>
        <form>
          
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值