A brief discussion on how to use Bootstrap Blazor components-Bootstrap Tutorial-php.cn

Home

Web Front-end

Bootstrap Tutorial

A brief discussion on how to use Bootstrap Blazor components

青灯夜游

Jun 23, 2021 am 11:45 AM

bootstrap

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

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 components 4. Open

Visual Studio 2019

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

WebAssembly run the project directlyF5

6. Change the page in the project according to your own needs A 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:博客园. If there is any infringement, please contact admin@php.cn delete

Bootstrap: A Quick Guide to Web FrameworksApr 15, 2025 am 12:10 AM

Bootstrap is a framework developed by Twitter to help quickly build responsive, mobile-first websites and applications. 1. Ease of use and rich component libraries make development faster. 2. The huge community provides support and solutions. 3. Introduce and use class names to control styles through CDN, such as creating responsive grids. 4. Customizable styles and extension components. 5. Advantages include rapid development and responsive design, while disadvantages are style consistency and learning curve.

Breaking Down Bootstrap: What It Is and Why It MattersApr 14, 2025 am 12:05 AM

Bootstrapisafree,open-sourceCSSframeworkthatsimplifiesresponsiveandmobile-firstwebsitedevelopment.Itofferspre-styledcomponentsandagridsystem,streamliningthecreationofaestheticallypleasingandfunctionalwebdesigns.

Bootstrap: Making Web Design EasierApr 13, 2025 am 12:10 AM

What makes web design easier is Bootstrap? Its preset components, responsive design and rich community support. 1) Preset component libraries and styles allow developers to avoid writing complex CSS code; 2) Built-in grid system simplifies the creation of responsive layouts; 3) Community support provides rich resources and solutions.

Bootstrap's Impact: Accelerating Web DevelopmentApr 12, 2025 am 12:05 AM

Bootstrap accelerates web development, and by providing predefined styles and components, developers can quickly build responsive websites. 1) It shortens development time, such as completing the basic layout within a few days in the project. 2) Through Sass variables and mixins, Bootstrap allows custom styles to meet specific needs. 3) Using the CDN version can optimize performance and improve loading speed.

Understanding Bootstrap: Core Concepts and FeaturesApr 11, 2025 am 12:01 AM

Bootstrap is an open source front-end framework, and its main function is to help developers quickly build responsive websites. 1) It provides predefined CSS classes and JavaScript plug-ins to facilitate the implementation of complex UI effects. 2) The working principle of Bootstrap relies on its CSS and JavaScript components to realize responsive design through media queries. 3) Examples of usage include basic usage, such as creating buttons, and advanced usage, such as custom styles. 4) Common errors include misspelling of class names and incorrectly introducing files. It is recommended to use browser developer tools to debug. 5) Performance optimization can be achieved through custom build tools, best practices include predefined using semantic HTML and Bootstrap

Bootstrap Deep Dive: Responsive Design & Advanced Layout TechniquesApr 10, 2025 am 09:35 AM

Bootstrap implements responsive design through grid systems and media queries, making the website adapted to different devices. 1. Use a predefined class (such as col-sm-6) to define the column width. 2. The grid system is based on 12 columns, and it is necessary to note that the sum does not exceed 12. 3. Use breakpoints (such as sm, md, lg) to define the layout under different screen sizes.

Bootstrap Interview Questions: Land Your Dream Front-End JobApr 09, 2025 am 12:14 AM

Bootstrap is an open source front-end framework for rapid development of responsive websites and applications. 1. It provides the advantages of responsive design, consistent UI components and rapid development. 2. The grid system uses flexbox layout, based on 12-column structure, and is implemented through classes such as .container, .row and .col-sm-6. 3. Custom styles can be implemented by modifying SASS variables or overwriting CSS. 4. Commonly used JavaScript components include modal boxes, carousel diagrams and folding. 5. Optimization performance can be achieved by loading only necessary components, using CDN, and compressing merge files.

Bootstrap & JavaScript Integration: Dynamic Features & FunctionalityApr 08, 2025 am 12:10 AM

Bootstrap and JavaScript can be seamlessly integrated to give web pages dynamic functionality. 1) Use JavaScript to manipulate Bootstrap components, such as modal boxes and navigation bars. 2) Ensure jQuery loads correctly and avoid common integration problems. 3) Achieve complex user interaction and dynamic effects through event monitoring and DOM operations.

See all articles