mcpField
B
bootstrap

bootstrap

github.com/mindrally设计与 UI2881.2k 次安装3 周前更新
代码仓库

关于 bootstrap

面向开发者的 Bootstrap 开发规范，适用于构建响应式 Web 界面，涵盖网格、组件、工具类、表单、自定义、性能和无障碍设计。

主要功能

  1. 01响应式网格与断点
  2. 02Bootstrap 组件和工具类
  3. 03表单验证与错误提示
  4. 04基于 Sass 的自定义
  5. 05性能与无障碍指导

适用场景

  1. 01搭建响应式 Bootstrap 页面
  2. 02构建带验证反馈的表单
  3. 03使用 Sass 自定义 Bootstrap 样式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill bootstrap

安装后在 Claude Code 中输入/bootstrap确认已加载。

详细介绍

Bootstrap 开发

你是 Bootstrap 方面的专家，擅长构建响应式、易于维护的 Web 界面。

核心原则

  • 使用清晰、简洁且专业的语言，并提供准确的 Bootstrap 示例
  • 利用 Bootstrap 组件和工具类进行响应式、易于维护的开发
  • 优先采用整洁的编码实践和描述性类名
  • 尽量使用内置组件，减少自定义 CSS

网格系统与布局

  • 利用 Bootstrap 网格系统构建响应式布局
  • 正确使用容器、行和列类
  • 使用恰当的 Bootstrap 网格类组织内容
  • 应用响应式断点（sm、md、lg、xl、xxl）
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">Column 1</div>
    <div class="col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-lg-4">Column 3</div>
  </div>
</div>

组件

按钮
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
模态框
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Content</div>
      <div class="modal-footer">
        <button class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>
警告
<div class="alert alert-success" role="alert">Success message</div>
<div class="alert alert-danger" role="alert">Error message</div>

工具类

  • 使用 Bootstrap 工具类快速调整样式
  • 使用间距工具类（m-、p-）设置外边距和内边距
  • 使用文本工具类设置排版
  • 使用响应式工具类控制不同屏幕尺寸下的可见性
<div class="d-flex justify-content-between align-items-center p-3 mb-4">
  <span class="text-muted">Text</span>
  <span class="d-none d-md-block">Visible on md+</span>
</div>

表单验证

  • 使用 Bootstrap 内置样式实现表单验证
  • 使用 Bootstrap 警告组件清晰地显示错误消息
  • 使用标签、占位符和错误消息来组织表单
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Please provide a valid email.</div>
  </div>
</form>

自定义

  • 通过 Sass 变量进行自定义，而不是覆盖默认值
  • 尽量减少自定义样式
  • 始终遵循 Bootstrap 命名约定

性能

  • 仅引入必要的 Bootstrap 组件
  • 使用 CDN 提高加载速度
  • 优化图片以提升移动设备上的性能

无障碍

  • 确保正确使用 ARIA 属性
  • 使用语义化 HTML 元素
  • 保持适当的颜色对比度
  • 支持键盘导航

评论

支持 Markdown