bootstrap使用方法

最新推荐文章于 2025-02-17 10:48:01 发布

maqian627426

最新推荐文章于 2025-02-17 10:48:01 发布

阅读量287

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/maqian627426/article/details/84327308

本文介绍如何使用Bootstrap框架简化表单设计，包括引入文件、实现响应式布局及前端验证的方法，适用于初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap有什么优点？

它不仅可以美化页面，还对程序员们非常的友好，可以节省很多代码。

在对表单需要进行优化时，我们在这之前需要引入bootstrap文件

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

引用了这些文件便可使用，不过需要注意的是在script中引用 bootstrap.min.js 之前必须要先引用 jquery-3.3.1.min.js

这可以实现很美观的静态网页，应用bootstrap做完一个表单之后如以下代码

<div class="container">//类用于固定宽度并支持响应式布局的容器。
	<form class="form-horizontal" action="demo2.php" method="post" name='form1'>

	  <div class="form-group">
	    <label for="user" class="col-sm-2 control-label">用户名</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
	    </div>
	  </div>

	  <div class="form-group">
	    <label for="pwd" class="col-sm-2 control-label">密码</label>
	    <div class="col-sm-10">
	      <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
	    </div>
	    </div>
	  <div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
	    </div>
	  </div>
	</form>
	</div>

如果想要在手机端和电脑端都可浏览网页的话，需要在<head>之前加入以下优先设备指令

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

在前端进行表单验证，需引入bootstrap表单验证的代码，先下载一个包bootstrapvalidator-master.zip

<link rel="stylesheet" type="text/css" href="bootstrapvalidator-master/dist/css/bootstrapValidator.min.css">
<script type="text/javascript" src="bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>

随后写入需要验证的内容几要求就好了，验证要写在script中。