Bootstrap学习笔记1--表单样式
2019-05-31 本文已影响14人
清风Python
序
最近感觉学Python有点懵了，想想前端的技能一直比较弱，又偷懒的不愿意一项项仔细去学。
思来想去，还是简单的前台框架吧 --> Bootstrap
Bootstrap简介
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷
学习Bootstrap需要具备的条件
只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平
这样的描述，简直让人心花怒放...
Bootstap表单
这几天开发Web可能都要和表单接触，就先草草的学下from相关的内容吧。
-
form-group
堆叠表单，添加表单组 -
form-inline
内联表单，将多个form子标签放置在一行中 -
from-control
为input元素添加表单控件 -
form-control-label
为input元素添加表单标签 -
input-lg input-sm
使输入框变大/小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>栅格</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style type="text/css">
.container-small{
max-width: 400px;
}
</style>
</head>
<body>
<form class="container container-small">
<div class="form-group has-success">
<label class="control-label">姓</label>
<input class="form-control" />
</div>
<div class="form-group has-error">
<label class="control-label">名</label>
<input class="form-control" />
</div>
<div class="form-group">
<label class="control-label">充值金额</label>
<div class="input-group">
<div class="input-group-addon">
$
</div>
<input class="form-control" />
</div>
</div>
<div class="form-group">
<label>来自：</label>
<select class="form-control ">
<option value="1">西安</option>
<option value="2">北京</option>
<option value="3">天津</option>
</select>
</div>
<label>银行卡号:</label>
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="xxxx" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="xxxx" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="xxxx" />
</div>
</div>
</form>
</body>
</html>
表单.png
