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 Grid : How to adapt it for mobile?May 16, 2025 am 12:02 AM

Bootstrap's mesh system can be adapted to mobile devices through the following steps: 1) Use the col-xs-class to define the span of elements on a small screen; 2) Simplify the mesh structure to avoid excessive nesting; 3) Adjust the offset-xs-class as needed to optimize space use; 4) Use the order-* class to rearrange the element order; 5) Use development tools to test the layout under different screen sizes and pay attention to performance optimization. This ensures that the grid system provides the best viewing experience on mobile devices.

Understanding the Bootstrap Grid System for Responsive Web DesignMay 14, 2025 am 12:07 AM

Bootstrap'sgridsystemiseffectiveduetoits12-columnlayoutandresponsiveclasses,allowingforflexibleandmaintainabledesigns.Toleverageit:1)Userowsandcolumnswithclasseslikecol-md,col-sm,andcol-lgfordifferentscreensizes.2)Simplifylayoutsbyavoidingexcessivene

Bootstrap Grid System: A Comprehensive Guide to Responsive LayoutsMay 13, 2025 pm 04:17 PM

BootstrapGridSystemisessentialforcreatingresponsivelayouts.1)Itusescontainers,rows,andcolumnsbasedona12-columnlayout.2)CSSflexboxandmediaqueriesensureflexibilityacrossscreensizes.3)Classeslikecol-xs,col-sm,col-md,andcol-lgcontrollayoutchanges.4)Avoid

Bootstrap: Applications and Advantages ExplainedMay 10, 2025 am 12:18 AM

Bootstrap is a front-end framework for quickly building responsive websites. Its advantages include: 1. Rapid development: leverage predefined styles and components. 2. Consistency: Provide a unified design style. 3. Responsive design: The built-in grid system is adapted to various devices. Bootstrap simplifies the web development process through CSS classes and JavaScript plug-ins.

Bootstrap: Simplifying Responsive Web DevelopmentMay 09, 2025 am 12:13 AM

Bootstrap simplifies the development process mainly through its raster system, predefined components and JavaScript plug-ins. 1. The grid system allows for flexible layout, 2. Predefined components such as buttons and navigation bars simplify style design, 3. JavaScript plug-in enhances interactive functions and improves development efficiency.

Bootstrap: The Key to Responsive Web DesignMay 08, 2025 am 12:24 AM

Bootstrap is an open source front-end framework developed by Twitter, providing rich CSS and JavaScript components, simplifying the construction of responsive websites. 1) Its grid system is based on a 12-column layout, and the display of elements under different screen sizes is controlled through class names. 2) The component library includes buttons, navigation bars, etc., which are easy to customize and use. 3) The working principle depends on CSS and JavaScript files, and you need to pay attention to handling dependencies and style conflicts. 4) The usage examples show basic and advanced usage, emphasizing the importance of custom functionality. 5) Common errors include grid system calculation errors and style coverage, which require debugging using developer tools. 6) Performance optimization recommendations only introduce necessary components and customize samples using preprocessors

Bootstrap: A Powerful Framework for Web DesignMay 07, 2025 am 12:05 AM

Bootstrap is an open source front-end framework developed by the Twitter team to simplify and speed up the web development process. 1.Bootstrap is based on HTML, CSS and JavaScript, and provides a wealth of components and tools for creating modern user interfaces. 2. Its core lies in responsive design, implementing various layouts and styles through predefined classes and components. 3.Bootstrap provides predefined UI components, such as navigation bars, buttons, forms, etc., which are easy to use and adjust. 4. Examples of usage include creating a simple navigation bar and advanced collapsible sidebar. 5. Common errors include version conflicts, CSS overwrites and JavaScript errors, which can be used through the version management tool.

The Power of Bootstrap in React: A Detailed LookMay 06, 2025 am 12:06 AM

Bootstrap can be integrated in React in two ways: 1) CSS and JavaScript files using Bootstrap; 2) Use the React-Bootstrap library. React-Bootstrap provides encapsulated React components, making using Bootstrap in React more natural and efficient.

See all articles