css - Bootstrap 中的字母列表

Question

我目前在表格中有按字母顺序排列的列表，我想使用 Bootstrap 将其放入列表中。我正在查看文档，找不到任何我喜欢的东西。做这个的最好方式是什么 ？我在想这样的事情......

左侧有 A、B、C 等，右侧列出组元素

我应该使用这个列表还是 Bootstrap 提供的其他东西？谢谢!

<ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
</ul>

Answer 1

在 HTML 中你可以使用 <ol>与 type属性，像这样:

<ol type="1|a|A|i|I">

表示编号类型:

• a表示小写字母，
• A表示大写字母，
• i表示小写罗马数字，
• I表示大写罗马数字，
• 1表示数字(默认)。

例子:

<ol type="1">
  <li>foo
  <li>bar
  <li>baz
</ol>

<ol type="a">
  <li>foo
  <li>bar
  <li>baz
</ol>

<ol type="A">
  <li>foo
  <li>bar
  <li>baz
</ol>

<ol type="i">
  <li>foo
  <li>bar
  <li>baz
</ol>

<ol type="I">
  <li>foo
  <li>bar
  <li>baz
</ol>

来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol#attr-type

或使用 CSS 和 list-style-type具有值的属性:

• lower-alpha或 lower-latin : 小写 ASCII 字母
• upper-alpha或 upper-latin : 大写 ASCII 字母
• lower-greek : 小写希腊字母
• upper-greek : 大写希腊字母

---

注意: list-style-type支持多个值，请参阅所有类型的示例(更多详细信息在 caniuse 中):

var values = [
  'disc', 'circle', 'square', 'decimal', 'cjk-decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-greek',
  'lower-alpha, lower-latin', 'upper-alpha, upper-latin', 'arabic-indic', 'armenian', 'bengali', 'cambodian', 'cjk-earthly-branch',
  'cjk-heavenly-stem', 'cjk-ideographic', 'devanagari', 'ethiopic-numeric', 'georgian', 'gujarati', 'gurmukhi', 'hebrew',
  'hiragana', 'hiragana-iroha', 'japanese-formal', 'japanese-informal', 'kannada', 'katakana', 'katakana-iroha', 'khmer',
  'korean-hangul-formal', 'korean-hanja-formal', 'korean-hanja-informal', 'lao', 'lower-armenian', 'malayalam', 'mongolian',
  'myanmar', 'oriya', 'persian', 'simp-chinese-formal', 'simp-chinese-informal', 'tamil', 'telugu', 'thai', 'tibetan',
  'trad-chinese-formal', 'trad-chinese-informal', 'upper-armenian', 'disclosure-open', 'disclosure-closed', '-moz-ethiopic-halehame',
  '-moz-ethiopic-halehame-am', 'ethiopic-halehame-ti-er', 'ethiopic-halehame-ti-et', 'hangul', 'hangul-consonant', 'urdu',
  '-moz-ethiopic-halehame-ti-er', '-moz-ethiopic-halehame-ti-et', '-moz-hangul', '-moz-hangul-consonant', '-moz-urdu'
];

var example = document.querySelector("#example");
var opts = document.querySelector("#opts");

opts.addEventListener("change", function (e) {
  console.log("change", e.target);
  example.style.listStyleType = e.target.value;
});

for (var i = 0, j = values.length; i < j; i++) {
  var value = values[i];

  var opt = document.createElement("label");
  
  var radio = document.createElement("input");
  radio.name = "list-type";
  radio.type = "radio";
  radio.value = value;
  
  var text = document.createTextNode(value);

  opt.appendChild(radio);
  opt.appendChild(text);

  opts.appendChild(opt);
}

#opts > label {
   float: left;
   width: 32%;
   height: 24px;
   margin: .5%;
   border-radius: .3em;
}

#opts > label:hover {
   background: #fcfcfc;
}

<ol id="example">
   <li>foo</li>
   <li>bar</li>
   <li>baz</li>
   <li>foo</li>
   <li>bar</li>
   <li>baz</li>
</ol>

<div id="opts"></div>