创新实训——基于Bootstrap的网站响应式布局设计

  前言：在以往的web前端开发过程中，网页的最终运行环境一般是普通的PC，也就是最为常见的中型电脑屏幕，但在众多移动设备快速发展的今天，特别是智能手机的普及使得开发人员在前端开发过程中不得不考虑网页在不同分辨率，不同形状的显示屏下运行的兼容性，这就引入了web开发领域中的一个重要词汇——响应式。

  响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求，实现不同屏幕分辨率的终端上浏览网页的不同展示方式，使得网页在PC端和手机端均可以完美的展现其内容，具有自适应性。

  所以在这次创新实训的web前端开发过程中，为了我们的系统最终在PC端和手机端都能完美的运行，我引入了响应式布局设计。

    通过这两天的学习，我总结出了以下两种实现网站响应式布局的方法。

 

一．使用基于Bootstrap的栅格系统

     Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

 

1. 栅格系统的工作原理

（1）行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列内补（padding）。 
（2）通过行&