min.css制作
使用 min.css 制作轻量级样式
min.css 是一个极简的 CSS 框架,专注于轻量化和快速加载。以下是如何使用 min.css 进行开发的步骤。
引入 min.css
通过 CDN 直接引入 min.css,只需在 HTML 文件的 <head> 部分添加以下链接:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/min.css@3.0.1/dist/min.css">
基本布局
min.css 提供简单的网格系统和基础样式。使用容器和行类名创建布局:
<div class="container">
<div class="row">
<div class="col-6">左侧内容</div>
<div class="col-6">右侧内容</div>
</div>
</div>
按钮样式
min.css 包含预设的按钮样式,通过类名即可应用:
<button class="btn">默认按钮</button>
<button class="btn btn-primary">主按钮</button>
<button class="btn btn-success">成功按钮</button>
表单元素
表单控件也经过简化,直接使用标准 HTML 标签即可获得一致样式:
<input type="text" placeholder="输入文本">
<select>
<option>选项1</option>
<option>选项2</option>
</select>
自定义样式
如需扩展 min.css,可以创建单独的 CSS 文件覆盖或添加新规则。例如增加自定义按钮:
.btn-custom {
background-color: #ff5722;
color: white;
}
响应式设计
min.css 内置基础响应式支持。针对不同屏幕尺寸可调整列宽:
<div class="col-12 col-md-6">在手机上占满宽度,在中等屏幕占一半</div>
实用工具类
包含常用的工具类如文本对齐、边距控制:
<p class="text-center">居中文本</p>
<div class="m-1">小边距</div>






