2. Bootstrap4 - 網格系統

一、簡介

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

二、CSS框架

單位：rem
佈局：flexbox
基礎： sass
基於 jQuery 開發的插件來快速建構你的想法或是應用程式

三、安裝

下載Bootstrap至我們的專案並解壓縮：https://github.com/twbs/bootstrap/releases/download/v4.1.0/bootstrap-4.1.0-dist.zip
下載JQuery：https://code.jquery.com/jquery-3.3.1.min.js
下載Popper：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

套用
將專案開啟至編輯器
新增一個檔案：index.html
注意js的順序
http://bootstrap.hexschool.com/docs/4.0/utilities/colors/

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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是否正確

CDN套用
新增一個檔案：cdn.html
注意：這裡的jquery是瘦身版(不含ajax、動畫效果)

<!doctype html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>

1-2 Git

2-1 佈局頁面

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

2. Bootstrap4 - 網格系統