108 lines
1.9 KiB
Plaintext
108 lines
1.9 KiB
Plaintext
// layouts.less 使用示例
|
||
// 这个文件展示了如何在页面中使用 common/layouts.less 中的布局方法
|
||
|
||
// 示例1: 使用Flex布局
|
||
.example-flex {
|
||
.flex-between; // 使用两端对齐布局
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
|
||
.item {
|
||
.flex-center; // 使用居中布局
|
||
width: 100px;
|
||
height: 100px;
|
||
background-color: #007aff;
|
||
color: white;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
// 示例2: 使用Grid布局
|
||
.example-grid {
|
||
.grid-responsive(4, 16px); // 使用响应式网格，4列，间距16px
|
||
padding: 20px;
|
||
|
||
.item {
|
||
height: 120px;
|
||
background-color: #ff9500;
|
||
border-radius: 8px;
|
||
|
||
&:nth-child(1) {
|
||
.grid-col(2); // 占据2列
|
||
}
|
||
}
|
||
}
|
||
|
||
// 示例3: 使用卡片布局
|
||
.example-card {
|
||
max-width: 400px;
|
||
margin: 20px auto;
|
||
|
||
.card(); // 使用基础卡片样式
|
||
|
||
.card-header {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.card-body {
|
||
.flex-column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.card-footer {
|
||
.flex-between;
|
||
}
|
||
}
|
||
|
||
// 示例4: 使用响应式布局
|
||
.example-responsive {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
|
||
.desktop-only {
|
||
.hidden-sm; // 在小屏幕上隐藏
|
||
width: 200px;
|
||
height: 200px;
|
||
background-color: #4cd964;
|
||
}
|
||
|
||
.mobile-only {
|
||
.visible-sm; // 只在小屏幕上显示
|
||
width: 100%;
|
||
height: 100px;
|
||
background-color: #ff3b30;
|
||
}
|
||
}
|
||
|
||
// 示例5: 使用间距工具类
|
||
.example-spacing {
|
||
.m-4; // margin: 16px
|
||
.p-6; // padding: 24px
|
||
background-color: #e9e9eb;
|
||
|
||
.child {
|
||
.mt-3; // margin-top: 12px
|
||
.mb-3; // margin-bottom: 12px
|
||
.px-4; // padding-left: 16px; padding-right: 16px
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
|
||
// 示例6: 使用页面布局
|
||
.example-page {
|
||
.page-with-header-footer;
|
||
|
||
.page-header {
|
||
.navbar-top;
|
||
}
|
||
|
||
.page-content {
|
||
.container-responsive;
|
||
}
|
||
|
||
.page-footer {
|
||
.navbar-bottom;
|
||
}
|
||
} |