Go2 CSS Classes

一个强大的CSS工具类提示扩展，帮助你快速编写HTML类名。当你输入"go2-"时，会自动提示对应的CSS工具类。

功能特点

• 智能提示：输入"go2-"时自动提示所有可用的工具类
• 中文提示：所有类名都有详细的中文说明
• 实时预览：提示中包含具体的CSS代码示例
• 丰富的工具类集合

支持的工具类

1. 布局类

   • go2-flex: 弹性布局
   • go2-grid: 网格布局
   • go2-block: 块级元素
   • go2-inline: 内联元素
   • go2-inline-block: 内联块级元素
   • go2-hidden: 隐藏元素

2. Flex布局工具

   • go2-flex-center: 居中对齐
   • go2-flex-between: 两端对齐
   • go2-flex-around: 环绕对齐
   • go2-flex-wrap: 允许换行
   • go2-flex-row: 横向排列
   • go2-flex-col: 纵向排列

3. 间距类

   • go2-m-{1-100}: 外边距
   • go2-p-{1-100}: 内边距
   • go2-mt/mr/mb/ml-{1-100}: 单个方向边距
   • go2-mx/my-{1-100}: 水平/垂直方向边距

4. 文本样式

   • go2-text-{12-72}: 文本大小（12px到72px）
   • go2-text-{color}: 文本颜色（primary/success/warning等）
   • go2-text-center/left/right: 文本对齐

5. 颜色系统

   • go2-text-{color}: 文本颜色
   • go2-bg-{color}: 背景颜色
   • go2-border-{color}: 边框颜色

   支持的颜色：

   • primary: #1890ff
   • success: #52c41a
   • warning: #faad14
   • danger: #ff4d4f
   • white: #ffffff
   • black: #000000
   • gray: #666666

6. 其他实用工具

   • go2-rounded-{1-20}: 圆角
   • go2-w/h-{0-100}: 宽度/高度（百分比）
   • go2-overflow-hidden/auto/scroll: 溢出处理
   • go2-pointer/not-allowed: 鼠标样式

使用示例

<!-- 居中的卡片布局 -->
<div class="go2-flex go2-flex-center go2-w-100 go2-h-100">
  <div class="go2-bg-white go2-p-20 go2-rounded-8 go2-text-center">
    <h1 class="go2-text-24 go2-text-primary">标题</h1>
    <p class="go2-text-16 go2-text-gray go2-mt-10">内容描述</p>
  </div>
</div>

<!-- 两端对齐的导航栏 -->
<nav class="go2-flex go2-flex-between go2-items-center go2-p-16 go2-bg-primary">
  <div class="go2-text-white go2-text-20">Logo</div>
  <div class="go2-flex go2-flex-center">
    <a class="go2-text-white go2-mx-10 go2-pointer">首页</a>
    <a class="go2-text-white go2-mx-10 go2-pointer">关于</a>
  </div>
</nav>

安装

1. 在VS Code中打开扩展面板（Ctrl+Shift+X）
2. 搜索"Go2 CSS Classes"
3. 点击安装

使用方法

1. 在HTML文件中的class属性内输入"go2-"
2. 等待提示出现
3. 使用上下键选择需要的类名
4. 按Enter确认选择

贡献

欢迎提交问题和建议到我们的GitHub仓库。

许可证

MIT

Working with Markdown

Note: You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:

• Split the editor (Cmd+\ on macOS or Ctrl+\ on Windows and Linux)
• Toggle preview (Shift+CMD+V on macOS or Shift+Ctrl+V on Windows and Linux)
• Press Ctrl+Space (Windows, Linux) or Cmd+Space (macOS) to see a list of Markdown snippets

For more information

• Visual Studio Code's Markdown Support
• Markdown Syntax Reference

Enjoy!