利用BootStrap制作全平台响应式站点

知识点

1. CSS 相邻兄弟选择器 +
   相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
   相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
2. 手机字体图标：content: '\e958';
   电话字体图标：content: '\e942';
3. bootstrap最外层伸缩容器：class="container"
4. bootstrap伸缩布局并居中：d-flex justify-content-center align-items-center
5. jQuery.data(element,[key],[value])：在元素上存放数据,返回jQuery对象。
   例如：在index界面中

   <div class="carousel-item active" data-sm-img="images/slide_01_900x410.jpg" data-lg-img="images/slide_01_2000x410.jpg"></div>
   <div class="carousel-item" data-sm-img="images/slide_02_900x410.jpg" data-lg-img="images/slide_02_2000x410.jpg"></div>
   <div class="carousel-item" data-sm-img="images/slide_03_900x410.jpg" data-lg-img="images/slide_03_2000x410.jpg"></div>
   

   在 js中，可以通过

   $('.carousel-item').data('lg-img')
   

   获取路径值。
6. bootstrap中圆角rounded-circle
7. 可以使用order-*调整显示顺序
8. 伸缩布局两步走container+row

   <div class="container">
   	<div class="row">
   		***
   	</div>
   </div>
   

9. 可以利用offset设置偏移量调整位置
10. 将jQuery对象转换为js对象可以直接通过下标取
11. 轮播图可以通过.carousel('prev')和.carousel('next')触发前后滑动事件
12. jQuery中缩小元素查找范围

    let $ul = $("#lk_product .nav");
    let $allLis = $(".nav-item", $ul);
    

运行效果