Bootstrap Blazor 組件庫 Row 布局組件（柵格系統）

原文鏈接：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）