BS5來練習beefree

 原本想要beefree製作網頁，是可以的，但要修改樣式CSS時，需要每頁都去修改，所以還是用BS5來改會比較快。下面是步驟，給它紀錄下來。

之前有一篇利用Gsheet當小型資料庫，隔了一段時間，有點看不懂，所以要再加強自己的寫作能力。

跟著W3C做【完成】~~Bootstrap5

1. 先確定版型，固定寬(container)或是整幅寬(container-fluid)(有基本code)
2. 基本的欄位
3. 有一個".text-break"讓長的字串不會破版。".text-end" 文字靠右。
   ".list-inline"可以做成選單。在下面的範例中搜尋text-break。
4. ".table-responsive"可以讓表格在固定的寬度下，左右滑動(其他網站好像用來當選單，但不會顯示左右拉條)
5. ".img-fluid"可以讓圖片變成響應式。
6. ".btn-group"可以讓按鈕變成一排，很像選單。
7. ".dropdown-menu-end"讓子選單靠右。
8. "Accordion"使用card顯示出 collapse。
9. ".nav" 選單。裡面也有tab，但過多的話可能會破版。
10. ".navbar"網站的選單。可以固定在最上面或是...
11. ".carousel" 圖片的slide。
12. "Modals" 彈跳視窗。要如何做到開網頁就彈跳視窗呢???
13. "Scrollspy"，搭配選單，可以讓畫面跳到那個區塊。
14. "offcanvas "手機選單的樣式。
15. ".border"可以直接顯示框線，不用自己下CSS了。
16. ".float-start or .float-end"可以左右各有一個div耶@@
17. ".ratio" YT的響應版~~
18. "Data Lists" 類似搜尋的輸入框。
19. 練習測驗，完成。

用G試算表來當資料庫搭配BS5，尚未完成?!

用BS5來練習beefree。

跟著W3做~使用BS4與VUE

 這邊是改寫"K生命"遇到問題或是做個筆記

240429，看到scalingUP，安裝在  (W3\vite\vite_klife )，要RUN的話，要先切到那個目錄下執行，npm run dev。之前想說用XAMPP是否可以跑 VITE???不行。那有安裝VITE的目錄下是否可以VITE呢???也不行。必須要用 npm run dev才可以。

240516暫時先跑完W3的範本，說不定可以讓VITE跑XAMPP，全部看完後再看最下面的問題@@

跟著書做~~Vue.js 2 前端漸進式建構框架

 之前有測試Vue，結果都是顯示{{message}}，原因是Vue的CDN。感謝Kuro Hsu的重新認識Vue.js。
Vue2：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
Vue3：https://unpkg.com/vue@next
但跟原廠的有些不一樣。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

1. data裡面只能放一個變數??? message or numbers

sublime Visual Studio Code 安裝與使用html5

 Sublime

1.  先下載 sublime。
   https://www.sublimetext.com/3
2. 下載package control，這是我覺得奇怪的地方，若是每個使用者必須安裝的功能，為什麼不能直接就在軟體中呢???(商業考量@@)。
   https://packagecontrol.io/installation
3. 安裝package control，照著上面網頁中的指示。先安裝package control(install package control)，然後再下載(control.sublime-package)放到sublime安裝位置中的Packages裡。
4. 安裝中文套件。
   先(shift + ctrl + p)叫出command，簡單輸入install，就會呼叫package control:install package，點選這個。裡面有很多套件可以使用，這邊再輸入chineseLocalizations並點選就安裝成功了。
5. 新增html
   一開始新增的檔案都是plain text，要點選右下角改成html，即可。並在檔案中輸入<html>就完成了。
6. emmet套件可以快速產生html、CSS，第一次覺得tab好用(雖然平常都是用tab縮排)
   先安裝emmet，接著在html中輸入div*4 再按 tab鍵，就可以直接產出四個div。
   div+a 、div>div*2、div#wrapper、.background
   

 VS Code

1. 先看看說明，並下載portable(zip)
   https://code.visualstudio.com/docs/editor/portable

normalize
https://necolas.github.io/normalize.css/

JQuery
https://jquery.com/

html5shiv 讓舊的瀏覽器認識html5
https://github.com/aFarkas/html5shiv

Adobe color
https://color.adobe.com/zh/create/color-wheel

MediaQuery 用html與css來判斷螢幕寬度

1.  html那邊在head加入，好讓不同寬度的裝置搭配不同的CSS
   <link rel="stylesheet" href="mediaQuery480.css" media="screen and (max-width:480px)">
2.  html那邊在head加入，讓螢幕初始縮放比例為100%
   
   <meta name="viewport" content="width=device-width; inital-scale=1.0">
3. CSS那邊就加入，開始調整畫面囉
   
   @media screen and (max-width:480px){

       /* 如果裝置寬度小於或等於480px，就會載入這個CSS */

   
   

   } 

 Bootstrap

1. https://getbootstrap.com/
2.  加入bootstrap.css與 bootstrap.js。CSS通常放在head那邊，js放在footer之後(JQUERY也是)
   

 變成Android App

1. 下載安裝java JDK
   將JDK的BIN加入到環境變數
   
2. 下載安裝 Android Studio
   要取得並安裝 Android SDK(4.1.3直接內建)
   
3. 下載安裝 Node.js
   npm install -g cordova
   
4. 接下來都用cordova 來新增(只能用一般 cmd 操作，不用管理員)
5. cmd D槽，然後 codrova create 專案資料夾
6. 複製相關檔案到專案中，cmd 到專案中，cordova platform add android
7. 編譯出apk，cordova build android
8. 還是要去下載gradle，然後再android studio設定gradle的目錄位置，並在執行gradle.bat(在下載的gradle中)

 

 感謝"秒懂，行動網頁設計"的作者

 

 

 

 

"架站可以很簡單 xoops 2.5.X" 書

之前就有在用XOOPS架站，但現在的手機、平板發達，所以想要搭配bootstrap來因應。這本書除了講解如何使用XOOPS外，還有講到一些伺服器的設定，還不錯，希望能有更多伺服器的保護及應用的書，最後還是謝謝TAD老師喔!

1.前面一、二章節講的是XOOPS安裝及之後的安全設定，要看...

2.由於標題列blockTitle占空間，不是修改CSS，而是直接在布景(school2015)管理中的區塊標題列修改(要勾選套用所有區塊)。

3.tad_news的字型大小，可以到"模組"→"區塊"裡面去設定喔!!!
但是list-tyle-type:none; 要去
themes\school2015\modules\tadnews\blocks\tadnews_block_cate_news.tpl 修改。

4.最新消息中的每個區塊，沒有中英文對照，例如：我想要修改"本站最新消息"這個區塊，雖然可以到blocks中修改，但是多達18個區塊。原本是想要將個人資訊給移除，但還是算了，因為只要將暱稱修改跟EMAIL不公開，可能就還好。但點選時，就會到userid，直接將userid導回首頁。

5.網站連結的圖都無法自動抓取，可能是網站都用動態的關係。自己來抓圖放在uploads\tad_link中即可。順序的話要進去模組設定裡面去看"網站排序"的數字。