Bootstrap里的文件分别表示什么？都有什么用处？

Bootstrap里的文件有以下几种：

bootstrap.js

bootstrap.css

bootstrap.min.js

bootstrap.min.css

bootstrap-responsive.min.css

bootstrap-responsive.css

它们分清渣禅别的作用为：

bootstrap.js：是bootstrap的所有js指令的总和。

bootstrap里面所有的js效果，都是由bootstrap.js控制的。

bootstrap.js供开发的时候进行调试用。

bootstrap.css：是未压缩的，完整的bootstrap样式表，供开发的时候进行调试使用。

bootstrap.min.js：是压缩的bootstrap样式表，在部署网站的时引用。

bootstrap-responsive.min.css：是bootstrap-responsive.css的压缩梁哪版，在部署网站的时引用。

bootstrap-responsive.css：是答尘对bootstrap框架应用了响应式布局之后所需要的CSS样式表，

bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用 bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和陵拆正bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这尺悔个文件，就没必要引用bootstrap.css了御蚂 bootstrap-responsive.css 这个是在对bootstrap框架应用了响应式布局之后所需要的CSS样式表，如果你的网站项目不准备做响应式设计，就不需要引用这个CSS。 bootstrap-responsive.min.css 和bootstrap.min.css的作用是一样的，是bootstrap-responsive.css的压缩版 bootstrap.js 这个是bootstrap的灵魂所在，是bootstrap的所有js指令的集合，你看到bootstrap里面所有的js效果，都是由这个文件控制的，这个文件也是一个未经压缩的版本，供开发的时候进行调试用 bootstrap.min.js 是bootstrap.js的压缩版，内容和bootstrap.js一样的，但是文件大小会小很多，在部署网站的时候就可以不引用bootstrap.js，而换成引用这个文件了

bootstrap的多级列表可以使用基于bootstrap的 metronic。制作后效果如下：

源码如下：

<div class="tree well">

<ul>

<li>

 <span><i class="glyphicon glyphicon-folder-open"></i>Parent</span><a href="">Goes somewhere</a>

 <ul>

  <li>

    <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span><a href="">Goes somewhere</a>

   <ul>

    <li>

      <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>

    </li>则敏

   </ul>

  </li>

  <li>

    <span><i class="glyphicon glyphicon-minus-sign"></i>Child</span><a href="">Goes somewhere</a>

   <ul>

    <li>

      <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>

    </li>

    <li>

      <span><i class="glyphicon glyphicon-minus-sign"></i>Grand Child</span><a href="">Goes somewhere</a>

     <ul>

      <li>

        <span><i class="glyphicon glyphicon-minus-sign"></i>Great Grand Child</span><a href="">Goes somewhere</a>

         <ul>

          <li>

            <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span><a href="">Goes somewhere</a>

          </li>

          <孙让枝li>

            <span><i class="glyphicon glyphicon-leaf"></i>Great great Grand Child</span><a href="">Goes somewhere</a>

          </li>

          </ul>

      </li>

      <li>

        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span><a href="">Goes somewhere</a>

      </li>

      <li>

        <span><i class="glyphicon glyphicon-leaf"></i>Great Grand Child</span><a href="">Goes somewhere</a>

      </li>

     </ul>

    </li>

    <li>

      <span><i class="glyphicon glyphicon-leaf"></i>Grand Child</span><a href="">Goes somewhere</a>

    </li>

   </ul>

  </li>

 </ul>

</li>

<li>

 <span><i class="glyphicon glyphicon-folder-open"></i>Parent2</span><a href="">Goes somewhere</a>

 <ul>

  <li>

    <span><i class="glyphicon glyphicon-leaf"></i>Child</span><a href="">Goes somewhere</a>

    </li>

   </ul>

</li>

</ul>

</div>

====================================================

JavaScript代码：

$(function () {

$('.tree li:has(ul)').addClass('parent_li').find(' >span').attr('title', 'Collapse this branch')

$('.tree li.parent_li >span').on('click', function (e) {

  var children = $(this).parent('li.parent_li'滑饥).find(' >ul >li')

  if (children.is(":visible")) {

    children.hide('fast')

    $(this).attr('title', 'Expand this branch').find(' >i').addClass('icon-plus-sign').removeClass('icon-minus-sign')

  } else {

    children.show('fast')

    $(this).attr('title', 'Collapse this branch').find(' >i').addClass('icon-minus-sign').removeClass('icon-plus-sign')

  }

  e.stopPropagation()

})

})

=================================================

CSS样式表：

.tree {

min-height:20px

padding:19px

margin-bottom:20px

background-color:#fbfbfb

border:1px solid #999

-webkit-border-radius:4px

-moz-border-radius:4px

border-radius:4px

-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)

-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)

box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)

}

.tree li {

list-style-type:none

margin:0

padding:10px 5px 0 5px

position:relative

}

.tree li::before, .tree li::after {

content:''

left:-20px

position:absolute

right:auto

}

.tree li::before {

border-left:1px solid #999

bottom:50px

height:100%

top:0

width:1px

}

.tree li::after {

border-top:1px solid #999

height:20px

top:25px

width:25px

}

.tree li span {

-moz-border-radius:5px

-webkit-border-radius:5px

border:1px solid #999

border-radius:5px

display:inline-block

padding:3px 8px

text-decoration:none

}

.tree li.parent_li>span {

cursor:pointer

}

.tree>ul>li::before, .tree>ul>li::after {

border:0

}

.tree li:last-child::before {

height:30px

}

.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {

background:#eee

border:1px solid #94a0b4

color:#000

}

---