Bootstrap-03-响应式布局

Bootstrap的响应式布局原理

什么是响应式布局

所谓响应式布局：为了保证不同分辨率的终端的正常布局——一个网站能够兼容多个终端（不是为每个终端做一个特定的版本）旨在为不同终端的用户提供更加舒适的界面和更好的用户体验

bootstrap的响应式布局-例子

bootstrap针对不同设备的分辨率设置不同的阈值，xs、sm、md、lg
同样的内容对于笔记本这样的设备，以及在小屏幕上会有不一样的效果
比如以下的html：

	<div class="container">
            <div class="row">
                <div class="col-md-3" style="background-color: seagreen;">3</div>
                <div class="col-md-3" style="background-color: sienna;">3</div>
                <div class="col-md-3" style="background-color: slateblue;">3</div>
                <div class="col-md-3" style="background-color: steelblue;">3</div>
            </div>
        </div>

笔记本界面：

iphonex

在bootstrap中，在html中为多种尺寸的屏幕设置样式，在配合bootstrap提供的媒体查询，能够轻松地实现响应式布局

	<div class="container">
            <div class="row">
                <div class="col-md-3 col-xs-6" style="background-color: seagreen;">3</div>
                <div class="col-md-3 col-xs-6" style="background-color: sienna;">3</div>
                <div class="col-md-3 col-xs-6" style="background-color: slateblue;">3</div>
                <div class="col-md-3 col-xs-6" style="background-color: steelblue;">3</div>
            </div>
        </div>