search

Home  >  Article  >  Web Front-end  >  A brief discussion on how to use Bootstrap Blazor components

A brief discussion on how to use Bootstrap Blazor components

青灯夜游
青灯夜游forward
2021-06-23 11:45:534996browse

Bootstrap Blazor is a set of enterprise-level UI component libraries. This article will introduce to you how to install Blazor component templates, integrate BootstrapBlazor in existing projects, and install and use related plug-ins in Visual Studio. method.

A brief discussion on how to use Bootstrap Blazor components

Bootstrap Blazor is an enterprise-level UI component library that is adapted to mobile devices and supports various mainstream browsers. It has been used in multiple delivery projects. This set of components can greatly shorten the development cycle and save development costs. More than 70 components have been developed and packaged so far. [Related recommendations: "bootstrap Tutorial"]

Gitee The open source address is: https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github The open source address is: https://github .com/ArgoZhang/BootstrapBlazor

Online demo website: https://www.blazor.zone

Installation Guide

  • Install dotnet SDK Portal
  • Install Visual Studio 2019 v16.8 Portal

##Project Template

1. Install templates

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

##2. Use projects Template to create a new project

dotnet new bbapp

bbapp

is the abbreviation of BootstrapBlazor App3. Uninstall the project template

dotnet new -u Bootstrap.Blazor.Templates

Integrate BootstrapBlazor into existing projects

1. Get it from Nuget.org BootstrapBlazor package

dotnet add package BootstrapBlazor

2. Add style files and scripts to the project file

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. Registration service

~/Startup.cs

C

#
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 plug-in

Install Visual Studio plug-in

Installation package

Download address

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

Usage Tutorial

1. Download the installation package

2. Unzip the installation package

3. Install the vsix plug-in

Double-click the

BootstrapBlazor.UITemplate.vsix

file, please Ensure that Visual Studio IDE and related processes are closed. The installation process of this installation package may be very slow, please wait patiently

Special attention

If it takes a long time No response, please check if there is

devenv.exe

or msbuild.exe process in the task manager. If there is, please terminate it manually

A brief discussion on how to use Bootstrap Blazor componentsA brief discussion on how to use Bootstrap Blazor componentsA brief discussion on how to use Bootstrap Blazor components4. Open

Visual Studio 2019

A brief discussion on how to use Bootstrap Blazor componentsA brief discussion on how to use Bootstrap Blazor componentsA brief discussion on how to use Bootstrap Blazor components##5. Select A brief discussion on how to use Bootstrap Blazor componentsServer

or

WebAssembly run the project directlyF5

6. Change the page in the project according to your own needsA brief discussion on how to use Bootstrap Blazor components

For more programming-related knowledge, please visit:

Programming Teaching

! !

The above is the detailed content of A brief discussion on how to use Bootstrap Blazor components. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：A simple introduction to drop-down menus in BootstrapNext article：A simple introduction to drop-down menus in Bootstrap

Related articles

See more