这篇文章说两点,一是如何用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