zoukankan      html  css  js  c++  java
  • bootstrap -- css -- 文字、列表

    文字

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

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

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

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

    描述实例
    .lead 使段落突出显示 尝试一下
    .small 设定小文本 (设置为父文本的 85% 大小) 尝试一下
    .text-left 设定文本左对齐 尝试一下
    .text-center 设定文本居中对齐 尝试一下
    .text-right 设定文本右对齐 尝试一下
    .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行 尝试一下
    .text-nowrap 段落中超出屏幕部分不换行 尝试一下
    .text-lowercase 设定文本小写 尝试一下
    .text-uppercase 设定文本大写 尝试一下
    .text-capitalize 设定单词首字母大写 尝试一下
    .initialism 显示在 <abbr> 元素中的文本以小号字体展示 尝试一下
    .blockquote-reverse 设定引用右对齐 尝试一下

    列表

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

    • 有序列表:有序列表是指以数字或其他有序字符开头的列表。
    • 无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
    • 定义列表:在这种类型的列表中,每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语,就像字典,这是被定义的属于(或短语)。接着,<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
    描述实例
         
    .list-unstyled 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) 尝试一下
    .list-inline 将所有列表项放置同一行 尝试一下
    .dl-horizontal 该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例 尝试一下
    .pre-scrollable 使 <pre> 元素可滚动 scrollable 尝试一下

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

    <!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>
  • 相关阅读:
    Lamp环境搭建
    jquery之下拉列表select
    jquery之radio
    php连接postgresql
    ipython的notebook
    python连接postgresql数据库
    django最简单表单入门
    css制作简单下拉菜单
    下拉列表简单操作
    css制作最简单导航栏
  • 原文地址:https://www.cnblogs.com/hf8051/p/4453233.html
Copyright © 2011-2022 走看看