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;  }}