HTML代码

                    <div class="container">
                        <header class="row">头部内容</header>
                        <main class="row">主体内容</main>
                        <footer class="row">底部内容</footer>
                    </div>
                

案例解释

在这个案例中，我们使用了Bootstrap的栅格系统来创建响应式布局。通过使用容器（container）和行（row），我们可以很容易地组织页面内容。

头部、主体和脚部都使用了一个行（row），并通过列（col）来组织内容。通过使用不同的列数（例如col-md-4和col-md-8），我们可以控制每个部分在栅格中的位置。