手机，一个和我们生活的智能设备，已经普及到千家万户。每个人手机里的应用千奇百态，有游戏、浏览器等那些看似精美的图标。就好似每个人都有一个梦，总想把自己推广出来。那么，有需求，就有市场，目前，各个互联网公司都推出了APP和微信程序小软件，有社交，棋牌，各式各样的花样都有，先来学习一下怎么给APP布局吧！
一、删格系统，一个你想不到的布局模式
有人会问，为什么我们要先学会布局呢，电脑上的那些网页上显示出来的框架和内容不都是大同小异的吗？其实，大家想过没有，我们常见的屏幕订主要有哪几种？下面就让我来告诉你：
1、手持设备：我们个人用的手机，ipad等，手持设备的大小一般分为、小屏、中屏
小于等于766像素的，我们把它叫做小屏幕：表现形式是
.col-sm-*(*代表把小屏的内容分几份，一份占几格，一共有12格)
大于768像素，小于991的 ，叫做中屏幕：
.col-md-*
大于992像素的，我们把它叫做大屏幕：
.col-lg-*
二、例：插入四张图片，利用响应式布局，中屏的时候显示四张，小屏的时候显示两张（注：制作响应式布局要有container容器row），程序代码如下：
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6"> //中屏分四份，每份占三格，小屏分两份，每份占两格
<img src="images/1.jpg" style="width:171px;height:180px" class="img-thumbnail"> //设置图片的路径，样式
</div>
<div class="col-md-3 col-sm-6">
<img src="images/3.jpg" style="width:171px;height:180px" class="img-thumbnail">
</div>
<div class="col-md-3 col-sm-6">
<img src="images/4.jpg" style="width:171px;height:180px"class="img-thumbnail">
</div>
<div class="col-md-3 col-sm-6">
<img src="images/4.jpg"style="width:171px;height:180px"class="img-thumbnail">
</div>
</div>
</div>
运行程序，打开谷歌浏览的开发都工具，点击左上角手机图标，这时你就会看到
中屏程序显示为：
小屏程序显示为：
网友评论