Title1

Title2

Title3

prev1. 開發環境
2-1 佈局頁面next
Bootstrap4

2. Bootstrap4 介紹

一、簡介

  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://goo.gl/whweGy
  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/     
    <!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是否正確
     
    1. 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <title>Bootstrap CDN</title>
  </head>
  <body>
   
  </body>
</html>

       

 

 

prev1. 開發環境
2-1 佈局頁面next

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