您的位置：首页 > Web前端 > BootStrap

Bootstrap入门

2015-03-11 09:40 169 查看

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上，运行结果为

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航