Bootstrap入门

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。

可以从http://getbootstrap.com/上下载Bootstrap的最新版本。

下载一个ZIP文件bootstrap-3.3.2-dist.zip，

解压后的目录bootstrap-3.3.2-dist中包含4部分内容：

一个css子目录，

一个fonts子目录，

一个js子目录，

 

示例：

1.新建一个Web工程bootstrap。

2.将上面的三个文件夹复制到IntelliJ的Web目录下（或者eclipse的WebContent目录下）。

3.新建index.jsp页面，在<head></head>中导入以下3个文件。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

4.index.jsp的代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
      <title>Bootstrap 实例 - 条纹表格</title>
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
  <table class="table table-hover">
      <caption>悬停表格布局</caption>
      <thead>
      <tr>
          <th>名称</th>
          <th>城市</th>
          <th>密码</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>560001</td>
      </tr>
      <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>400003</td>
      </tr>
      <tr>
          <td>Uma</td>
          <td>Pune</td>
          <td>411027</td>
      </tr>
      </tbody>
  </table>
  </body>
</html>

5.将工程部署到tomcat上，运行结果为

QQ截图20150311093839

posted @ 2015-03-11 09:40  小样儿1020  阅读(355)  评论(0)    收藏  举报