Bootstrap入门（第一天）

时间 2019-11-30

原文原文链接

　　一直都想认真的学习一下Bootstrap，可是因为种种缘由，一直没有行动，虽然期间有使用过Bootstrap，可是都没有系统的学习过。最近工做室（学校老师的工做室）安排了一个前端任务让我跟进，主要是根据已有的美工图，用html+css布局出页面，要求使用Bootstrap。正好能够系统的学习一下Bootstrap了，如今开始将学习笔记写成博文。css

Bootstrap中文网http://www.bootcss.com/ ，点击进入，点击下图红框中的按钮。

进去之后能够看见有三个版本下载，这里只下载第一个用做学习使用。

二、开始使用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的世界了。

1. Bootstrap入门（一）
2. Python入门(上)第一天
3. Java入门第一天
4. HBase第一天——HBase入门
5. web入门第一天
6. Python入门--第一天
7. Hadoop入门第一天
8. 07_jquery入门第一天
9. Flask入门第一天
10. 05Linux 第一天 shell入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• 第一个MyBatis程序 - MyBatis教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用

Bootstrap入门（第一天）

一、下载Bootstrap

二、开始使用Bootstrap