下载掌阅APP，畅读海量书库
立即打开
传统节日的形成过程，是一个国家或民族的历史、文化长期积淀成为一种情感内蕴深厚的庆典的过程。它是一种文化现象、一种文化标志和民族文化情感认同的体现。本案例使用Bootstrap 4实现一个介绍我国传统节日的响应式网页，以增强读者对传统节日的认同感。在页面顶部设置一般网站中常用的轮播图，利用网格布局使页面根据屏幕尺寸的变化展示不同的排版与布局。
本案例页面主要由头部轮播图、主体部分的节日信息标签页等构成。利用Bootstrap 4插件制作轮播图，轮播图由幻灯片、标识图标以及控制按钮等组成。节日信息标签页主要由节日标签以及节日信息介绍等组成。传统节日介绍页面结构如图2.10所示。
图2.10 传统节日介绍页面结构
1. 主体结构代码
首先，新建一个HTML文件，在<body>标签中定义一个<div>父容器块，并设置类名为container。
其次，在父容器块中分别添加轮播图和标签页这2个子容器块。轮播图由幻灯片、标识图标以及控制按钮等组成。标签页子容器块由类名为nav-tabs的标签页和类名为tab-content的标签内容组成，标签内容包括图片和节日信息等，具体代码如例2.4所示。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
6. <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
7. <script src="jquery-3.5.1.slim.js"></script>
8. <title>中国传统节日</title>
9. <style type="text/css">
10. .tab-pane img{
11. /* 设置标签页内容中的图片适应父元素宽高 */
12. width: 100%;
13. height: 100%;
14. }
15. </style>
16. </head>
17. <body>
18. <div id="box" class="container">
19. <!-- 轮播图区域 -->
20. <div id="Carousel" class="row carousel slide" data-ride="carousel">
21. <!--标识图标-->
22. <ol class="carousel-indicators">
23. <li data-target="#Carousel" data-slide-to="0" class="active"></li>
24. 以下省略顺序为1、2、3的标示图标构建代码<li>
25. </ol>
26. <!--幻灯片-->
27. <div class="carousel-inner col-12">
28. <div class="carousel-item active">
29. <img src="images/qm.jpg" class="d-block w-100" alt="">
30. <div class="carousel-caption">
31. <h5>中国清明节</h5>
32. <p>祭祖</p>
33. </div>
34. </div>
35. 以下省略“中国端午节”“中国中秋节”“中国元宵节”的幻灯片构建代码<div>
36. </div>
37. <!--控制按钮-->
38. <a class="carousel-control-prev" href="#Carousel" data-slide="prev">
39. <span class="carousel-control-prev-icon"></span>
40. </a>
41. <a class="carousel-control-next" href="#Carousel" data-slide="next">
42. <span class="carousel-control-next-icon"></span>
43. </a>
44. </div>
45. <!-- 标签页区域 -->
46. <div class="row" id="nav" style="margin-left: 10px">
47. <!-- 标签页 -->
48. <ul class="nav nav-tabs col-6 col-xl-6 col-lg-6 col-md-12 col-sm-12" id="myTab">
49. <li ><a class="nav-link active" href="#qingming" data-toggle="tab">清明节</a></li>
50. 以下省略“端午节”“中秋节”“元宵节”的标签项构建代码<li>
51. <!-- 标签内容 -->
52. <div id="tab-content" class="tab-content col-xl-6 col-lg-6 col-md-12col-12">
53. <div role="tabpanel" class="active tab-pane" id="qingming">
54. <p class="text-success">清明节，又称踏青节、行清节、三月节、祭祖节等，扫墓祭祖与踏青郊游是清明节的两大礼俗主题，这两大传统礼俗主题在中国自古传承，至今不辍。</p>
55. <img src="images/sz1.jpg" alt="">
56. </div>
57. 以下省略“端午节”“中秋节”“元宵节”的内容构建代码<div>
58. </div>
59. </div>
60. </div>
61. <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
62. </body>
63. </html>
2. CSS代码
设置Bootstrap 4的组件样式时，应将自定义样式文件置于Bootstrap 4的基础样式文件之后，使标签内容中的图片适应父元素的宽高变化，具体代码如下。
1. <style type="text/css">
2. .tab-pane img{
3. /* 设置标签页内容中的图片适应父元素宽高 */
4. width: 100%;
5. height: 100%;
6. }
7. </style>
Bootstrap 4默认引入响应式布局，该布局具有自动适应屏幕尺寸，可根据屏幕尺寸自动布局的特性。Bootstrap 4设计了多种网格类，网格类采用col-type-*命名法命名，根据网格宽度的不同，网格类主要分为col-、col-sm-、col-md-、col-lg-和col-xl-这5种，具体的网格知识将在第3章进行详细介绍。
在上述代码中，主要使用Bootstrap 4的轮播图插件和标签页样式实现传统节日介绍页面。当屏幕处于大屏状态时，标签项与标签内容水平分布，显示效果如图2.11所示。
图2.11 水平分布
当屏幕为小屏或中屏时，节日标签与标签内容垂直分布，显示效果如图2.12所示。
图2.12 垂直分布