淺談Bootstrap Blazor組件的使用方法-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

淺談Bootstrap Blazor組件的使用方法

青灯夜游

Jun 23, 2021 am 11:45 AM

bootstrap

Bootstrap Blazor是一套企業級UI元件庫，這篇文章給大家介紹一下安裝Blazor元件範本、在現有專案中整合BootstrapBlazor，以及Visual Studio中安裝相關外掛程式並使用的方法。

淺談Bootstrap Blazor組件的使用方法

Bootstrap Blazor 是一套企業級 UI 元件庫，適應行動端支援各種主流瀏覽器，已經在多個交付項目中使用。透過本套組件可以大幅縮短開發週期，節省開發成本。目前已經開發、封裝了 70 多個組件。【相關推薦：《bootstrap教學》】

Gitee 開源位址為：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 開源位址為：https://github .com/ArgoZhang/BootstrapBlazor

線上示範網站：https://www.blazor.zone

安裝指南

安裝dotnet SDK 傳送門
安裝Visual Studio 2019 v16.8 傳送門

##專案範本

#1、安裝模板

dotnet new -i Bootstrap.Blazor.Templates::*

2、使用項目範本建立新專案

dotnet new bbapp

#bbapp 是BootstrapBlazor App 的縮寫

#3、卸載專案範本

dotnet new -u Bootstrap.Blazor.Templates

現有專案中整合BootstrapBlazor##1、從Nuget.org 獲取BootstrapBlazor 套件

dotnet add package BootstrapBlazor

2、新增樣式檔案與腳本到專案檔案

Pages/_Host.cshtml (Server)

or wwwroot/index.html (WebAssembly)HTML

<!DOCTYPE html>
<html>
<head>
    . . .
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
</head>
<body>
    . . .
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>
</html>

3、註冊服務

~/Startup.cs

namespace BootstrapBlazorAppName
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            //more code may be present here
            services.AddBootstrapBlazor(); 
        }

        //more code may be present here
    }
}

Visual Studio 外掛程式

安裝Visual Studio 外掛程式

安裝套件

下載位址

https://gitee.com/Longbow/BootstrapBlazorVsix/raw/master/dist/BootstrapBlazor.UITemplate-5.0.0.zip

#使用教學

1、下載安裝包

2、解壓縮安裝包

3、安裝vsix 外掛程式

雙擊

BootstrapBlazor.UITemplate.vsix

文件，請保證Visual Studio IDE 以及相關進程都關閉，此安裝包安裝過程可能很慢，請耐心等待

特別注意

如果長時間無回應，請查看任務管理器中是否有

devenv.exe

或msbuild.exe 進程，如果有請手動結束

淺談Bootstrap Blazor組件的使用方法 4、開啟

Visual Studio 2019

淺談Bootstrap Blazor組件的使用方法 5、選取

Server

或WebAssembly 工程直接運作F5

淺談Bootstrap Blazor組件的使用方法 6、專案中依照自己需求變更頁面

更多程式相關知識，請造訪：

程式設計教學

！！

以上是淺談Bootstrap Blazor組件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

Bootstrap的影響：加速網絡開發Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web開發，通過提供預定義的樣式和組件，開發者可以快速搭建響應式網站。 1)它縮短了開發時間，例如在項目中幾天內完成基本佈局。 2)通過Sass變量和mixins，Bootstrap允許定製樣式以滿足特定需求。 3)使用CDN版本可以優化性能，提高加載速度。

理解引導：核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一個開源的前端框架，主要作用是幫助開發者快速構建響應式網站。 1)它提供了預定義的CSS類和JavaScript插件，方便實現複雜的UI效果。 2)Bootstrap的工作原理依賴於其CSS和JavaScript組件，通過媒體查詢實現響應式設計。 3)使用示例包括基本用法，如創建按鈕，以及高級用法，如自定義樣式。 4)常見錯誤包括類名拼寫錯誤和未正確引入文件，建議使用瀏覽器開發者工具調試。 5)性能優化可通過自定義構建工具實現，最佳實踐包括使用語義化HTML和Bootstrap的預定義

Bootstrap Deep Dive：響應式設計和高級佈局技術Apr 10, 2025 am 09:35 AM

Bootstrap通過網格系統和媒體查詢實現響應式設計，使網站適應不同設備。 1.使用預定義類（如col-sm-6）定義列寬。 2.網格系統基於12列，需注意總和不超12。3.使用斷點（如sm、md、lg）定義不同屏幕尺寸下的佈局。

Bootstrap面試問題：降落您夢想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套開源的前端框架，用於快速開發響應式網站和應用。 1.它提供了響應式設計、一致的UI組件和快速開發的優勢。 2.網格系統使用flexbox佈局，基於12列結構，通過.container、.row和.col-sm-6等類實現。 3.自定義樣式可以通過修改SASS變量或覆蓋CSS實現。 4.常用JavaScript組件包括模態框、輪播圖和折疊。 5.優化性能可以通過只加載必要組件、使用CDN和壓縮合併文件來實現。

Bootstrap＆JavaScript集成：動態功能和功能Apr 08, 2025 am 12:10 AM

Bootstrap和JavaScript可以無縫整合，賦予網頁動態功能。 1）使用JavaScript操作Bootstrap組件，如模態框和導航欄。 2）確保jQuery正確加載，避免常見集成問題。 3）通過事件監聽和DOM操作實現複雜用戶交互和動態效果。

bootstrap搜索欄怎麼獲取Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

bootstrap怎麼插入圖片Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

See all articles