育將電腦工作室 - 線上書籍

數位相簿很上手
=======

一、簡介

1. Bootstrap 是目前最流行的前端開發框架
2. Bootstrap 是一個用於開發 HTML、CSS 和 JS 的開源工具包
3. 世界上最受歡迎的前端元件庫，建立響應式、行動優先的專案。
4. 官網：<https://getbootstrap.com/>
5. 中文：<http://bootstrap.hexschool.com/>
 
二、CSS框架

1. 單位：rem
2. 佈局：flexbox
3. 基礎： sass
4. 基於 jQuery 開發的插件來 快速建構你的想法或是應用程式
 
三、安裝

1. 下載Bootstrap至我們的專案並解壓縮：<https://github.com/twbs/bootstrap/releases/download/v4.1.0/bootstrap-4.1.0-dist.zip>
2. 下載JQuery：<https://code.jquery.com/jquery-3.3.1.min.js>
3. 下載Popper：<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>
4. 套用  
   將專案開啟至編輯器  
   新增一個檔案：index.html  
   注意js的順序   
   <http://bootstrap.hexschool.com/docs/4.0/utilities/colors/> ```
  <pre class="brush:as3;">
  
  <html lang="zh-Hant-TW">
    <head>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
      
      <link rel="stylesheet" href="css/bootstrap.min.css">
      
      
      <script src="js/jquery-3.3.1.min.js"></script>
      <script src="js/popper.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
   
      <title>Bootstrap 離線版</title>
    </head>
    <body>
   
    </body>
  </html>
  ```
  
   請用開發人員工具「F12」=> Network 檢查 引入的Js、Css是否正確
5. CDN套用  
   新增一個檔案：cdn.html  
   注意：這裡的jquery是瘦身版(不含ajax、動畫效果) ```
  <pre class="brush:as3;">
  <!doctype html>
  <html lang="zh-Hant-TW">
    <head>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
      
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  
      <title>Hello, world!</title>
    </head>
    <body>
      <h1>Hello, world!</h1>
  
      
      
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    </body>
  </html>
  ```
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown