ootstrap 5.0正式发布了，带来了很多亮点，还学得动吗？

Bootstrap 介绍

Bootstrap 是前些年十分流行，当前比较流行的前端框架，由国内上不了的推特出品，基于 css / html / javascript 提供了简洁的api，以及更为完善的人性化的网站风格，并兼容大多数 jQuery 插件。。特点是上手简单灵活，当年一经推出，受到了大量前端开发者的青睐，极大地加快了 web 开发的速度，是 web 前端开发人员的一个重要工具。

历经了4个大版本的更新，如今 Bootstrap 5.0 正式版也正式发布了，带来很多新特性：

• 全新的logo，以及官网文档更新了全新的视觉样式
• 不再依赖 jQuery，文件更小并提高页面加载速度
• 终于放弃了对 Internet Explorer 的支持，CSS 可以使用自定义属性了
• 网格系统、表格、手风琴等组件的优化更新
• 新增了全新的画布组件，表单和输入组件也得到了大量更新

开发上手体验和使用建议

在移动互联网刚刚兴起的那些年，前端没有现在那么多工具，Bootstrap 可谓一骑绝尘，移动优先的自适应布局，配合 jQuery，还有成千上万的漂亮主题，能快速地搭建非常美观健壮的 web 应用。前不久 Bootstrap 还发布了官方的开源图标库 Bootstrap Icons，同样都是非常优秀的开源项目。

Bootstrap 5.0 作为传统的 css / html / js 框架，使用也很简单，无需去学习 vue.js 那些数据绑定视图的原理，可以直接引入，也可以通过 npm 安装，即使是使用 PHP 或 Java 的后端开发者，也可以快速地通过官网文档上手。

选择基于vue 的UI库还是Bootstrap ？

要想明白这个问题，只要考虑几个问题就行了。

• 如果是需要对搜索引擎友好（seo）的新项目，建议使用相对传统的 Bootstrap，这些项目相对单页面应用，交互较少，内容较多
• 虽然 vue 生态也有工具支持 seo，但文档量大且使用复杂，不是大神不建议使用
• 原来已经有使用 jQuery 搭建的 PC 网站，想要单独做移动站，或者改造成自适应站点，也推荐用 Bootstrap

vue 和 bootstap 可以一起使用吗？

非常不建议。因为 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 的框架：

• 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
• 共享使用 .NET 编写的服务器端和客户端应用逻辑。
• 将 UI 呈现为 HTML 和 CSS，已支持众多浏览器，其中包括移动浏览器。

使用 .NET 进行客户端 Web 开发可提供以下优势：

• 使用 C# 代替 JavaScript 来编写代码。
• 利用现有的 .NET 库生态系统。
• 在服务器和客户端之间共享应用逻辑。
• 受益于 .NET 的性能、可靠性和安全性。
• 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
• 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

本项目是利用 Bootstrap 样式进行封装的 UI 组件库。

组件

Blazor应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。

组件是内置到 .NET 程序集的 .NET 类，用来：

• 定义灵活的 UI 呈现逻辑。
• 处理用户事件。
• 可以嵌套和重用。
• 可以作为 Razor 类库或 NuGet 包共享和分发。

项目截图

目前这个项目仍然在不断地完善中， 如果你想参与进来，或者想看看这个项目更详细的情况，那就点击下方的了解更多去项目主页看看吧！