2023/09/08

Bootstrap設置文字不換行

 如果希望 Bootstrap 中的文字不換行,可以使用 `white-space` 屬性來控制文字的換行方式。`white-space` 屬性用於指定如何處理元素中的空白和換行符號。

以下是兩種控制文字不換行的方式:

1. 使用 `white-space: nowrap;` 屬性:這個屬性會禁止文字換行,讓文字在同一行中顯示。例如:

<p class="nowrap">這是一段不換行的文字,這是一段不換行的文字,這是一段不換行的文字。</p>


<style>

  .nowrap {

    white-space: nowrap;

  }

</style>


2. 使用 `text-nowrap` class:Bootstrap 也提供了一個 `.text-nowrap` class,可以實現相同的效果。例如:

<p class="text-nowrap">這是一段不換行的文字,這是一段不換行的文字,這是一段不換行的文字。</p>


以上這兩種方式都可以達到不換行的效果,具體使用哪種方式可以根據個人喜好和實際需求進行選擇。

Bootstrap設置card的底色

 Bootstrap 的 Card 元件提供了多種方式來設定底色,以下列舉其中幾種:


1. 使用內建的背景色 class:Bootstrap 提供了多種背景色的 class,可直接套用在 Card 元件上,例如:

<div class="card bg-primary">

  <div class="card-body">

    This card has a primary background color.

  </div>

</div>


2. 自定義背景色:如果需要使用其他顏色,可以在 CSS 中自定義背景色,例如:

<style>

  .my-card {

    background-color: #f1c40f;

  }

</style>

<div class="card my-card">

  <div class="card-body">

    This card has a custom background color.

  </div>

</div>


3. 使用線性漸層背景色:Bootstrap 也提供了線性漸層背景色的 class,可實現更豐富的視覺效果,例如:

<div class="card bg-gradient-primary">

  <div class="card-body">

    This card has a linear gradient background color.

  </div>

</div>


以上是幾種常見的設定 Card 元件底色的方式,可以根據實際需求選擇適合的方法。

Bootstrap的按鈕樣式

 Bootstrap 中提供了多種按鈕的 class,以下是常見的幾種:


1. `.btn-sm`:定義小型按鈕,適用於需要節省空間的場景。


2. `.btn-xs`:定義超小型按鈕,比 `.btn-sm` 還要小,通常用於需要非常節省空間的場景。


3. `.btn-outline-*`:定義空心按鈕,只有邊框和文本,沒有背景色,可與其他樣式組合使用。


4. `.btn-block`:定義滿寬度的按鈕,通常用於需要突出重點的場景,如登入、註冊等。


5. `.disabled`:定義禁用按鈕,使按鈕無法點擊,並改變按鈕外觀。


以上這些 class 可以與 `.btn` 樣式一起使用,以自定義按鈕的大小、樣式和行為。例如,`<button class="btn btn-primary btn-sm">Small Button</button>` 會創建一個小型、帶有主要顏色的按鈕。

2023/06/28

jQuery選擇元素,包含class .service-time,但排除class .service-10:30

 在 jQuery 中,你可以使用 `:not` 偽類選擇器來排除特定的類。要選擇包含類 `.service-time` 但不包含類 `.service-10:30` 的元素,你可以使用以下代碼:

$('.service-time:not(.service-10\\:30)')

在這個選擇器中,`:not` 偽類用於排除具有特定類的元素,而 `.` 用於選擇類名。由於 `:` 在選擇器中有特殊含義,表示偽類選擇器的開始,因此 `.` 和 `:` 之間需要使用兩個反斜杠 `\\` 進行轉義,以確保選擇器的正確性。

請注意,選擇器中的 `.` 和 `:` 是區分大小寫的,因此確保它們與你的 HTML 中的類名匹配。

jQuery 計算checkbok物件class名稱為.service-time被選取的數量

要計算選中的具有類名為 `.service-time` 的複選框的數量,你可以使用 jQuery 的 `:checked` 選擇器和 `length` 屬性。下面是一個示例代碼:

var count = $('.service-time:checked').length;

console.log(count);

在上面的代碼中,`.service-time:checked` 選擇器用於選取具有類名為 `.service-time` 並且被選中的複選框元素。然後,使用 `length` 屬性獲取選中的元素數量,並將其存儲在變量 `count` 中。最後,你可以將計數輸出到控制台或進行其他處理。

請注意,上述代碼假設你已經包含了 jQuery 庫,並在頁面加載時執行了該代碼。如果沒有包含 jQuery 庫,請確保在使用該代碼之前正確加載 jQuery 庫。

2021/09/06

PHP 取得使用者IP Address

 可使用下列各種HTTP Header的參數來取得使用者端的IP Address

if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
    $ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
    $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
    $ip = $_SERVER['REMOTE_ADDR'];
}

2021/05/04

MySQL 升級後發生 Cannot load from mysql.proc. 錯誤

 MySQL 從5.1升級到5.5之後發現執行Function時會發生 Cannot load from mysql.proc. 錯誤

ERROR 1548 (HY000) at line 1: Cannot load from mysql.proc. The table is probably corrupted_

MySQL升級後需要執行資料庫更新來套用新版的MySQL

升級後執行下面指令來進行MySQL資料庫的更新作業

mysql_upgrade -u root -p