Bootstrap基础表单
来源:互联网 发布:淘宝助理5.7.9.0下载 编辑:程序博客网 时间:2024/05/20 18:02
Bootstrap基础表单
主要内容
全局样式
2.form-control
3.form-group
4.实际操作
操作
1、新建一个web项目ch06
2、然后将我们bootstrap用到的css、JavaScript文件导进来。
3、在ch06中新建一个demo01.html,接着再打开demo01.html,将移动设备优和css文件先导入到头文件(粘贴过来就行了),保存一下。
<metaname="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、我们看运行结果,当屏幕变小时它也可以适应。
- Bootstrap基础表单
- Bootstrap 基础CSS - 表单(Forms)
- Bootstrap基础4——form表单
- bootstrap表单
- bootstrap表单
- Bootstrap 表单
- Bootstrap表单
- bootstrap表单
- BootStrap表单
- Bootstrap 表单
- bootstrap表单
- bootstrap表单
- Bootstrap 表单
- Bootstrap 表单
- Bootstrap表单
- bootstrap表单
- Bootstrap表单
- Bootstrap<表单>
- 【SSM】SSM三大框架整合详细教程(Spring+SpringMVC+MyBatis)
- MySQL Transaction(事务)学习笔记
- 《佛祖都说了些什么》读书笔记
- 简明 Git 命令速查表
- 加速Android Studio的Gradle构建速度
- Bootstrap基础表单
- git仓库创建
- Bootstrap内联表单
- 简单工厂类实现简单四则运算
- 代码填空:阶梯三角形
- git分支管理
- Bootstrap横向表单
- Java Socket远程传递录音
- 触犯苹果Guideline 5.2.2