BootStrap make full use of the platform responsive site

Knowledge Point

1. + CSS adjacent sibling selectors
   adjacent sibling selector (Adjacent sibling selector) select another element immediately after the element, and both have the same parent element.
   Adjacent sibling selector uses the plus sign (+), i.e., adjacent Brothers binding character (Adjacent sibling combinator).
2. Phone font icons: content: '\e958';
   Phone Fonts icon:content: '\e942';
3. bootstrap outermost telescopic container:class="container"
4. bootstrap layout and retractable center:d-flex justify-content-center align-items-center
5. jQuery.data(element,[key],[value]): Data is stored in the element returns jQuery object.
   For example: In the interface 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>
   

   In the js, you can

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

   Get the path value.
6. bootstrap in filletrounded-circle
7. You may be used order-*to adjust the display order
8. Retractable two-step layoutcontainer+row

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

9. It can be used offsetto set the offset amount adjusting position
10. Js jQuery object to convert the object can be taken directly by the subscript
11. Carousel Figure through .carousel('prev')and .carousel('next')around the trigger slip events
12. Look reduction element in jQuery

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

running result