Bootstrap表单创建指南
Bootstrap框架提供了多种方式来创建表单，包括垂直或基本表单、内联表单、水平表单等。下面我们将详细介绍如何创建基本表单。
一、基本表单结构
基本表单结构是Bootstrap自带的，每个表单控件自动接收一些全局样式。要创建基本表单，需要按照以下步骤操作：
1. 向父<form>元素添加role=”form”。
2. 把标签和控件放在一个带有class .form-group 的 <div> 中。这是获取最佳间距所必需的。
3. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
二、 Bootstrap表单类型
Bootstrap表单类型分为三种格式：垂直或基本表单、内联表单、水平表单。
1. 垂直或基本表单（display:block;）
这种类型的表单是最基本的表单结构，Bootstrap自带的每个表单控件自动接收一些全局样式。
2. 内联表单
内联表单是将标签和控件放在同一行中，通常用于简洁的表单设计。
3. 水平表单
水平表单是将标签和控件分离，通常用于复杂的表单设计。
三、HTML结构
以下是一个基本的HTML结构，用于创建Bootstrap表单：
```
<!doctype html>
<html lang="en">
<head>
<!-- 网站编码格式，UTF-8国际编码，GBK或gb2312中文编码 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="YvetteLau">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Demo</title>
<!-- css、js 文件的引入 -->
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="padding:20px;">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<form role="form">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输">
</div>
</form>
</div>
</body>
```
四、总结
Bootstrap提供了多种方式来创建表单，每种类型都有其特点和优点。通过掌握基本表单结构和Bootstrap表单类型，可以轻松地创建出各种类型的表单。
我的内容管理
展开
