原文链接:https://www.cnblogs.com/ysmc/p/16133351.html

  在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazor 组件库当然毫无意外地支持该功能,并且封装成了组件,使用更加方便,下面我们一起来看看吧!

  首先,这是官网关于 Row 组件的文档链接:传送门

  按照惯例,直接上代码!

<div style="margin:10px">
<Row ItemsPerRow="ItemsPerRow.Three">
<Card>
<CardBody>
<h5 class="card-title">Cell 1</h5>
<p class="card-text">静夜诗</p>
<div class="align-end">
<a href="#" class="btn btn-primary">详情</a>
</div>
</CardBody>
</Card>
<Card>
<CardBody>
<h5 class="card-title">Cell 2</h5>
<p class="card-text">李白</p>
<div class="align-end">
<a href="#" class="btn btn-primary">详情</a>
</div>
</CardBody>
</Card>
<Card>
<CardBody>
<h5 class="card-title">Cell 3</h5>
<p class="card-text">床前明月光</p>
<div class="align-end">
<a href="#" class="btn btn-primary">详情</a>
</div>
</CardBody>
</Card>
<Card>
<CardBody>
<h5 class="card-title">Cell 4</h5>
<p class="card-text">疑是地上霜</p>
<div class="align-end">
<a href="#" class="btn btn-primary">详情</a>
</div>
</CardBody>
</Card>
<Card>
<CardBody>
<h5 class="card-title">Cell 5</h5>
<p class="card-text">举头望明月</p>
<div class="align-end">
<a href="#" class="btn btn-primary">详情</a>
</div>
</CardBody>
</Card>
<Card>
<CardBody>
<h5 class="card-title">Cell 6</h5>
<p class="card-text">低头思故乡</p>
<div class="align-end">
<a href="#" class="btn btn-primary">详情</a>
</div>
</CardBody>
</Card>
</Row>
</div>

  因为我给 Row 组件的 ItemsPerRow 属性设置了一行显示3个,所以就有了以下的一个效果,是不是非常好用啊。

  以下是支持的每行个数的枚举项。

namespace BootstrapBlazor.Components
{
//
// 摘要:
// 每行显示多少组件的枚举
public enum ItemsPerRow
{
//
// 摘要:
// 每行一个
One = 0,
//
// 摘要:
// 每行两个
Two = 1,
//
// 摘要:
// 每行三个
Three = 2,
//
// 摘要:
// 每行四个
Four = 3,
//
// 摘要:
// 每行六个
Six = 4,
//
// 摘要:
// 每行12个
Twelve = 5
}
}

  当然,有些小伙伴可以需求比较刁钻,例如第一个要占用两个位置,要霸气,要突出!

  我们的组件也为你考虑到了这样的情况,就是 Row 组件中的 ColSpan 属性,熟悉 table 应该能猜出来这个是什么意思了,就是该 Row 占用了多少个位置,我们将上面的页面稍作修改:

<div style="margin:10px">
<Row ItemsPerRow="ItemsPerRow.Two">
<Row ColSpan="2">
<Card IsCenter="true">
<CardBody>
<p class="card-text">静夜诗</p>
</CardBody>
</Card>
</Row>
<Row ColSpan="2">
<Card IsCenter="true">
<CardBody>
<p class="card-text">李白</p>
</CardBody>
</Card>
</Row>
<Card IsCenter="true">
<CardBody>
<p class="card-text">床前明月光</p>
</CardBody>
</Card>
<Card IsCenter="true">
<CardBody>
<p class="card-text">疑是地上霜</p>
</CardBody>
</Card>
<Card IsCenter="true">
<CardBody>
<p class="card-text">举头望明月</p>
</CardBody>
</Card>
<Card IsCenter="true">
<CardBody>
<p class="card-text">低头思故乡</p>
</CardBody>
</Card>
</Row>
</div>

  是不是很简单,很有意思!

  好了,关于Row组件的分享就这么多,实在是太简单了,都没什么好写的,就这样吧,拜拜,各位晚安!

Attributes 属性

参数
说明
类型
可选值
默认值
ItemsPerRow
设置一行显示几个控件
enum
One,Two,Three,Four,Six,Twelve
One
RowType
设置排版格式,子Row如果不指定,会使用父Row的设置
enum?
Normal, Inline
null
ColSpan
设置子Row跨父Row列数
int?
-
null
MaxCount
设置行内最多显示的控件数
int?
-
null

写在最后

  希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!

star流程:

1、访问点击项目链接:BootstrapBlazor   

2、点击star,如下图,即可完成star,关注项目不迷路:

另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:

  BootstrapAdmin 项目地址:
  https://gitee.com/LongbowEnterprise/BootstrapAdmin

  SliderCaptcha 项目地址:
  https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群(QQ)欢迎加群讨论

          BA & Blazor ①(795206915)          BA & Blazor ②(675147445)

Bootstrap Blazor 组件库 Row 布局组件(栅格系统)的更多相关文章

  1. bootstrap第一天,响应式布局,栅格系统运用

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  2. ElementUI2.0组件库el-table表格组件如何自定义表头?

    效果图: npm run dev 编译项目之后,报错,要使用jsx语法需要先安装编译插件 1.安装下列安装包 npm install babel-plugin-syntax-jsx --save-de ...

  3. bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门

    <!DOCTYPE html> <html> <head> <title>bootstrap</title> <!-- 引入boots ...

  4. Blazor Bootstrap 组件库浏览器通知组件介绍

    通知组件 通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户. DEMO https: ...

  5. Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

    在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACS ...

  6. bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  7. 从0搭建vue3组件库:Shake抖动组件

    先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...

  8. Bootstrap框架的了解和使用之栅格系统

       前    言 Bootstrap Bootstrap 包含了一个响应式的.移动设备优先的.不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列.它包含了用于简单的布局选项的预定 ...

  9. bootstrap快速入门笔记(二)-栅格系统,响应式类

    一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...

随机推荐

  1. Spring Boot整合Redis-转载

    Spring Boot整合Redis的三中方式的博客: https://wangsong.blog.csdn.net/article/details/103210490 使用spring.cache. ...

  2. 网络传输中的各种加密算法+SSL+CA证书详解

    1. 数据传输分类 在互联网上数据传输有两种:明文传输和加密传输.明文传输的协议有:ftp.http.smtp.telnet.但是为了数据的完整性和安全性,所以后来引用了加密等相关手段来保证数据的安全 ...

  3. BUAA_C++算法板子积累_动态规划、图算法、计算几何、FFT

    Hello #include <iostream> #include <cstdio> #include <cctype> #include <cmath&g ...

  4. sftp服务器搭建以及挂载新硬盘到home目录下

    前言 我身边一直有一个空闲不用的硬盘,一直空闲不用,闲暇的时候想到为什么不用起来呢,于是想起来搭建一个sftp服务器,当做云盘用了 搭建sftp服务器 SFTP称作"安全的FTP" ...

  5. SpringBoot:自定义注解实现后台接收Json参数

    0.需求 在实际的开发过程中,服务间调用一般使用Json传参的模式,SpringBoot项目无法使用@RequestParam接收Json传参 只有@RequestBody支持Json,但是每次为了一 ...

  6. Java 中用到的线程调度算法是什么?

    计算机通常只有一个 CPU,在任意时刻只能执行一条机器指令,每个线程只有获得 CPU 的使用权才能执行指令.所谓多线程的并发运行,其实是指从宏观上看,各个线 程轮流获得 CPU 的使用权,分别执行各自 ...

  7. java-反射-注解-json-xml

    反射: 框架设计的灵魂 框架:半成品软件.可以再框架的基础上进行软件开发,简化代码 定义:将类的各个组成部分封装为其他对象,这就是反射机制 好处: 可以再程序运行过程中,操作这些对象 可以解耦,提高程 ...

  8. @Required 注解有什么用?

    @Required 应用于 bean 属性 setter 方法.此注解仅指示必须在配置时使用 bean 定义中的显式属性值或使用自动装配填充受影响的 bean 属性.如果尚未 填充受影响的 bean ...

  9. C# 正则表达式判断是否是有效的文件、文件夹路径

    C# 正则表达式判断是否是有效的文件.文件夹路径 省流 /// <summary> /// 是否有效的文件,文件夹路径 /// </summary> /// <param ...

  10. 单例模式 | C++ | Singleton模式

    Singleton 模式 单例模式(Singleton Pattern)是 C++/Java等语言中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式实 ...