1.1 表单
样式名 | 作用 |
---|---|
form-control | 、和元素都将被默认设置宽度属性为width:100% |
form-group | 将label 元素和前面提到的控件包裹在一行中进行分组 |
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页编码的类型-->
<meta charset="utf-8">
<!--使用最新的支持H5浏览器内核来解析-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
视口:在浏览器中一个虚拟的网页容器。参数:网页的宽度设置为设备的宽度 初始缩放比: 1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap的表单</title>
<!-- 导入文件:bootstrap.css -->
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form style="max-width: 400px">
<h3>添加联系人</h3>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" placeholder="请输入姓名" id="name">
</div>
<div class="form-group">
<label>性别</