首页 > 其他分享 >BootstrapBlazor组件保姆级教程

BootstrapBlazor组件保姆级教程

时间:2023-05-03 14:57:40浏览次数:56  
标签:教程 代码 BootstrapBlazor 添加 https 组件

BootstrapBlazor 组件库保姆级使用教程

BootstrapBlazor组件库官网 https://www.blazor.zone/components

BootstrapBlazor组件库github仓库地址 https://github.com/dotnetcore/BootstrapBlazor

BootstrapBlazor组件库gitee仓库地址 https://gitee.com/LongbowEnterprise/BootstrapBlazor

1、先创建一个Blazor Server项目

2、在项目中添加BootstrapBlazorBootstrapBlazor.FontAwesomenuget包
img

img

img

3、接下来在Program.cs中添加这行代码:builder.Services.AddBootstrapBlazor();
img

4、打开_Imports.razor文件,导入BootstrapBlazor组件库命名空间:@using BootstrapBlazor.Components
img

5、接下来打开Pages文件夹,打开_Host.cshtml文件,添加cssJavaScript引用

CSS 引用代码

css 引用一定要放在<link href="css/site.css" rel="stylesheet" />这行代码上面

    <!-- 引用 BootstrapBlazor.FontAwesome 字体库包 !-->
    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引用 BootstrapBlazor 组件库包 !-->
    <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

JavaScript 引用代码

    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

img

5、接下最后一步,在App.razor文件中添加<BootstrapBlazorRoot>组件。

img

完成以上步骤后,就可以愉快的使用BootstrapBlazor组件库啦!

标签:教程,代码,BootstrapBlazor,添加,https,组件
From: https://www.cnblogs.com/codecopier/p/17369045.html

相关文章

  • 交通安全标志图解教程 All In One
    交通安全标志图解教程AllInOne驾考:科目一、科目四交通标志图解道路交通标志警告标志禁令标志指示标志指路标志旅游区标志其他标志道路交通标线指示标线禁止标线警告标线其他标线其他标志标识交警手势图解车内功能键交通事故责任认定汽车仪表盘指示灯......
  • vue2实现数据聚合【scatter-clustering】组件封装
    实现如下效果:效果展示:https://code.juejin.cn/pen/7228568245148581943如果不会请移步到官网的栗子,请点击查看直接给大家上代码:整体代码片段1<template>2<divref="echarts"style="width:100%;height:300px;"></div>3</template>4<scrip......
  • 万众期待的FL Studio 2023最新发布的21版本新功能介绍/主题包/下载安装激活教程
    FLStudio21国人也叫它水果编曲软件,是一款有着25多年历史的经典音乐创作软件。全球已有上千万的用户每天在使用水果编曲创作自己的音乐。它被公认为最适合新手的编曲软件之一,有着业内领先的工作流,以及丰富的生产力插件,同时也是唯一一款支持终生免费升级的DAW软件。来自DJMAG评选的......
  • 【pytorch】土堆pytorch教程学习(四)Transforms 的使用
    transforms在工具包torchvision下,用来对图像进行预处理:数据中心化、数据标准化、缩放、裁剪、旋转、翻转、填充、噪声添加、灰度变换、线性变换、仿射变换、亮度/饱和度/对比度变换等。transforms本质就是一个python文件,相当于一个工具箱,里面包含诸如Resize、ToTensor、Nor......
  • 高颜值在线绘图平台ImageGP系列教程 - 功能介绍
    在线平台BIC是ImageGP的重构升级版,重构于2020年初。该平台采用配置文件快速部署工具、生成结果或结果报告。其绘图和分析基于R语言(ImageGP包,在早期ImageGP脚本的基础上重新进行了封装,GitHub,Gitee)、Python语言。左侧导航目前包括:1.Professionalplotsinseconds;2.......
  • 用vue2封装轮播图组件
    日常练习用vue2封装轮播图组件,传入图片信息数组。实现思想:图片组添加translate动画,通过轮播到第几张图片作为参数,让图片组整体移动。Carousel.vue<template><divclass="carousel"><divclass="carouselList"><!--图片列表--><ulclass="img&quo......
  • Theano 中文文档 0.9 - 7.1.1 Python教程
    7.1.1Python教程译者:Python文档协作翻译小组,原文:Pythontutorial。本文以CCBY-NC-SA4.0协议发布,转载请保留作者署名和文章出处。Python文档协作翻译小组人手紧缺,有兴趣的朋友可以加入我们,完全公益性质。交流群:467338606。在本文档中,我们假设读者了解Python。如果你需要学习......
  • 安卓逆向系列教程(一)Dalvik 指令集
    安卓逆向系列教程(一)Dalvik指令集作者:飞龙寄存器Dalvik指令集完全基于寄存器,也就是说,没有栈。所有寄存器都是32位,无类型的。也就是说,虽然编译器会为每个局部变量分配一个寄存器,但是理论上一个寄存器中可以存放一个int,之后存放一个String(的引用),之后再存放一个别的东西。如果要处......
  • Matplotlib 中文用户指南 3.8 路径教程
    路径教程原文:PathTutorial译者:飞龙协议:CCBY-NC-SA4.0位于所有matplotlib.patch对象底层的对象是Path,它支持moveto,lineto,curveto命令的标准几个,来绘制由线段和样条组成的简单和复合轮廓。路径由(x,y)顶点的(N,2)数组,以及路径代码的长度为N的数组实例化。例如,为了绘制(0,0)到(......
  • Matplotlib 中文用户指南 3.7 变换教程
    变换教程原文:TransformationsTutorial译者:飞龙协议:CCBY-NC-SA4.0像任何图形包一样,matplotlib建立在变换框架之上,以便在坐标系,用户数据坐标系,轴域坐标系,图形坐标系和显示坐标系之间轻易变换。在95%的绘图中,你不需要考虑这一点,因为它发生在背后,但随着你接近自定义图形生成的极......