Bootstrap基础表单
主要内容
-
全局样式
2.form-control
3.form-group
4.实际操作
操作
1、新建一个web项目ch06
2、然后将我们bootstrap用到的css、JavaScript文件导进来。
3、在ch06中新建一个demo01.html,接着再打开demo01.html,将移动设备优和css文件先导入到头文件(粘贴过来就行了),保存一下。
<meta name="viewport"
//移动设备优
content="width=device-width,initial-scale=1, user-scalable=no”>
<title>demo01></title>
//css文件
<link rel="stylesheet" href="css/bootstrap.min.css"/>
4、我们先做一个简单的表单
<div class="container">
<form action="#" method="post">
<fieldset>
<legend>用户登陆</legend>
<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control" name="name" placeholder="输入用户名" />
</div>
<div class=" form-group">
<label>密码:</label>
<input type="password" class="form-control" name="pwd" />
</div>
<div class="checkbox">
<label><input type="checkbox" />记住密码</label>
</div>
<button type="submit" class="btn btn-default">登陆</button>
</fieldset>
</form>
</div>
5、我们的bootstrap对表单没有做过多的效果,它只是对fieldset、legend这些标签做了一个兼序。
我们在每一个表单项上加了一个div,div里面给了一个form-group,form-group就设置了这个组件离下一个组件之间的间距是15px。我们可以查看form-group的源代码。
我们在每个组件上加了一个form-control,form-control是将这个组件的宽度设成100%,占满我们这个容器。
checkbox是单选框
<div class="checkbox">
<label><input type="checkbox" />记住密码</label>
</div>
如果我们这样写checkbox,它运行出来就会有一些问题。
单选框和文本之间就会出现一些问题
6、我们看运行结果,当屏幕变小时它也可以适应。