引入BootStrap开发一个JSP项目

mathor

发布于 2018-09-19 15:23:40

3.8K0

发布于 2018-09-19 15:23:40

文章被收录于专栏：mathormathor

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-09-10，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度