bootstrap 页面分成三列_bootstrap响应式布局

哈喽，大家好呀，我是滑稽君。响应式布局是什么？其实就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。简单来说，我们希望网站在移动设备和PC上都能有一个好的呈现效果。当检测到设备不同时，我们可以给出不同的浏览、布局方案。

我们可以通过Bootstrap来实现，那么它又是什么呢？Bootstrap基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

视频讲解：

效果：

如视频演示，在大屏时我们的网页内容会自动放大填充，小屏时会舍弃右侧的博客分类来凸显主体。为了避免导航栏遮挡网页，在小屏时，副导航栏还会自动折叠，并且永远保持在正上方，方便你随时切换不同的页面。在面对不同的浏览情况时，我们的网站都给出了较好的浏览方案。

除此之外我们还对排版做了进一步的优化，替换文字标签、使文章内容居中显示，为内容增加边框。涉及到布局肯定需要一个方法来规定坐标。这样我们才可以在指定的位置放置我们想要的内容。bootstrap采用栅格来划分网页。

它把网页分成12份，你可以决定每个部分各自占多少栏，如上图你可以任意分配，但你要保证它们加起来为12。比如在blog_detail页面，我们规定博客主体占10份，左右各余1，即添加1个偏置量。其中md代表中等屏幕。它对屏幕大小的定义如下。md就是中等屏幕的类前缀。