Bootstrap基础表单

Bootstrap基础表单

---

主要内容

1. 全局样式

   
   

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、我们看运行结果，当屏幕变小时它也可以适应。