zoukankan      html  css  js  c++  java
  • Bootstrap3 排版-列表

    无序列表

    排列顺序无关紧要的一列元素。

    <ul>
      <li>...</li>
    </ul>

    有序列表

    顺序至关重要的一组元素。

    <ol>
      <li>...</li>
    </ol>

    无样式列表

    移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

    <ul class="list-unstyled">
      <li>...</li>
    </ul>

    内联列表

    通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

    <ul class="list-inline">
      <li>...</li>
    </ul>

    描述

    带有描述的短语列表。

    <dl>
      <dt>...</dt>
      <dd>...</dd>
    </dl>

    水平排列的描述

    .dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

    <dl class="dl-horizontal">
      <dt>...</dt>
      <dd>...</dd>
    </dl>

    自动截断

    通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。


    —–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
    —–乐于分享,共同进步!
    —–更多文章请看:http://blog.csdn.net/duruiqi_fx


  • 相关阅读:
    hdu 2680(最短路)
    hdu 1548(最短路)
    hdu 1596(最短路变形)
    hdu 1546(dijkstra)
    hdu 3790(SPFA)
    hdu 2544(SPFA)
    CodeForces 597B Restaurant
    CodeForces 597A Divisibility
    CodeForces 598E Chocolate Bar
    CodeForces 598D Igor In the Museum
  • 原文地址:https://www.cnblogs.com/hainange/p/6153755.html
Copyright © 2011-2022 走看看