解释使用Bootstrap创建基本或垂直表单的步骤
Bootstrap是一个开源的CSS框架，用于构建响应式网站。它有HTML、CSS、JS框架，用于开发用户友好和响应式网站。截至2021年8月，Bootstrap是Github上排名第十的明星项目。该网站有现成的模板和它们的输出，这样我们就可以根据要求选择模板。这个开源项目是由Mark Otto和Jacob Thornton发起的，它最初被称为Twitter蓝图。因此，由于所有主要的bootstrap和随时可以使用的基本模板的收集，bootstrap使网络开发者的生活变得简单。
Bootstrap中的表单：表单是每个网站最需要的模板和组成部分，用于注册、登录、反馈等。因此，bootstrap中的表单模板的可用性使它变得简单，我们可以直接使用bootstrap中的表单模板。两个最新版本的bootstrap都包含了表单模板。两个版本的主要区别是，bootstrap 5有专门的表单部分，而在版本4中，表单被包含在组件部分。因此，强烈建议你使用第5版。
例子1：在这个例子中，我们将看到如何使用Bootstrap 4创建一个垂直表格。
第1步：在代码中包括以下CDN链接，以便使用Bootstrap 4。
<!– Bootstrap CSS –> <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”> <!– Bootstrap JS –> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity= “sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”></script>
步骤2：现在我们将使用bootstrap 4表单，在body标签内的表单中输入我们想要的字段。
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity= "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity= "sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity= "sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script> <title>gfg</title> </head> <body> <!-- code for the form--> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted"> We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1"> Password </label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1"> Check me out </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </body> </html>
输出:
例子2：在这个例子中，生成了与bootstrap 4类似的表格，或者可以在输出中看到，但一些步骤会有所不同。现在我们将使用bootstrap 5。这个表单可以输入电子邮件和密码，同时也可以看到提交按钮。我们将从初始模板开始，把表单代码放到body标签里，就可以看到输出了。
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity= "sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity= "sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <title>gfg</title> </head> <body> <!--code for the form--> <form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label"> Email address </label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text"> We'll never share your email with anyone else. </div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label"> Password </label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1"> Check me out </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </body> </html>
输出:
版权声明:本页面内容旨在传播知识，为用户自行发布，若有侵权等问题请及时与本网联系，我们将第一时间处理。E-mail:284563525@qq.com
