書籤
分類
-
近期文章
近期迴響
彙整
- 2024 年 四月
- 2024 年 三月
- 2024 年 二月
- 2024 年 一月
- 2023 年 十二月
- 2023 年 十一月
- 2023 年 十月
- 2023 年 九月
- 2023 年 八月
- 2023 年 七月
- 2023 年 六月
- 2023 年 五月
- 2023 年 四月
- 2023 年 三月
- 2023 年 二月
- 2023 年 一月
- 2022 年 十二月
- 2022 年 十一月
- 2022 年 十月
- 2022 年 九月
- 2022 年 八月
- 2022 年 七月
- 2022 年 六月
- 2022 年 五月
- 2022 年 四月
- 2022 年 三月
- 2022 年 二月
- 2022 年 一月
- 2021 年 十二月
- 2021 年 十一月
- 2021 年 十月
- 2021 年 九月
- 2021 年 八月
- 2021 年 七月
- 2021 年 六月
- 2021 年 五月
- 2021 年 四月
- 2021 年 三月
- 2021 年 二月
- 2021 年 一月
- 2020 年 十二月
- 2020 年 十一月
- 2020 年 十月
- 2020 年 九月
- 2020 年 八月
- 2020 年 七月
- 2020 年 六月
- 2020 年 五月
- 2020 年 四月
- 2020 年 三月
- 2020 年 二月
- 2020 年 一月
- 2019 年 十二月
- 2019 年 十一月
- 2019 年 十月
- 2019 年 九月
- 2019 年 八月
- 2019 年 七月
- 2019 年 六月
- 2019 年 五月
- 2019 年 四月
- 2019 年 三月
- 2019 年 二月
- 2019 年 一月
- 2018 年 十二月
- 2018 年 十一月
- 2018 年 十月
- 2018 年 九月
- 2018 年 八月
其它
[sport]更改左側選單
參考網址:Bootstrap 5 Sidebar Examples
用手機瀏覽時,希望右側選單能夠自動隱藏,以免浪費太多空間。
這個網站提供了一些範例。
選擇了它的Example 1 – Demo
<div class="container-fluid"> <div class="row flex-nowrap"> <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark"> <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100"> <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <span class="fs-5 d-none d-sm-inline">Menu</span> </a> <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu"> <li class="nav-item"> <a href="#" class="nav-link align-middle px-0"> <i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span> </a> </li> <li> <a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle"> <i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a> <ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu"> <li class="w-100"> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1 </a> </li> <li> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2 </a> </li> </ul> </li> <li> <a href="#" class="nav-link px-0 align-middle"> <i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a> </li> <li> <a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle "> <i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a> <ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu"> <li class="w-100"> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1</a> </li> <li> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2</a> </li> </ul> </li> <li> <a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle"> <i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a> <ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu"> <li class="w-100"> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 1</a> </li> <li> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 2</a> </li> <li> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 3</a> </li> <li> <a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 4</a> </li> </ul> </li> <li> <a href="#" class="nav-link px-0 align-middle"> <i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a> </li> </ul> <hr> <div class="dropdown pb-4"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle"> <span class="d-none d-sm-inline mx-1">loser</span> </a> <ul class="dropdown-menu dropdown-menu-dark text-small shadow"> <li><a class="dropdown-item" href="#">New project...</a></li> <li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Sign out</a></li> </ul> </div> </div> </div> <div class="col py-3"> Content area... </div> </div> </div>
順道改了$Main_menu和$Admin_menu
將陣列變成二維陣列,以便加入icon及target功能
"/$web_name/work/work.php"=> array("name"=>"會前作業","icon"=>"mbri-setting","target"=>"_blank" ); 需要修改的地方是所有目錄下config.php main.htm main_iframe.htm
增加選單前面的icon
用https://icons.getbootstrap.com/ 的搜尋功能可以快速找到相關的icon
bootstrap icon改為v1.11.3 需修改bs_header.htm
<!-- <link rel="stylesheet" href="/{{ $theme.web_name }}/themes/assets/bootstrap/css/bootstrap-icons.css"> --> <link rel="stylesheet" href="/{{ $theme.web_name }}/themes/assets/bootstrap/css/bootstrap-icons/font/bootstrap-icons.css">
[sport]文件自動變成兩頁(多一頁空白)的解決方法
adm_print_award.php?act=list&gov_code=110302&sn=1 列印獎狀統計表時的錯誤 修改themes/print.css 加入min-height: 96%; body, html { margin: 0; padding: 0; font-size: 12pt; min-height: 96%; }
[pad]平板的程式編修環境
參考網址:
最近買了samsung tab s6 lite,想發揮它的功能,試著營造程式編輯的環境。
首先當然要有editor
在windows的環境中習慣使用sublime text
在andriod的平台上也是有sublime text 只是功能很陽春,還帶了一大堆的廣告。
vscode的線上版似乎馬言也可以考慮,但試用結果是畫面顯示太複雜,不容易操作。而且存檔時需要將檔案下載,不符合操作習慣。
後來找來quick edit 高級版,得付費。一般版也是一堆廣告。
雖然功能不是很強,但還是勘用,一些簡單的編輯還可以應付。
ssh的部分用termus
sftp的部分用andftp,雖然termus也提供sftp的功能,但操作界面比較不友善。也找不到預設目錄的選項。
samsung 提供dex模擬桌機環境,可以讓平板的操作界面比較像桌機。
[inkscape]中文字型
參考網址:https://gemmy886.blogspot.com/2011/03/inkscapesvg.html
Ctrl+Shift+T可以叫出文字與字型對話框,比較好找字體,並可預覽。
Inkscape預設字型並不支援中文字,需使用其它中文字型!
Inkscape預設中文字型依外型可分為三類:細明體、圓體、正黑體,顯示名稱都是英文,
除標示"B5"字型外,其他很難分辨是否支援中文字
Microsoft JhengHei 微軟正黑體 (Default Windows 7 繁體字型)
MingLiU 細明體(等寬的英文字型)
PMingLiU 新細明體(不等寬的英文字型)
KaiTi 標楷體 (找不到)
DF開頭的字型是華康字型
[php]SVG to PNG
參考網址:
apt install imagemagick apt list imagemagick -a 特定版本 apt install imagemagick:6.9.7.4 Installing Imagick PHP Extension apt install php-imagick systemctl restart apache2
<?php // Load the SVG file $svgFilePath = 'path/input.svg'; $svgContent = file_get_contents($svgFilePath); // Create an Imagick object and set the SVG content $imagick = new Imagick(); $imagick->readImageBlob($svgContent); // Set the image format for the output (e.g., PNG, JPEG) $outputFormat = 'png'; // You can change this to your desired image format // Optionally, you can adjust the image properties as needed $imagick->setImageFormat($outputFormat); $imagick->setImageBackgroundColor(new ImagickPixel('white')); // Set background color if needed $imagick->setResolution(300, 300); // Set resolution (dots per inch) // Perform the conversion $imagick->setImageAlphaChannel(Imagick::ALPHACHANNEL_REMOVE); // Remove alpha channel if present $imagick->mergeImageLayers(Imagick::LAYERMETHOD_FLATTEN); // Flatten the image // Save the converted image to a file $outputFilePath = 'path/output.' . $outputFormat; $imagick->writeImage($outputFilePath); // Clean up resources $imagick->clear(); $imagick->destroy(); echo "Conversion completed. The image has been saved to: $outputFilePath"; ?>
[sport]VB將原始表中的兩列資料顯示方式轉換成一列的資料顯示方式,以方便賽程表匯入系統中。
參考網址:
如何將 Excel 中兩行或多行的表格資料快速轉換成一行?
Excel 連在一起的字串想分割欄位,可使用關鍵字加空格全部取代方式 用資料剖析
Excel-時間表示的數值和文字轉換(TEXT,TIME,MID) =TEXT(A2,"hh時mm分")
[bootstrap]Bootstrap 5 Offcanvas 改變寬度
參考網址:https://www.geeksforgeeks.org/bootstrap-5-offcanvas-sass/
bootstrap Offcanvas 預設寬度是400px,要改變寬度,似乎得從SASS下手
.offcanvas { position: fixed; bottom: 0; z-index: var(--bs-offcanvas-zindex); display: flex; flex-direction: column; max-width: 100%; color: var(--bs-offcanvas-color); visibility: hidden; background-color: var(--bs-offcanvas-bg); background-clip: padding-box; outline: 0; transition: transform 2s ease-in-out; } .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { --bs-offcanvas-zindex: 1045; --bs-offcanvas-width: 400px; --bs-offcanvas-height: 30vh; --bs-offcanvas-padding-x: 1rem; --bs-offcanvas-padding-y: 1rem; --bs-offcanvas-color: white; --bs-offcanvas-bg: green; --bs-offcanvas-border-width: 1px; --bs-offcanvas-border-color: var(--bs-border-color-translucent); --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .offcanvas-title { margin-bottom: 0; line-height: 4; } 上方將要改變的參數加入var() 下方再改變值 例如: 上方 width: var(--bs-offcanvas-width); 下方--bs-offcanvas-width: 200px;
[bootstrap]表格超出頁面寬度的處理方式
參考網址:https://bootstrap5.hexschool.com/docs/5.0/content/tables/
表格的一些屬性被bootstrap重置了,以致於以下作法無效。
html表格table显示的宽度超出界面的解决方法
https://blog.csdn.net/weixin_44518466/article/details/111921984
<div style="overflow: auto;"> <table></table> </div>
原因是bootstap針對單一檔案內 CSS 的特定元素重置樣式,重置以便 Bootstrap 準確且一致的建立樣式。
https://bootstrap5.hexschool.com/docs/5.0/content/reboot/
解決方法是直接套用bootstrap的表格設定
<div class="table-responsive"> <table class="table table-bordered border-primary table-hover"> </table> </div>