[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

參考網址:

安裝 imagick 套件 https://www.serverlab.ca/tutorials/linux/administration-linux/how-to-install-imagemagick-for-php-on-ubuntu-18-04/#google_vignette

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

https://www.phpclasses.org/
 

<?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; 

 

發表於 程式設計 | 發表迴響

[svg]如何在word中插入svg檔

參考網址:布丁布丁吃什麼

ms word 2016版以後才支援SVG檔

發表於 程式設計, 軟體使用 | 發表迴響

[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>


 

發表於 程式設計 | 發表迴響

[3D]fusion 360 繁體中文化

參考網址:sairwolf's實驗室

fusion 360 官網目前尚未提供繁體中文語系支援,網路上找到的繁體中文化文件因為歷時已久,與目前的版本不符,會造成fusion 360 無法開啟。
於是參考網路上的文件,搭配MadEdit軟體,自行進行繁體中文化。
目前2023/11/26 fusion 360的版本是2.0.17721 x86_64
fusion 360的版本訊息可以在畫面右上角 幫助>>關於中找到

zh-TW.7z

發表於 軟體使用 | 發表迴響