Primer CSS 选择菜单 列表项

Primer CSS 是 GitHub 官方出品的 CSS 库，主要用于构建易于使用的、响应式布局的 Web 界面。其中的选择菜单与列表项功能强大且易于使用，是 Web 应用开发中不可或缺的一部分。

Primer CSS 选择菜单

Primer CSS 的选择菜单提供了多种样式，在不同的场景中使用，方便用户选择。最基本的选择菜单可以通过以下 HTML 代码创建：

<label for="fruit">Choose a fruit:</label>
<select id="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

使用 Primer CSS，可以通过将 .select-menu 类名添加到 <select> 元素来设定选择菜单的样式。而要改变选择菜单的外观和行为，则可以通过添加其他选择器类名。例如，添加 .select-menu-modal 类名来将选择菜单呈现为模态框，或添加 .select-menu-left 类名来将选择菜单靠左对齐。例如，以下代码演示了如何将选择菜单呈现为模态框：

<select class="select-menu select-menu-modal" id="my-select" name="fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

Primer CSS 列表项

Primer CSS 的列表项提供了多种样式和排列方式，可以帮助用户更好地呈现和组织数据。例如，以下是创建一个有序列表的示例代码：

<ol class="list-style-ordered">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

使用 .list-style-ordered 类名可以显示数字序号，也可以使用 .list-style-unordered 类名来显示圆点（默认类型）。要更改列表项的样式，如字体大小、颜色、背景色等，可以使用其他的 Primer CSS 选择器类名，例如添加 .color-bg-info,.color-bg-success来调整颜色，添加 .text-bold 来使字体加粗。示例如下：

<ul class="list-style-unordered">
    <li class="color-bg-info text-bold">First item</li>
    <li class="color-bg-success">Second item</li>
    <li>Third item</li>
</ul>

以上是对 Primer CSS 选择菜单和列表项的简单介绍，Primer CSS 的官方文档中还有更多有用的类名和样式介绍，有需要的程序员可以前往官方文档查看。