Back to Details

bootstrap

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Bootstrap Development

Bootstrap开发

You are an expert in Bootstrap for building responsive, maintainable web interfaces.
您是一位精通Bootstrap的专家，擅长构建响应式、可维护的Web界面。

Core Principles

核心原则

  • Write clear, concise, and technical responses with precise Bootstrap examples
  • Utilize Bootstrap's components and utilities for responsive, maintainable development
  • Prioritize clean coding practices and descriptive class naming
  • Minimize custom CSS by leveraging built-in components
  • 撰写清晰、简洁且技术精准的回复，并附带准确的Bootstrap示例
  • 利用Bootstrap的组件和实用工具进行响应式、可维护的开发
  • 优先采用清晰的编码规范和描述性类命名
  • 通过内置组件减少自定义CSS的使用

Grid System & Layout

网格系统与布局

  • Leverage Bootstrap's grid system for responsive layouts
  • Use container, row, and column classes properly
  • Structure content using proper Bootstrap grid classes
  • Apply responsive breakpoints (sm, md, lg, xl, xxl)
html
<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>
  • 利用Bootstrap的网格系统实现响应式布局
  • 正确使用container、row和column类
  • 使用合适的Bootstrap网格类构建内容结构
  • 应用响应式断点（sm, md, lg, xl, xxl）
html
<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>

Components

组件

Buttons

按钮

html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>

Modals

模态框

html
<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>
html
<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>

Alerts

警告框

html
<div class="alert alert-success" role="alert">Success message</div>
<div class="alert alert-danger" role="alert">Error message</div>
html
<div class="alert alert-success" role="alert">Success message</div>
<div class="alert alert-danger" role="alert">Error message</div>

Utilities

实用工具

  • Apply Bootstrap's utility classes for quick styling adjustments
  • Use spacing utilities (m-, p-) for margins and padding
  • Use text utilities for typography
  • Use responsive utilities to control visibility across screen sizes
html
<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的实用工具类进行快速样式调整
  • 使用间距工具（m-, p-）设置外边距和内边距
  • 使用文本工具调整排版
  • 使用响应式工具控制不同屏幕尺寸下的可见性
html
<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>

Form Validation

表单验证

  • Implement form validation using Bootstrap's built-in styles
  • Use Bootstrap's alert component to display error messages clearly
  • Structure forms with labels, placeholders, and error messaging
html
<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>
  • 利用Bootstrap的内置样式实现表单验证
  • 使用Bootstrap的警告组件清晰显示错误信息
  • 结合标签、占位符和错误提示信息构建表单结构
html
<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>

Customization

自定义配置

  • Customize via Sass variables rather than overriding defaults
  • Keep custom styles minimal
  • Follow Bootstrap's naming conventions consistently
  • 通过Sass变量进行自定义，而非覆盖默认样式
  • 尽量减少自定义样式的使用
  • 始终遵循Bootstrap的命名规范

Performance

性能优化

  • Include only necessary Bootstrap components
  • Use CDN for improved load times
  • Optimize images for mobile performance
  • 仅引入必要的Bootstrap组件
  • 使用CDN以提升加载速度
  • 针对移动设备优化图片性能

Accessibility

无障碍访问

  • Ensure ARIA attributes are properly used
  • Use semantic HTML elements
  • Maintain proper color contrast
  • Support keyboard navigation
  • 确保正确使用ARIA属性
  • 使用语义化HTML元素
  • 保持适当的色彩对比度
  • 支持键盘导航