Bootstrap Blazor
下载
Bootstrap Blazor

Layout 布局

用于布局的容器组件，方便快速搭建页面的基本结构：

Container：外层容器。当子元素中包含 Header 或 Footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
Header：顶栏容器
Side：侧边栏容器
Main：主要区域容器
Footer：底栏容器

组件概述

Layout：布局容器，其下可嵌套 Header Sider Main Footer 或 Layout 本身，可以放在任何父容器中
Header：顶部布局，自带默认样式，其下可嵌套任何元素
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素
Main：内容部分，自带默认样式，其下可嵌套任何元素
Footer：底部布局，自带默认样式，其下可嵌套任何元素

常见页面布局

上中下布局

常见于互联网网站布局

Demo
Header
Main
Footer
<Layout ShowFooter="true">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
    <Main>
        <div class="text-center main">Main</div>
    </Main>
    <Footer>
        <div class="text-center footer">Footer</div>
    </Footer>
</Layout>

中部左右结构布局

中部采用左右结构，多用于后台管理网站布局，当布局模板中增加 Side 组件时默认采用上中下，中部采用左右结构布局

Demo
Header
Main
Footer
<Layout ShowFooter="true">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
    <Side>
        <div class="text-center side">Side</div>
    </Side>
    <Main>
        <div class="text-center main">Main</div>
    </Main>
    <Footer>
        <div class="text-center footer">Footer</div>
    </Footer>
</Layout>

左右结构

右侧采用上中下结构，多用于后台管理网站布局，通过设置 IsFullSide 属性值来控制布局为左右结构

Demo
Header
Main
Footer
<Layout ShowFooter="true" IsFullSide="true">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
    <Side>
        <div class="text-center side">Side</div>
    </Side>
    <Main>
        <div class="text-center main">Main</div>
    </Main>
    <Footer>
        <div class="text-center footer">Footer</div>
    </Footer>
</Layout>

自定义侧边栏宽度支持百分比

通过设置 SideWidth 属性控制侧边栏宽度，支持百分比写法，设置 0 时关闭设置宽度功能，采用内部子控件撑满宽度特性

Demo
Header
Main
Footer
<Layout ShowFooter="true" SideWidth="200">
    <Header>
        <div class="text-center header">Header</div>
    </Header>
    <Side>
        <div class="text-center side">Side</div>
    </Side>
    <Main>
        <div class="text-center main">Main</div>
    </Main>
    <Footer>
        <div class="text-center footer">Footer</div>
    </Footer>
</Layout>

实战应用

Demo
实际使用过程中，侧边栏一般有两种用法
  • 侧边栏充满整个屏幕，当菜单总体高度超出屏幕后出现滚动条
  • 侧边栏不做处理高度由内容自动撑开
由于存在多种运用方式，所以本组件未进行封装，由自己决定如何进行布局，下面是实际运用中的实战示例

为了方便大家学习与比较以下实战示例中尽量使用 style 内联样式

本例点击左侧菜单展开后出现滚动条

本例点击左侧菜单展开后不出现滚动条会撑开父容器高度

Layout 组件与 Tab 组件配合使用实战示例请参阅 Tab 组件

<p>
    本例点击左侧菜单展开后出现滚动条
</p>
<div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
    <Layout SideWidth="160px">
        <Header>
            <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
        </Header>
        <Side>
            <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: auto; border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                <Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
            </div>
        </Side>
        <Main>
            <div style="padding: 1rem;">Main</div>
        </Main>
        <Footer>
            <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
        </Footer>
    </Layout>
</div>
<p class="mt-3">
    本例点击左侧菜单展开后不出现滚动条会撑开父容器高度
</p>
<div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
    <Layout ShowFooter="true" SideWidth="160px">
        <Header>
            <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
        </Header>
        <Side>
            <div style="border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                <Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
            </div>
        </Side>
        <Main>
            <div style="padding: 1rem;">Main</div>
        </Main>
        <Footer>
            <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
        </Footer>
    </Layout>
</div>

@code {
    private IEnumerable<MenuItem> GetIconSideMenuItems()
    {
        var ret = new List<MenuItem>
        {
            new MenuItem() { Text = "系统设置", IsActive = true, Icon = "fa fa-fw fa-gears" },
            new MenuItem() { Text = "权限设置", Icon = "fa fa-fw fa-users" },
            new MenuItem() { Text = "日志设置", Icon = "fa fa-fw fa-database" }
        };

        ret[0].AddItem(new MenuItem() { Text = "网站设置", Icon = "fa fa-fw fa-fa" });
        ret[0].AddItem(new MenuItem() { Text = "任务设置", Icon = "fa fa-fw fa-tasks" });

        ret[1].AddItem(new MenuItem() { Text = "用户设置", Icon = "fa fa-fw fa-user" });
        ret[1].AddItem(new MenuItem() { Text = "菜单设置", Icon = "fa fa-fw fa-dashboard" });
        ret[1].AddItem(new MenuItem() { Text = "角色设置", Icon = "fa fa-fw fa-sitemap" });

        ret[2].AddItem(new MenuItem() { Text = "访问日志", Icon = "fa fa-fw fa-bars" });
        ret[2].AddItem(new MenuItem() { Text = "登录日志", Icon = "fa fa-fw fa-user-circle-o" });
        ret[2].AddItem(new MenuItem() { Text = "操作日志", Icon = "fa fa-fw fa-edit" });

        return ret;
    }
}

整页面级别的组件

Demo

Attributes 属性
An error has occurred. This application may no longer respond until reloaded. Reload