整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ootstrap 5.0正式發布了，帶來了很多亮點，還學得動嗎？
Bootstrap 是前些年十分流行，當前比較流行的前端框架，由國內上不了的推特出品，基于 css / html / javascript 提供了簡潔的api，以及更為完善的人性化的網站風格，并兼容大多數 jQuery 插件。。特點是上手簡單靈活，當年一經推出，受到了大量前端開發者的青睞，極大地加快了 web 開發的速度，是 web 前端開發人員的一個重要工具。
bootstrap5 官網截圖
歷經了4個大版本的更新，如今 Bootstrap 5.0 正式版也正式發布了，帶來很多新特性：
在移動互聯網剛剛興起的那些年，前端沒有現在那么多工具，Bootstrap 可謂一騎絕塵，移動優先的自適應布局，配合 jQuery，還有成千上萬的漂亮主題，能快速地搭建非常美觀健壯的 web 應用。前不久 Bootstrap 還發布了官方的開源圖標庫 Bootstrap Icons，同樣都是非常優秀的開源項目。
bootstrap 主題
Bootstrap 5.0 作為傳統的 css / html / js 框架，使用也很簡單，無需去學習 vue.js 那些數據綁定視圖的原理，可以直接引入，也可以通過 npm 安裝，即使是使用 PHP 或 Java 的后端開發者，也可以快速地通過官網文檔上手。
要想明白這個問題，只要考慮幾個問題就行了。
非常不建議。因為 Bootstrap 是操作 dom 的，而 vue 都是虛擬的 dom，一起搭配使用會很容易導致很多問題。vue 生態有很多很優秀的 UI 組件庫，之前也推薦過很多，可以翻翻以前的文章，pc / 移動端，admin 應有盡有。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的，在 GitHub 上發布的開源產品，基于 MIT 開源協議，所有個人、公司和組織都可以下載使用，免費用于商業項目。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點【了解更多】查看本次分享的網址。
、 開發第一個Blazor Server程序
2、 Blazor Server程序的特點
3、 Blazor Server程序的目錄結構
4、 Blazor Server程序的發布
Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架：
· 使用 C# 代替 JavaScript 來創建豐富的交互式 UI。
· 共享使用 .NET 編寫的服務器端和客戶端應用邏輯。
· 將 UI 呈現為 HTML 和 CSS，以支持眾多瀏覽器，其中包括移動瀏覽器。
使用 .NET 進行客戶端 Web 開發可提供以下優勢：
· 使用 C# 代替 JavaScript 來編寫代碼。
· 利用現有的 .NET 庫生態系統。
· 在服務器和客戶端之間共享應用邏輯。
· 受益于 .NET 的性能、可靠性和安全性。
· 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
· 以一組穩定、功能豐富且易用的通用語言、框架和工具為基礎來進行生成。
開發第一個Blazor Server程序，效果如下：
準備工作：
1. Visual Studio 2019
2. .NET 5.0
打開VS2019，選擇“創建新項目”：
然后，選擇“Blazor Server 應用”：
點擊“下一步”：
填寫“項目名稱”，選擇項目保存在的文件夾位置，點擊“下一步”：
目標框架選擇最新的“.Net 5.0”，身份驗證選擇“無”，點擊“創建”：
這樣，第一個Blazor server程序就創建好了，點擊工具欄中的運行IIS Express，看看效果：
是不是很簡單？如果您有云服務器，就可以發布上去了，您就擁有了開發一個網站的能力。
Blazor Server程序的特點：
Blazor Server程序的頁面渲染是在服務端，通過SignalR反應到客戶端，客戶端瀏覽器無需下載大量的運行環境dll，只下載wwwroot下的有關內容，這樣頁面反應迅速，但前提是要求網絡連接要相對穩定，不能斷網。
客戶端的每次操作，如點擊，選擇等都會通過網絡與服務器進行交互。
對于客戶端瀏覽器的處理速度也沒有多大關系，性能差一點也可以忍受。
Blazor Server服務器要保存每個連接客戶端的狀態信息，對于服務器內存要求較高。
Blazor Server 程序的目錄結構：
1. wwwroot放了網站的靜態資源如css、js、image文件；
2. Data文件夾存放數據、服務及其他相關類，當然可以放到其他目錄；
3. Page是應用程序的razor頁面，當然可以放到其他目錄；
4. Shared文件夾存放公共的razor頁面，當然可以放到其他目錄；
5. _import.razor是應用程序引用的命名空間，也不是所有的命名空間都必須要寫到里面；
6. _Host.cshtml是主頁加載頁面，相當于網站的默認主頁index.html；
7. App.razor是應用程序的啟動路由頁面，里面規定了默認Layout；
8. appsetting.json是應用程序的默認配置文件；
9. program.cs是程序的入口，目的是創建IHostBuilder并啟動它；
10. startup.cs非常重要，里面配置了應用程序的服務類，及需要的功能及中間件，應用程序的核心功能都要通過里面進行配置。
Startup.cs：
public void ConfigureServices(IServiceCollection services)
里面配置應用程序需要的服務。
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
里面設置應用程序需要的功能、中間件處理管道。
App.razor：
App.razor定義了程序的全局路由，當客戶端請求路由正確時，則會執行<Found></Found>節點，DefaultLayout="@typeof(MainLayout)"則規定了默認布局模板。當客戶端請求路由不正確時，則會執行<NotFound></NotFound>節點在頁面輸出錯誤信息“Sorry, there's nothing at this address.”
_Host.cshtml
此文件相當于一般網站的index.html文件，默認加載的頁面，里面有razor組件需要裝載的位置：
<component type="typeof(App)" render-mode="ServerPrerendered" />
裝載App.razor里面的默認Layout：MainLayout.razor，MainLayout.razor又加載了路由為“/”的razor頁面，默認是Index.razor頁面。
_Host.cshtml頁面還可以注入一些代碼，來獲取一些請求參數，后面我會詳細介紹。
MainLayout.razor
默認建立的MainLayout.razor頁面如下：
里面的<NavMenu>是一個導航菜單組件，@Body標記是導航頁面要加載的位置。從上面運行的效果看，頁面左側是NavMenu導航菜單，右側上部是一個About連接，下部為頁面加載的區域。點擊左側菜單后加載的頁面都加載到@Body標記的位置。
Blazor Server程序的發布：
Blazor應用程序需要發布后才能脫離開發環境運行，在vs開發環境中，右鍵我們建立的FirstBlazorServer項目，點擊“發布…”：
我們點擊“文件夾”，下一步，確定您要發布的文件夾位置：
瀏覽您要發布的文件夾，點擊“完成”：
發布前，我們要更改幾個選項，配置：Release，目標框架：net5.0，部署模式：獨立，目標運行時：win-x64，更改好后，點擊“發布”按鈕。
發布完成后，系統會生成一堆文件，把這一堆文件復制到你的網站上即可運行，是不是很簡單？
別忘了您可能需要修改里面的配置文件：appsettings.json，因為此文件有程序運行的一些參數，如：系統運行參數，數據庫連接參數等，后面課程會詳細介紹。
在做 Web 開發，很多開發者都會選擇用 Java 和 SpringBoot 框架，畢竟已經相對成熟并且可擴展性也非常好，但確實很少看到開發者使用 C# 和 .NET 進行 Web 開發。
今天 Gitee 推薦的開源項目便是一個使用 .NET 生成交互式客戶端 Web UI 的框架，如果你想學習學習的話不妨接著往下看。
項目名稱：BootstrapBlazor
項目作者：Longbow
開源許可協議：LGPL-3.0
項目地址：https://gitee.com/LongbowEnterprise/BootstrapBlazor
Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架：
使用 .NET 進行客戶端 Web 開發可提供以下優勢：
本項目是利用 Bootstrap 樣式進行封裝的 UI 組件庫。
Blazor應用基于組件。 Blazor 中的組件是指 UI 元素，例如頁面、對話框或數據輸入窗體。
組件是內置到 .NET 程序集的 .NET 類，用來：
目前這個項目仍然在不斷地完善中， 如果你想參與進來，或者想看看這個項目更詳細的情況，那就點擊下方的了解更多去項目主頁看看吧！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
