資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Bootstrap 4 中建立輪廓按鈕
概述
Bootstrap 是一個層疊樣式表 (CSS) 框架，它為我們提供了不同的按鈕樣式和佈局。因此，要使用 Bootstrap 按鈕，我們需要將 Bootstrap 的內容交付網路 (CDN) 連結匯入到我們的 HTML 文件中，該連結可以從 Bootstrap 的官方頁面匯入。官方頁面提供了各種 Bootstrap 版本的連結。要使用 Bootstrap 建立輪廓按鈕，我們需要將某些類匯入到我們的 HTML 元素中。這些類是 btn、btn-outline-colorName。我們可以透過將 colorName 替換為 primary、success、warning、danger、info、secondary、light 和 dark 來更改按鈕的顏色。
語法
下面顯示了使用 Bootstrap 建立按鈕的語法。顏色名稱將更改為按鈕顏色的名稱，並且 buttonName 將更改為您要新增到按鈕的任何文字。
<button type="button" class="btn btn-outline-colorName>buttonName</button>
內容交付網路 (CDN) 連結
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
演算法
步驟 1 − 在您的文字編輯器中建立一個包含 HTML 基本結構的 HTML 檔案。
步驟 2 − 現在將上面給出的 CDN 連結連結到 HTML 文件的 head 標籤中。
步驟 3 − 現在建立一個 div 容器，其中包含所有型別的 HTML 輪廓按鈕。
步驟 4 − 現在建立一個 HTML 按鈕。
<button type="button">Submit</button>
步驟 5 − 向其新增 class 屬性。要建立 Bootstrap 輪廓按鈕，請使用類名“btn btn-outline-primary”。
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light text-primary">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
步驟 6 − 如果您想新增更多不同顏色的按鈕，請重複步驟 5，只需更改其顏色名稱即可。
步驟 7 − Bootstrap 輪廓按鈕已成功建立並可以使用。
示例
在此示例中，我們使用 Bootstrap 類建立了整個 Bootstrap 輪廓按鈕。這些類是預定義的，任何開發人員都可以使用。
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
<title> outline button using bootstrap </title>
</head>
<body style="width: 100vw;">
<h3 class="text-center text-success">tutorialspoint.com</h3>
<p class="text-center text-success">(using btn-outline class)</p>
<div class="d-flex flex-wrap justify-content-center pt-5" style="gap: 2rem;">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light text-primary">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>
下面給出的圖片顯示了上述示例的輸出。它包含輪廓按鈕的所有顏色。當用戶將游標移到按鈕上時，它會將其背景更改為其輪廓的顏色。
結論
如上例所示，我們使用了 Bootstrap 類和 HTML 按鈕標籤，但這並不侷限於我們，我們還可以將這些類應用於任何 HTML div 元素。唯一需要注意的是，無論新增輪廓按鈕的 Bootstrap 類的是哪個元素，它都會賦予該元素按鈕的屬性。Bootstrap 很適合用於您的專案，因為它可以節省您在設計專案佈局方面的時間。
484 次瀏覽
