• 关于bootstrap--列表(ol、ul)


    1、list-unstyled :

    在<ol>(有序列表)</ol><ul>(无序列表)</ul>中加入class="list-styled"将前面的数字和符号去掉,bootstrap样式为:

    .list-unstyled 

    {

      padding-left: 0;

      list-style: none;

    }

    2、list-inline:

    在<ol>(有序列表)</ol><ul>(无序列表)</ul>中加入class="list-inline"变为横向列表,主要用作导航栏,bootstrap样式为:

    .list-inline

    {

      padding-left: 0; margin-left: -5px; list-style: none;

    }

    .list-inline > li

    {

      display: inline-block; padding-right: 5px; padding-left: 5px;

    }

    3、定义列表

    dl 
    {
        margin-top: 0;
        margin-bottom: 20px;
    }
    dt,
    dd 
    {
        line-height: 1.42857143;
    }
    dt
    {
        font-weight: bold;
    }
    dd 
    {
        margin-left: 0;
    }
    @media (min- 768px) {
    .dl-horizontal dt {
    float: left;
     160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
      }
    .dl-horizontal dd {
    margin-left: 180px;
      }
    }
     

    <dl class="dl-horizontal">

    <dt>我来测试一个标题,我来测试一个标题(标题加粗)</dt>
    <dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
    </dl>

    效果:

    (1)将dt设置了一个左浮动,并且设置了一个宽度为160px
    (2)将dd设置一个margin-left的值为180px,达到水平的效果
    (3)当标题宽度超过160px时,将会显示三个省略号

    3、预编译版本的Bootstrap将代码的样式单独提取出来:
    (1)LESS版本,请查阅code.less文件
    (2)Sass版本,请查阅_code.scss文件
    编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一列举。

    4、代码:&lt; 是小于号"<";  &gt;是大于号">"。

    5、pre-scrollable:<ol><div><ul>等标签高度超过340px,Y轴就会出现滚动条。

    .pre-scrollable { max-height: 340px; overflow-y: scroll; }。

    6、

  • 相关阅读:
    微信小程序购物商城系统开发系列-工具篇
    如何用js获取浏览器URL中查询字符串的参数
    Vue.js——vue-resource全攻略
    多个 ng-app 中 Controllers & Services 之间的通信
    前端分页功能的实现以及原理
    纯css实现轮播图
    最好的Angular2表格控件
    2017年要学习的三个CSS新特性
    Kafka数据安全性、运行原理、存储
    Hbase与hive集成与对比
  • 原文地址:https://www.cnblogs.com/shark1100913/p/5626390.html
Copyright © 2020-2023  润新知