这篇文章说两点，一是如何用 BootStrap，二是了解分段写代码片的方法
1. 引入 BootStrap展开目录
首先去 BootStrap 中文官网阅读 BootStrap 的相关说明，以及下载 BootStrap 样式
然后将下载下来的 css,fonts,js 文件都导入到 MyEclipse 项目中（导入其实就是直接选中这三个文件夹然后复制到项目目录中）
我在项目里新建了一个文件夹 "ReSources"，然后把三个文件夹丢到这个文件夹里
之后在 index.jsp 中引入 css，然后就可以调用 BootStrap 中的一些 css 样式了，结合下面一部分内容进行综合讲解
2. 分段写代码片的方法展开目录
这个方法也是今天上课老师讲到的。先说一下背景，假设现在有四个学生的一系列信息，包括学号，用户名，姓名，性别，班级，然后要循环打印通过 <tr><td></td></tr > 输出到表格中，如何做？
首先定义一个容器，容器中放的的是 Object 类型的数组，数组里存的就是每个学生的信息，那么代码就是这样
- <%
- List<Object[]> student = new ArrayList<Object[]>();
- student.add(new Object[] {"1","zhangsan","张三","male","16软工一班"});
- student.add(new Object[] {"2","lisi","李四","fmale","16软工二班"});
- student.add(new Object[] {"3","wangwu","王五","male","16软工一班"});
- student.add(new Object[] {"4","zhaoliu","赵六","male","16软工二班"});
- %>
然后我先打印表格第一行，也就是头部的信息
- <table>
- <thead>
- <tr><td>Id</td><td>UserName</td><td>Name</td><td>Sex</td><td>Class</td></tr>
- </thead>
- </table>
最关键的部分来了，利用分段代码片的技巧，循环输出 List 中的值
- <tbody>
- <%
- for(Object[] o : student) {
- %>
- <tr>
- <td><%= o[0] %></td>
- <td><%= o[1] %></td>
- <td><%= o[2] %></td>
- <td><%= o[3] %></td>
- <td><%= o[4] %></td>
- </tr>
- <%
- }
- %>
- </tbody>
整个 <body> 中的代码如下所示
- <body>
- <%
- List<Object[]> student = new ArrayList<Object[]>();
- student.add(new Object[] {"1","zhangsan","张三","male","16软工一班"});
- student.add(new Object[] {"2","lisi","李四","fmale","16软工二班"});
- student.add(new Object[] {"3","wangwu","王五","male","16软工一班"});
- student.add(new Object[] {"4","zhaoliu","赵六","male","16软工二班"});
- %>
- <table>
- <thead>
- <tr><td>Id</td><td>UserName</td><td>Name</td><td>Sex</td><td>Class</td></tr>
- </thead>
- <tbody>
- <%
- for(Object[] o : student) {
- %>
- <tr>
- <td><%= o[0] %></td>
- <td><%= o[1] %></td>
- <td><%= o[2] %></td>
- <td><%= o[3] %></td>
- <td><%= o[4] %></td>
- </tr>
- <%
- }
- %>
- </tbody>
- </table>
- </body>
输出结果如下图所示：
这个分段代码片的技巧确实巧妙，结合 <%= %>，这需要多敲代码才能完全领悟
3. 结合 BootStrap展开目录
下面就说一些 BootStrap 对于修饰表格的 css，点开这个超链接能看到对于 table 有比较多的修饰，直接把这些引入到 class 中即可，例如
- <table class = "table table-striped table-hover">
修饰过后的表格如下图所示（顿时感觉发现了新大陆～～～）
还有很多的 BootStrap 样式，只要引入了 BootStrap 文件都可以用，还有一个开源前端框架，也是老师推荐的，叫 LayUi
