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>