一直都想认真的学习一下Bootstrap，但是由于种种原因，一直没有行动，虽然期间有使用过Bootstrap，但是都没有系统的学习过。最近工作室（学校老师的工作室）安排了一个前端任务让我跟进，主要是根据已有的美工图，用html+css布局出页面，要求使用Bootstrap。正好可以系统的学习一下Bootstrap了，现在开始将学习笔记写成博文。
1、下载Bootstrap
- Bootstrap中文网http://www.bootcss.com/ ，点击进入，点击下图红框中的按钮。
- 进去以后可以看见有三个版本下载，这里只下载第一个用作学习使用。
2、开始使用Bootstrap
- 将下好的Bootstrap源码导入到项目工程里，这里我的路径是/WebRoot/styles/bootstrap/。
- 新建一个html页面，这里我创建的是jsp页面（项目使用了Spring MVC 框架），将下面的代码复制进去。
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/include.inc.jsp"%> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>首页</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="${base}/styles/bootstrap/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="${base}/styles/bootstrap/css/bootstrap-theme.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="${base}/styles/bootstrap/js/jquery-1.7.2.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="${base}/styles/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container theme-showcase" role="main"> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <h3>Theme example</h3> <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p> </div> </div> </body> </html>
- 访问你的页面路径就能看到效果了，如果失败，请检查引用路径。
- 这里特别要注意的是css和js文件的引用顺序。
- 现在你就正式进入Bootstrap的世界了。