mcpField
B
bootstrap-content

bootstrap-content

github.com/sjnims设计与 UI42 次安装
代码仓库

关于 bootstrap-content

面向使用 Bootstrap 5.3 构建页面的开发者，介绍排版、图像、表格和图形样式。内容还涵盖 Reboot 基础样式与响应式字号。

主要功能

  1. 01Reboot 浏览器样式规范化
  2. 02标题与文本工具类
  3. 03响应式字号
  4. 04图像与图形模式
  5. 05表格样式与变体

适用场景

  1. 01统一页面内容的排版
  2. 02设置响应式图像与图形
  3. 03为不同布局设置表格样式

安装

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

$npx skills add https://github.com/sjnims/bootstrap-expert --skill bootstrap-content

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

examples/
figures-patterns.html
images-patterns.html
reboot-elements.html
tables.html
typography-patterns.html
references/
figures-reference.md
images-reference.md
reboot-reference.md
tables-reference.md
typography-reference.md

详细介绍

Bootstrap 5.3 内容

Bootstrap 基于 Reboot 提供排版、图像、表格和其他内容样式。Reboot 是一套经过规范化的基础样式。

Reboot

Bootstrap Reboot 会规范化浏览器的默认样式，确保跨浏览器渲染一致。它为后续的排版和内容样式奠定基础。

代码元素

<p>Use <code>&lt;section&gt;</code> for page sections.</p>


<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line.&lt;/p&gt;</code></pre>


<var>y</var> = <var>m</var><var>x</var> + <var>b</var>


<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Or type <kbd>cd</kbd> to change directory.</p>


<kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></kbd>


<samp>This text is meant to be sample output from a program.</samp>
地址
<address>
  <strong>Company Name</strong><br>
  123 Main Street<br>
  City, State 12345<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>
水平线

<hr>


<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">


<hr class="my-5">
缩写
<p><abbr title="Hypertext Markup Language">HTML</abbr> is the foundation of the web.</p>


<p><abbr title="Cascading Style Sheets" class="initialism">CSS</abbr> for styling.</p>

请参阅 references/reboot-reference.md，了解 CSS 变量、页面默认样式、原生字体栈和 Sass 自定义选项。

排版

标题

应用 Bootstrap 样式的标准 HTML 标题：

<h1>h1. Bootstrap heading</h1>  
<h2>h2. Bootstrap heading</h2>  
<h3>h3. Bootstrap heading</h3>  
<h4>h4. Bootstrap heading</h4>  
<h5>h5. Bootstrap heading</h5>  
<h6>h6. Bootstrap heading</h6>  


<p class="h1">h1 styled paragraph</p>
<p class="h3">h3 styled paragraph</p>
展示标题

尺寸更大、样式更鲜明的标题：

<h1 class="display-1">Display 1</h1>  
<h1 class="display-2">Display 2</h1>  
<h1 class="display-3">Display 3</h1>  
<h1 class="display-4">Display 4</h1>  
<h1 class="display-5">Display 5</h1>  
<h1 class="display-6">Display 6</h1>
引言文本

突出显示段落：

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>
行内文本元素
<mark>Highlighted text</mark>
<del>Deleted text</del>
<s>Strikethrough (no longer accurate)</s>
<ins>Inserted text</ins>
<u>Underlined text</u>
<small>Fine print</small>
<strong>Bold text</strong>
<em>Italicized text</em>
文本工具类

<p class="fs-1">fs-1 text (2.5rem)</p>
<p class="fs-2">fs-2 text (2rem)</p>
<p class="fs-3">fs-3 text (1.75rem)</p>
<p class="fs-4">fs-4 text (1.5rem)</p>
<p class="fs-5">fs-5 text (1.25rem)</p>
<p class="fs-6">fs-6 text (1rem)</p>


<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text</p>


<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style text</p>


<p class="lh-1">Line height 1</p>
<p class="lh-sm">Small line height (1.25)</p>
<p class="lh-base">Base line height (1.5)</p>
<p class="lh-lg">Large line height (2)</p>


<p class="text-decoration-underline">Underlined</p>
<p class="text-decoration-line-through">Line through</p>
<p class="text-decoration-none">No decoration</p>
文本对齐
<p class="text-start">Left aligned (LTR)</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned (LTR)</p>


<p class="text-sm-start text-md-center text-lg-end">
  Responsive alignment
</p>
文本换行与溢出
<p class="text-wrap">Wrapping text</p>
<p class="text-nowrap">No wrap text</p>
<p class="text-truncate" style="max-width: 200px;">
  Truncated text with ellipsis...
</p>
<p class="text-break">Break long words</p>
块引用
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>
列表

<ul class="list-unstyled">
  <li>No bullets</li>
  <li>On this list</li>
</ul>


<ul class="list-inline">
  <li class="list-inline-item">First</li>
  <li class="list-inline-item">Second</li>
  <li class="list-inline-item">Third</li>
</ul>
文本转换
<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>
等宽字体
<p class="font-monospace">This is in monospace</p>
重置颜色

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
自定义标题

为标题添加次要的淡化文本：

<h3>
  Fancy display heading
  <small class="text-body-secondary">With faded secondary text</small>
</h3>

<h1 class="display-4">
  Display heading
  <small class="text-body-secondary">Secondary text</small>
</h1>
响应式字体大小

Bootstrap 5 默认启用 RFS（响应式字体大小），会根据视口尺寸自动调整 font-size。请参阅 references/typography-reference.md，了解 RFS 详情和 Sass 自定义选项。

图像

响应式图像
<img src="..." class="img-fluid" alt="Responsive image">
图像缩略图
<img src="..." class="img-thumbnail" alt="Thumbnail">
图像对齐
<img src="..." class="float-start" alt="Left aligned">
<img src="..." class="float-end" alt="Right aligned">


<img src="..." class="d-block mx-auto" alt="Centered">
Picture 元素
<picture>
  <source srcset="large.jpg" media="(min-width: 992px)">
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <img src="small.jpg" class="img-fluid" alt="Responsive">
</picture>

表格

基本表格
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>
表格变体
<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>
表格样式

<table class="table table-striped">...</table>


<table class="table table-striped-columns">...</table>


<table class="table table-hover">...</table>


<tr class="table-active">...</tr>


<table class="table table-bordered">...</table>


<table class="table table-borderless">...</table>


<table class="table table-sm">...</table>


<table class="table table-striped table-hover table-bordered">...</table>
表头变体

<table class="table">
  <thead class="table-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>


<table class="table">
  <thead class="table-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>
表格分组分隔线

在表格分区之间添加更粗的边框：

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1</th>
      <td>John</td>
    </tr>
  </tbody>
</table>
表格标题

<table class="table">
  <caption>List of users</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>


<table class="table caption-top">
  <caption>List of users</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
表格页脚
<table class="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$10.00</td>
    </tr>
  </tbody>
  <tfoot class="table-group-divider">
    <tr>
      <th>Total</th>
      <td>$10.00</td>
    </tr>
  </tfoot>
</table>
响应式表格

<div class="table-responsive">
  <table class="table">...</table>
</div>


<div class="table-responsive-md">
  <table class="table">...</table>
</div>
垂直对齐
<table class="table align-middle">
  <tr class="align-bottom">
    <td class="align-top">...</td>
  </tr>
</table>

图表

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>


<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">Right-aligned caption.</figcaption>
</figure>

更多资源

参考文件
  • references/reboot-reference.md - CSS 变量、页面默认样式、原生字体栈、Sass 自定义
  • references/typography-reference.md - 完整的文本工具类、RFS 详情、Sass 自定义
  • references/images-reference.md - 完整的图像类参考和 Sass 自定义
  • references/tables-reference.md - 完整的表格类参考
  • references/figures-reference.md - 完整的图表类参考
示例文件
  • examples/reboot-elements.html - code、kbd、var、samp、abbr、hr 元素
  • examples/typography-patterns.html - 排版、标题、文本工具类
  • examples/images-patterns.html - 响应式图像和对齐
  • examples/tables.html - 表格样式和变体
  • examples/figures-patterns.html - 图表和标题模式

评论

支持 Markdown