Bootstrap是一款很受欢迎的前端框架,我们可以利用它快速、轻松的制作响应式网页。

Bootstrap将设备划分成四种,分别是:超小设备手机(<768px),小型设备平板电脑(≥768px),中型设备台式电脑(≥992px),大型设备台式电脑(≥1200px)。

这四种设备有各自的Class前缀,如下表所示:

bootstrap设备class前缀对应表

Bootstrap将页面分成12列,我们可以通过设置Div所占页面的列数来设置其宽度。

比如,有一个Div,我想让它在手机上占满整个屏幕,那么它在手机设备上就需要占据12列,Class属性就可以写成.col-xs-12。

如果我们想在平板电脑设备上显示2个并排的Div,那么1个Div就需要占据页面的一半,也就是6列,这2个Div的Class属性就可以写成.col-xs-6。

如果我们想让网页在手机上一行显示一个Div,在平板电脑上一行显示两个Div,达到响应式的效果,我们就可以将上面的语句写在一起,就像这样:class=”col-xs-12 col-sm-6″。

下面代码所展示的网页效果是:在手机上一行显示一列,在平板电脑上一行显示两列,在台式电脑上一行显示四列,达到响应式网页的初步效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>响应式网页</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <style type="text/css">
            .rectangle{
                background:blue;
                height:250px;
                margin-bottom:10px;
                text-align:center;
                line-height:250px;
            }
            .textStyle{
                color: #FFFFFF;
                font-size:40px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="col-xs-12">
                <div class="rectangle">
                    <span class="textStyle">头部</span>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="rectangle"></div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="rectangle"></div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="rectangle"></div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="rectangle"></div>
            </div>
            <div class="col-xs-12">
                <div class="rectangle">
                    <span class="textStyle">尾部</span>
                </div>
            </div>
        </div>
    </body>
</html>

注意在使用前需要先引入Bootstrap。

网页在手机设备上的显示效果
网页在手机设备上的显示效果
网页在平板电脑设备上的显示效果
网页在平板电脑设备上的显示效果
网页在台式电脑设备上的显示效果
网页在台式电脑设备上的显示效果
 
返回顶部