HackMD
Sign up

ChiaJung

@ChiaJung

Joined on Mar 17, 2022

New to old
  • Vue 元件
    DATA:2022/06/06 架構 //第一部分 <div id="app"> //放的東西 <AAAAA></AAAAA>
     Like  Bookmark
  • Bootstrap 元件 (二)
    Date : 2022/05/25 關閉按鈕(Close button) .btn-close 關閉按鈕 .btn-close-white 改成白色
     Like  Bookmark
  • Bootstrap 整理
    Date : --------- 斷點 語法 作用 分類 * 的值 .row 行
     Like  Bookmark
  • counter-increment 屬性
    Date : 2022 .05 .25 CCS 的計數器，可用在章節編號 /* 第一層 */ ul.myCounter{ /* 重製第一層計數器，設定識別名稱 */ counter-reset: number-lv-1; /*名稱自定義*/ } ul.myCounter>li::before{
     Like  Bookmark
  • Bootstrap 元件 (一)
    Date : 2022/05/24 手風琴(Accordion) aria 標籤都可以刪除 (這些是螢幕閱讀器使用的) data-bs-toggle : 表示 BS 要觸發一個功能叫做 collapse(摺疊)的功能 data-bs-target : 表示摺疊目標的 id 名稱，一個按鈕會對應一個id data-bs-parent : "#id" 對應到該.accordion 的 id :::info data-bs-parent
     Like  Bookmark
  • Bootstrap 工具
    Date : 2022/05/24 Clearfix (清除浮動) 連結顏色 (Colored links) <a href="#" class="link-primary">Primary link</a> / Ratios (比例)
     Like  Bookmark
  • Illustrator
    工具 編輯工作區域 檔案 > 文件設定 > 編輯工作區域 錨點 / (使用鋼筆or選取工具) <- 用選取工具+Delete ----------- 用鋼筆工具刪除錨點-> 錨點轉換
     Like  Bookmark
  • PhotoShop3
    定義圖樣 > 填滿背景 形狀筆畫 對齊 大寫 圓角
     Like  Bookmark
  • Bootstrap 通用類別
    Date : 2022/05/18 背景 與上下文文字顏色類別相似，將元素的背景設定為任何上下文類別。背景通用類別 沒有設定 color，所以在某些情況下你需要使用 .text-* 顏色通用類別。 <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
     Like  Bookmark
  • Bootstrap 通用類別-Flex
    Date : 2022/05/18 d-inline-flex d-inline-flex <div class="d-inline-flex p-2 bg-primary justify-content-center align-items-center" style="height:100px;width:300px">I'm an inline flexbox container!</div> <div class="d-inline-flex p-2 bg-success justify-content-center align-items-center" style="height:100px;width:300px">I'm an inline flexbox container!</div>
     Like  Bookmark
  • Bootstrap 內容
    Date : 2022/05/18 重置 (Reboot) 請參照文件 https://bootstrap5.hexschool.com/docs/5.1/content/reboot/ :::danger 若要改變字體/顏色/大小等等， 建議從變數中改變，可以保持風格統一。 :::
     Like  Bookmark
  • Bootstrap 排版
    Date : 2022/05/10 Bootstrap4.0 (4.0 會使用到 JQ，需要引入JQ。) <!-- 4.x 需要 jQuery --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js'></script> <!-- bundle.js 包含 popper.js 與 bootstrap.js --> <script src="./js/bootstrap.bundle.min.js"></script>
     Like  Bookmark
  • Flex Box
    Flexbox 設定分為 ： 彈性容器(flex container) 彈性項目(flex items) 彈性盒設定 display:flex 設定父元素 display:flex 為彈性容器，子元素會變成彈性項目(無論什麼類型的盒子都會被==區塊化==)。 彈性項目預設是由左至右順序排列
     Like  Bookmark
  • CSS 基礎樣式
    Font 樣式設定 基礎 .font-style{ color: rgb(133, 84, 20); /* 設定字體家族，第一個找到就使用它，沒有就使用下一個。 */ font-family:fantasy , '微軟正黑體' , Verdand; /* 設定字體大小，px，em，rem，% */ font-size: 20px; /* 設定斜體 */ font-style: italic;
     Like  Bookmark
  • 基礎CSS
    CSS套用 style標籤樣式，寫在 <style></style> ，為這份文件的專屬樣式。 <head> <style> /* 標籤選擇器 */ h1{ color: blue; background-color: antiquewhite;
     Like  Bookmark
  • line 機器人 第一堂
    終端機指令輸入 =="npm init --yes"== 初始化產生"package.json" package.json 加入 "type":"midule" 使用 ECMAScript 語法 import / export :::warning ::: 安裝 linebot套件 指令：=="npm i linebot"==
     Like  Bookmark
  • 進階 JavaScript 語法
    try cash / throw new Error try cash 只要一遇到 errow 就會立刻跳到 catch， 可以自行製造一個error 讓程式跑到 catch 。 語法 try { alessrt ('abc') } catch (e) {
     Like  Bookmark
  • 安裝ESlint
    安裝ESLint-VScode套件 用於安裝eslint 安裝enlint 指令:"npm i -D eslint" -D為開發者工具，套件只限於此資料夾專案用的到。 會記錄在 package.json 筆記"終端機 node.js"有說明 按f1 輸入 ESlint 選擇 create ESlint configuration (建立ESlint設定)
     Like  Bookmark
  • 終端機 node.js
    指令 :::info ctrl + ~ 開啟終端機 cd 換資料夾 cd (資料夾名稱) cd ../ 上一層 ctrl+c 中斷終端機正在執行
     Like  Bookmark
  • norgk 使用方法
    https://ngrok.com/ 3.3.0 安裝 (https://ngrok.com/download) download =="ngrok.exe"== 將 =="ngrok.exe"== 放在要安裝的專案資料夾 登入官網，複製金鑰(認證) :::warning
     Like  Bookmark