Bootstrap框架

1、bootstrap框架

2、bootstrap使用总结

3、bootstrap用Less定制

---

1、bootstrap的官网：  https://v3.bootcss.com/css/ （不推荐，不明确） 或  菜鸟教程 ： http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html  （推荐这个）

2、bootstrap可以通过   可视化编辑器（在线工具），可以快速达到需要的html代码。http://www.25xt.com/html5css3/7342.html

　　　　　　　　　　　　干净简单的实用的可视化编辑器    http://www.runoob.com/try/bootstrap/layoutit/ （推荐菜鸟提供的这个，另外一个使用的bootstrap框架不一样的）

bootstrap使用总结

1、bootstrap之折叠  ：  https://www.cnblogs.com/kouchao/articles/6180695.html

　　

<!-- div的class="panel-group"代表这是一个折叠组 对于data-parent="#accordion"的都算是一个面板组 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <!-- 第一个面板 -->
  <div class="panel panel-default">
    <!-- 面板标题-->
    <div class="panel-heading" role="tab" id="headingOne">
      <!-- h4标题 -->
      <h4 class="panel-title">
        <!-- a 链接有一个 事件，collapse 折叠，对 href="#collapseOne"（id=collapseOne） 的对象造成影响 -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          第一个部分
        </a>
      </h4>
    </div>
    <!-- 折叠的部分 -->
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <!-- 折叠的内容 -->
      <div class="panel-body">
        这是面板一的内容
      </div>
    </div>
  </div>
  <!-- ...............第二个面板.................. -->
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">第二个部分</a>
      </h4>

    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        面板二的内容
      </div>
    </div>
  </div>
</div>

---

1、bootstrap用Less定制用法：

　　　　https://blog.csdn.net/woosido123/article/details/52778096

　　　　https://blog.csdn.net/LowKeySk/article/details/8282740