引入BootStrap开发一个JSP项目

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏猿天地

Netty粘包拆包解决方案

前言 本篇文章是Netty专题的第六篇,前面五篇文章如下: 高性能NIO框架Netty入门篇 高性能NIO框架Netty-对象传输 高性能NIO框架Netty...

54870
来自专栏IT开发技术与工作效率

VBA导入

18950
来自专栏Ryan Miao

Spring resource bundle多语言,单引号format异常

Spring resource bundle多语言,单引号format异常 source code 前言 十一假期被通知出现大bug,然后发现是多语言翻译问题。...

41180
来自专栏jeremy的技术点滴

JVM的Finalization Delay引起的OOM

45380
来自专栏码匠的流水账

java9系列(四)Process API更新

/Library/Java/JavaVirtualMachines/jdk-9.0.4.jdk/Contents/Home/lib/src.zip!/java....

12710
来自专栏Java成神之路

Java微信开发_Exception_01_The type org.xmlpull.v1.XmlPullParser cannot be resolved. It is indirectly ref

这个异常是在做微信开发时出现的,在引入了XStream的jar包之后,还是出现了如下错误信息:

11730
来自专栏大内老A

集成EntLib实现ASP.NET MVC的异常处理[续篇]

在《集成EntLib实现ASP.NET MVC的异常处理》我们实现采用EntLib的Exception Handling Application Block(E...

21190
来自专栏数据结构与算法

洛谷P2792 [JSOI2008]小店购物(最小树形图)

一开始的思路:新建一个虚点向每个点连边,再加上题面中给出的边,边权均为大小*需要购买的数量

10310
来自专栏公众号_薛勤的博客

基于注解处理器开发自动生成getter和setter方法的插件

昨天无意中,逛到了lombok的网站,并看到了首页的5分钟视频,视频中的作者只是在实体类中写了几个字段,就可以自动编译为含setter、getter、toStr...

13010
来自专栏跟着阿笨一起玩NET

C# Eval在aspx页面中的用法及作用

36820

扫码关注云+社区

领取腾讯云代金券