Bootstrap 3.3.7学习笔记5

Bootstrap 3.3.7学习笔记5

---

ul & ol

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

这就是bootstrap中基本对unordered list 和 ordered list中的描述了，可见只是在margin上做了一些变化。另外一些对ul和ol做了另外说明的地方：

/*eliminate the bottom margin of last list child inside blockquote*/
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
/*all ul in alter class should have no bottom margin*/
.alert > p,
.alert > ul {
  margin-bottom: 0;
}

---

list-unstyled去点列表

这个类长成这样：1，内测左边距清空; 2，去点。

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

<ol>
    <li>有序项目列表一</li>
    <li>有序项目列表二
        <ol class="list-unstyled">
            <li>有序二级项目列表一</li>
            <li>有序二级项目列表二
                <ul>
                    <li>无序三级项目列表一</li>
                    <li>无序三级项目列表二</li>
                    <li>无序三级项目列表三</li>
                </ul>
            </li>
            <li>有序二级项目列表三</li>
        </ol>
    </li>
    <li>有序项目列表三</li>
</ol>

三级嵌套的一个有序无序去点列表结构，长成这样

1. 有序项目列表一
2. 有序项目列表二
   1. 有序二级项目列表一
   2. 有序二级项目列表二
      • 无序三级项目列表一
      • 无序三级项目列表二
      • 无序三级项目列表三
   3. 有序二级项目列表三
3. 有序项目列表三

---

list-inline同行列表

定义如下：

.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

1内测左边距为0; 2外侧margin-5px;3去点;4该类内部所有li标签都同行显示，左右俩内测边距都为5px
Here’s an example:

<ul class="list-inline">
    <li>Digital Image Processing</li>
    <li>Robotics</li>
    <li>Senior Design</li>
    <li>Computer Network</li>
</ul>

• Digital Image Processing
• Robotics
• Senior Design
• Computer Network

---

definition list定义列表

dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}

这个1.42857143又出现了，第一次出现是在body里为了保证行高为20px。因为没有什么特殊的地方，直接看一个示例吧：

<dl>
    <dt>Sessions</dt>
    <dd>He is Spanky.</dd>
    <dt>Jeff</dt>
    <dd>He is rascal.</dd>
</dl>

---

horizontal definition list

这是一个只有在屏幕宽度大于768px是才有效的类，它的主要效果就是让definition list水平排列，而不是像默认的那样一行一行的。

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    /*overflow content will be cut and hidden*/
    overflow: hidden;
    /*no floting element is allowed in the left side*/
    clear: left;
    text-align: right;
    /*use ellipsis to replace the overflow text*/
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    /*give 180px wide empty space between term and definition*/
    margin-left: 180px;
  }
}