前端学习笔记——Element Plus 栅格布局系统示例

Element Plus 栅格布局系统示例

Element Plus 使用 24 分栏的栅格系统，通过 <el-row> 和 <el-col> 组件实现灵活的布局。每个 <el-col> 的 span 属性指定该列占据 24 等份中的多少份。

1. 基本列划分示例

示例1A：等宽两列布局 (每列12份)

两列各占12份，即各占50%宽度

html 复制代码

<el-row> <el-col :span="12">列1 (占12/24)</el-col> <el-col :span="12">列2 (占12/24)</el-col> </el-row>

示例1B：不等宽三列布局 (8:8:8)

三列各占8份，即各占33.33%宽度

html 复制代码

<el-row> <el-col :span="8">列1 (占8/24)</el-col> <el-col :span="8">列2 (占8/24)</el-col> <el-col :span="8">列3 (占8/24)</el-col> </el-row>

示例1C：混合宽度布局 (6:12:6)

三列分别占6份、12份、6份，即25%、50%、25%宽度

html 复制代码

<el-row> <el-col :span="6">列1 (占6/24)</el-col> <el-col :span="12">列2 (占12/24)</el-col> <el-col :span="6">列3 (占6/24)</el-col> </el-row>

2. 响应式布局（如您登录页面中的用法）

示例2A：响应式断点设置

在不同屏幕尺寸下设置不同的列宽，这是您登录页面中的用法：

html 复制代码

<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" > </el-col>

解释：

:xs="24" - 在超小屏幕 (<768px) 下占24份（100%宽度，单列显示）
:sm="12" - 在小屏幕 (≥768px) 下占12份（50%宽度）
:md="12" - 在中等屏幕 (≥992px) 下占12份（50%宽度）
:lg="12" - 在大屏幕 (≥1200px) 下占12份（50%宽度）
:xl="12" - 在超大屏幕 (≥1920px) 下占12份（50%宽度）

这意味着在手机上图片和表单会上下堆叠（各占全宽），在平板和桌面上会左右并排（各占半宽）。

3. 列间距（gutter属性）

示例3A：带间距的列布局

<el-row :gutter="20"> 表示列之间有20px的间距

html 复制代码

<el-row :gutter="20"> <el-col :span="8">列1</el-col> <el-col :span="8">列2</el-col> <el-col :span="8">列3</el-col> </el-row>

📌 关键概念总结

1. shadow="always" 的含义：

shadow="always" - 卡片始终显示阴影（您的登录页面使用）
shadow="hover" - 仅鼠标悬停时显示阴影
shadow="never" - 从不显示阴影

2. 栅格系统原理：

一行(<el-row>)被分为24等份
每列(<el-col>)的span属性指定它占据多少份
span="12"表示占据一半宽度(12/24=50%)
span="8"表示占据1/3宽度(8/24≈33.3%)
span="6"表示占据1/4宽度(6/24=25%)

3. 响应式断点：

xs - 超小屏幕 (<768px)：手机
sm - 小屏幕 (≥768px)：平板
md - 中等屏幕 (≥992px)：小桌面
lg - 大屏幕 (≥1200px)：桌面
xl - 超大屏幕 (≥1920px)：大桌面

示例代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Plus 栅格布局示例</title>
    <!-- 引入Element Plus样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #409EFF;
            margin-bottom: 10px;
            font-size: 28px;
        }
        
        .description {
            color: #606266;
            margin-bottom: 30px;
            line-height: 1.6;
            font-size: 16px;
        }
        
        .section {
            margin-bottom: 40px;
        }
        
        .section-title {
            font-size: 20px;
            color: #303133;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #409EFF;
        }
        
        .demo-card {
            border: 1px solid #ebeef5;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            background-color: #fafafa;
        }
        
        .demo-title {
            font-size: 18px;
            color: #409EFF;
            margin-bottom: 15px;
        }
        
        .demo-desc {
            color: #606266;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            overflow-x: auto;
            margin-top: 15px;
            white-space: pre;
        }
        
        .result-box {
            background-color: white;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            padding: 20px;
            margin-top: 20px;
        }
        
        /* 自定义列样式，便于观察 */
        .custom-col {
            background-color: #409EFF;
            color: white;
            text-align: center;
            padding: 20px 0;
            border-radius: 6px;
            margin-bottom: 10px;
            border: 1px solid #79bbff;
        }
        
        .col-label {
            font-size: 16px;
            font-weight: bold;
        }
        
        .col-span {
            font-size: 12px;
            opacity: 0.9;
            margin-top: 5px;
        }
        
        .note {
            background-color: #f0f9ff;
            border-left: 4px solid #409EFF;
            padding: 15px;
            margin-top: 20px;
            border-radius: 4px;
        }
        
        .note-title {
            font-weight: bold;
            color: #409EFF;
            margin-bottom: 8px;
        }
        
        .note-content {
            color: #606266;
            line-height: 1.6;
        }
        
        .responsive-demo .custom-col {
            background-color: #67C23A;
            border-color: #95d475;
        }
        
        .gutter-demo .custom-col {
            background-color: #E6A23C;
            border-color: #eebe77;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            color: #909399;
            font-size: 14px;
            padding-top: 20px;
            border-top: 1px solid #ebeef5;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>Element Plus 栅格布局系统示例</h1>
            <p class="description">
                Element Plus 使用 24 分栏的栅格系统，通过 <code>&lt;el-row&gt;</code> 和 <code>&lt;el-col&gt;</code> 组件实现灵活的布局。
                每个 <code>&lt;el-col&gt;</code> 的 span 属性指定该列占据 24 等份中的多少份。
            </p>
            
            <!-- 示例1：基本列划分 -->
            <div class="section">
                <h2 class="section-title">1. 基本列划分示例</h2>
                
                <div class="demo-card">
                    <h3 class="demo-title">示例1A：等宽两列布局 (每列12份)</h3>
                    <p class="demo-desc">两列各占12份，即各占50%宽度</p>
                    
                    <div class="code-block">
&lt;el-row&gt;
  &lt;el-col :span="12"&gt;列1 (占12/24)&lt;/el-col&gt;
  &lt;el-col :span="12"&gt;列2 (占12/24)&lt;/el-col&gt;
&lt;/el-row&gt;</div>
                    
                    <div class="result-box">
                        <el-row>
                            <el-col :span="12">
                                <div class="custom-col">
                                    <div class="col-label">列1</div>
                                    <div class="col-span">span="12" (50%)</div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="custom-col">
                                    <div class="col-label">列2</div>
                                    <div class="col-span">span="12" (50%)</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                
                <div class="demo-card">
                    <h3 class="demo-title">示例1B：不等宽三列布局 (8:8:8)</h3>
                    <p class="demo-desc">三列各占8份，即各占33.33%宽度</p>
                    
                    <div class="code-block">
&lt;el-row&gt;
  &lt;el-col :span="8"&gt;列1 (占8/24)&lt;/el-col&gt;
  &lt;el-col :span="8"&gt;列2 (占8/24)&lt;/el-col&gt;
  &lt;el-col :span="8"&gt;列3 (占8/24)&lt;/el-col&gt;
&lt;/el-row&gt;</div>
                    
                    <div class="result-box">
                        <el-row>
                            <el-col :span="8">
                                <div class="custom-col">
                                    <div class="col-label">列1</div>
                                    <div class="col-span">span="8" (33.3%)</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="custom-col">
                                    <div class="col-label">列2</div>
                                    <div class="col-span">span="8" (33.3%)</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="custom-col">
                                    <div class="col-label">列3</div>
                                    <div class="col-span">span="8" (33.3%)</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                
                <div class="demo-card">
                    <h3 class="demo-title">示例1C：混合宽度布局 (6:12:6)</h3>
                    <p class="demo-desc">三列分别占6份、12份、6份，即25%、50%、25%宽度</p>
                    
                    <div class="code-block">
&lt;el-row&gt;
  &lt;el-col :span="6"&gt;列1 (占6/24)&lt;/el-col&gt;
  &lt;el-col :span="12"&gt;列2 (占12/24)&lt;/el-col&gt;
  &lt;el-col :span="6"&gt;列3 (占6/24)&lt;/el-col&gt;
&lt;/el-row&gt;</div>
                    
                    <div class="result-box">
                        <el-row>
                            <el-col :span="6">
                                <div class="custom-col">
                                    <div class="col-label">列1</div>
                                    <div class="col-span">span="6" (25%)</div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="custom-col">
                                    <div class="col-label">列2</div>
                                    <div class="col-span">span="12" (50%)</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="custom-col">
                                    <div class="col-label">列3</div>
                                    <div class="col-span">span="6" (25%)</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            
            <!-- 示例2：响应式布局 -->
            <div class="section responsive-demo">
                <h2 class="section-title">2. 响应式布局（如您登录页面中的用法）</h2>
                
                <div class="demo-card">
                    <h3 class="demo-title">示例2A：响应式断点设置</h3>
                    <p class="demo-desc">在不同屏幕尺寸下设置不同的列宽，这是您登录页面中的用法：</p>
                    
                    <div class="code-block">
&lt;el-col 
  :xs="24" 
  :sm="12" 
  :md="12" 
  :lg="12" 
  :xl="12"
&gt;
  <!-- 内容 -->
&lt;/el-col&gt;</div>
                    
                    <div class="result-box">
                        <p><strong>解释：</strong></p>
                        <ul style="padding-left: 20px; margin-top: 10px; line-height: 1.8;">
                            <li><strong>:xs="24"</strong> - 在超小屏幕 (&lt;768px) 下占24份（100%宽度，单列显示）</li>
                            <li><strong>:sm="12"</strong> - 在小屏幕 (≥768px) 下占12份（50%宽度）</li>
                            <li><strong>:md="12"</strong> - 在中等屏幕 (≥992px) 下占12份（50%宽度）</li>
                            <li><strong>:lg="12"</strong> - 在大屏幕 (≥1200px) 下占12份（50%宽度）</li>
                            <li><strong>:xl="12"</strong> - 在超大屏幕 (≥1920px) 下占12份（50%宽度）</li>
                        </ul>
                        
                        <p style="margin-top: 15px; color: #E6A23C; font-weight: bold;">
                            这意味着在手机上图片和表单会上下堆叠（各占全宽），在平板和桌面上会左右并排（各占半宽）。
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 示例3：列间距 -->
            <div class="section gutter-demo">
                <h2 class="section-title">3. 列间距（gutter属性）</h2>
                
                <div class="demo-card">
                    <h3 class="demo-title">示例3A：带间距的列布局</h3>
                    <p class="demo-desc"><code>&lt;el-row :gutter="20"&gt;</code> 表示列之间有20px的间距</p>
                    
                    <div class="code-block">
&lt;el-row :gutter="20"&gt;
  &lt;el-col :span="8"&gt;列1&lt;/el-col&gt;
  &lt;el-col :span="8"&gt;列2&lt;/el-col&gt;
  &lt;el-col :span="8"&gt;列3&lt;/el-col&gt;
&lt;/el-row&gt;</div>
                    
                    <div class="result-box">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="custom-col">
                                    <div class="col-label">列1</div>
                                    <div class="col-span">有20px间距</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="custom-col">
                                    <div class="col-label">列2</div>
                                    <div class="col-span">有20px间距</div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="custom-col">
                                    <div class="col-label">列3</div>
                                    <div class="col-span">有20px间距</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            
            <!-- 重要说明 -->
            <div class="note">
                <div class="note-title">📌 关键概念总结</div>
                <div class="note-content">
                    <p><strong>1. shadow="always" 的含义：</strong></p>
                    <ul>
                        <li><code>shadow="always"</code> - 卡片始终显示阴影（您的登录页面使用）</li>
                        <li><code>shadow="hover"</code> - 仅鼠标悬停时显示阴影</li>
                        <li><code>shadow="never"</code> - 从不显示阴影</li>
                    </ul>
                    
                    <p style="margin-top: 10px;"><strong>2. 栅格系统原理：</strong></p>
                    <ul>
                        <li>一行(<code>&lt;el-row&gt;</code>)被分为24等份</li>
                        <li>每列(<code>&lt;el-col&gt;</code>)的<code>span</code>属性指定它占据多少份</li>
                        <li><code>span="12"</code>表示占据一半宽度(12/24=50%)</li>
                        <li><code>span="8"</code>表示占据1/3宽度(8/24≈33.3%)</li>
                        <li><code>span="6"</code>表示占据1/4宽度(6/24=25%)</li>
                    </ul>
                    
                    <p style="margin-top: 10px;"><strong>3. 响应式断点：</strong></p>
                    <ul>
                        <li><code>xs</code> - 超小屏幕 (&lt;768px)：手机</li>
                        <li><code>sm</code> - 小屏幕 (≥768px)：平板</li>
                        <li><code>md</code> - 中等屏幕 (≥992px)：小桌面</li>
                        <li><code>lg</code> - 大屏幕 (≥1200px)：桌面</li>
                        <li><code>xl</code> - 超大屏幕 (≥1920px)：大桌面</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer">
                <p>Element Plus 栅格布局示例 | 24分栏系统 | 打开控制台调整窗口大小查看响应式效果</p>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const app = createApp({});
        
        // 使用Element Plus
        app.use(ElementPlus);
        
        app.mount('#app');
    </script>
</body>
</html>