BootStrap4根据设备选择显示效果

前言

BootStrap4作为最出色的前端响应式框架之一，能够根据不同的设备，调整页面显示效果。但是，仅仅依靠调整原有元素的大小、排列，很难有好的呈现效果和用户体验。因此对于电脑及手机端用户，要根据设备的不同适当更换页面的内容，来达到更好的页面呈现效果及用户体验。

案例

先来看一个小案例，这是同一个网页分别在电脑及手机端的显示效果。(源码在最后)

图一 电脑端显示效果

图二 手机端显示效果

分析

根据不同设备的两种显示效果可以看到，在电脑及手机端中有相同的部分，也有不同的部分。

相同的是中间内容部分，不同的是电脑端只显示其独有的顶部导航栏，而手机端显示其独有的顶部轮播图及底部导航栏。

也就是说这个页面包含两个导航栏、一个轮播图、一个内容展示区域。并且根据不同的设备，选择显示其中的一部分。

实现

引入BootStrap4，并添加响应式标签。

BootStrap4官方下载及使用说明：

https://v4.bootcss.com/docs/getting-started/download/

添加响应式标签：

首先将所有模块写入页面中(借用BootStrap框架事半功