关于“第一次接触神奇的Bootstrap表单”的攻略，建议按照以下步骤来进行：

一、了解Bootstrap表单

Bootstrap表单是基于Bootstrap框架开发的，具备响应式设计、易于定制和丰富的细节特性。它可以让开发者快速创建美观的表单，同时避免了很多面对纯HTML/CSS时需要自己编写大量css代码的苦恼。

二、引入Bootstrap表单

引入Bootstrap表单有两种方法：本地下载和CDN链接，我们这里介绍使用CDN链接的方法。

在HTML文件中的head标签内应该引入Bootstrap的CSS样式和JavaScript库，并且添加jQuery依赖项，同时添加额外的JS文件：

<!--样式文件-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

<!--JS依赖项-->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

三、创建表单

可以按照以下示例代码来创建一个简单的登录表单：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱">
    <small id="emailHelp" class="form-text text-muted">我们不会共享你的邮箱信息。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

以上代码中，我们使用了<form>标签，包含了一个邮箱地址输入框和一个密码输入框以及一个“登录”按钮。同时也使用了<label>标签，来与输入框关联，并添加了验证提示和其他辅助信息。在这里我们还使用了Bootstrap的CSS类来设置输入框的样式。

四、表单验证

Bootstrap有相应的JS代码来实现表单验证功能。 我们可以按照下面的示例代码给表单添加验证:

<form id='myForm' action='#' method='POST'>
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">邮箱地址</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1" placeholder="请输入邮箱地址" required>
      <div class="invalid-feedback">请输入邮箱地址</div>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword1" class="col-lg-2 control-label">密码</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="inputPassword1" placeholder="请输入密码" required>
      <div class="invalid-feedback">请输入密码</div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-primary">登录</button>
    </div>
  </div>
</form>

<script>
// 给表单添加验证功能
var form = document.querySelector('#myForm')
var validate = function () {
  if (form.checkValidity() === false) {
    event.preventDefault()
    event.stopPropagation()
  }
  form.classList.add('was-validated')
}
form.addEventListener('submit', validate)
</script>

以上代码我们添加了验证功能，具体的验证方式可以查阅Bootstrap表单相关文档。同时我们应该为表单添加一个ID，以便在JS中使用。

在JS代码中，我们定义了一个validate函数，如果表单验证失败，阻止提交事件的默认行为，停止冒泡事件，并针对表单添加.was-validated类（表单验证的一种状态）。然后监听表单的提交事件，并在事件中调用validate。

以上是针对Excel表单的攻略说明，希望能够帮到你。

本文链接：http://task.lmcjl.com/news/11897.html