bootstrap -- css -- 文字、列表

柔光的暖阳◎ 2021-12-16 01:21 329阅读 0赞

## 文字 ##

<small></small>：呈现小号字体效果。

<big></big>:程序大号字体效果

<abbr></abbr>: 标签指示简称或缩写。使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。

<address> </address>:在网页上显示联系信息。由于 <address> 默认为 display:block;，您需要使用标签来为封闭的地址文本添加换行。

<table> 
 <tbody> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
   <th>实例</th> 
  </tr> 
  <tr> 
   <td>.lead</td> 
   <td>使段落突出显示</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_lead" rel="nofollow">尝试一下</a></td> 
  </tr> 
  <tr> 
   <td>.small</td> 
   <td>设定小文本 (设置为父文本的 85% 大小)</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_small" rel="nofollow">尝试一下</a></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-left</strong></span></td> 
   <td><span style="color:#008000;"><strong>设定文本左对齐</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-left" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-center</strong></span></td> 
   <td><span style="color:#008000;"><strong>设定文本居中对齐</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-left" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-right</strong></span></td> 
   <td><span style="color:#008000;"><strong>设定文本右对齐</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-left" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-justify</strong></span></td> 
   <td><span style="color:#008000;"><strong>设定文本对齐,段落中超出屏幕部分文字自动换行</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-left" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-nowrap</strong></span></td> 
   <td><span style="color:#008000;"><strong>段落中超出屏幕部分不换行</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-left" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-lowercase</strong></span></td> 
   <td><span style="color:#008000;"><strong>设定文本小写</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-lowercase" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-uppercase</strong></span></td> 
   <td><span style="color:#008000;"><strong>设定文本大写</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-lowercase" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#008000;"><strong>.text-capitalize</strong></span></td> 
   <td><span style="color:#008000;"><strong>设定单词首字母大写</strong></span></td> 
   <td><span style="color:#008000;"><strong><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_text-lowercase" rel="nofollow"><span style="color:#008000;">尝试一下</span></a></strong></span></td> 
  </tr> 
  <tr> 
   <td>.initialism</td> 
   <td>显示在 &lt;abbr&gt; 元素中的文本以小号字体展示</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_abbr2" rel="nofollow">尝试一下</a></td> 
  </tr> 
  <tr> 
   <td>.blockquote-reverse</td> 
   <td>设定引用右对齐</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_blockquote2" rel="nofollow">尝试一下</a></td> 
  </tr> 
 </tbody> 
</table>

## 列表 ##

Bootstrap 支持有序列表、无序列表和定义列表。

*  **有序列表**：有序列表是指以数字或其他有序字符开头的列表。
 *  **无序列表**：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class *.list-unstyled* 来移除样式。您也可以通过使用 class *.list-inline* 把所有的列表项放在同一行中。
 *  **定义列表**：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 *定义术语*，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 class *dl-horizontal* 把 <dl> 行中的属于与描述并排显示。

<table> 
 <tbody> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
   <th>实例</th> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.list-unstyled</td> 
   <td>移除默认的列表样式，列表项中左对齐 ( &lt;ul&gt; 和 &lt;ol&gt; 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_list-unstyled" rel="nofollow">尝试一下</a></td> 
  </tr> 
  <tr> 
   <td>.list-inline</td> 
   <td>将所有列表项放置同一行</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_list-inline" rel="nofollow">尝试一下</a></td> 
  </tr> 
  <tr> 
   <td>.dl-horizontal</td> 
   <td>该类设置了浮动和偏移，应用于 &lt;dl&gt; 元素和 &lt;dt&gt; 元素中，具体实现可以查看实例</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_dl-horizontal" rel="nofollow">尝试一下</a></td> 
  </tr> 
  <tr> 
   <td>.pre-scrollable</td> 
   <td>使 &lt;pre&gt; 元素可滚动 scrollable</td> 
   <td><a href="http://www.w3cschool.cc/try/tryit.php?filename=trybs_ref_txt_pre2" rel="nofollow">尝试一下</a></td> 
  </tr> 
 </tbody> 
</table>

下面的实例演示了这些类型的列表：

<!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 列表</title>
       <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="/scripts/jquery.min.js"></script>
       <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <h4>有序列表</h4>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>
    <h4>无序列表</h4>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
    <h4>未定义样式列表</h4>
    <ul class="list-unstyled">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
    <h4>内联列表</h4>
    <ul class="list-inline">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
    <h4>定义列表</h4>
    <dl>
      <dt>Description 1</dt>
      <dd>Item 1</dd>
      <dt>Description 2</dt>
      <dd>Item 2</dd>
    </dl>
    <h4>水平的定义列表</h4>
    <dl class="dl-horizontal">
      <dt>Description 1</dt>
      <dd>Item 1</dd>
      <dt>Description 2</dt>
      <dd>Item 2</dd>
    </dl>
    
    </body>
    </html>

转载于:https://www.cnblogs.com/hf8051/p/4453233.html