测试学开发——第一课：环境搭建与页面开发介绍。

1 环境搭建：
jdk配置+eclipse下载
请参考：https://www.cnblogs.com/ForestDeer/p/6647402.html

2测试页面快速开发技巧

http://www.runoob.com/try/bootstrap/layoutit/

第一步：删除右侧内容，只留下Container
布局设置：可以选择其中的任意一个布局，点击拖动到右侧, 右侧会生成 Row-Coumn。
根据页面需要我们可以选择不同的格局 ，我们一12布局为例：

第二步：
基本css选择：

这里我们选择提交表单，因为测试页面往往是往后面提交一下测试数据。表单比较是我们测试使用

点击下载，就可以看到页面代码。
直接复制下来。

打开eclipse，新建一个项目
选择web项目

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
                    <p class="help-block">
                        Example block-level help text here.
                    </p>
                </div>
                <div class="checkbox">
                     <label><input type="checkbox" />Check me out</label>
                </div> <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</div>

在head标签中加入

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

再次刷新页面就可以得到如下内容：