Bootstrap2-Bootstrap基本架构

最新推荐文章于 2020-05-13 22:44:45 发布

i_idleness

最新推荐文章于 2020-05-13 22:44:45 发布

阅读量1.3k

点赞数 1

分类专栏： Bootstrap初学

本文链接：https://blog.csdn.net/i_idleness/article/details/80162823

版权

Bootstrap初学专栏收录该内容

3 篇文章 0 订阅

订阅专栏

响应式设计
- 实现原理
栅格系统

响应式设计

响应式设计可以使网页适应于不同的设备，如智能手机、平板电脑、TV、PC显示器、iPhone和Android手机，包括横向、纵向的屏幕。——《Bootstrap实战》

实现原理

同比例缩放元素尺寸（不使用绝对宽度的元素、网页字体也不使用绝对大小）
调整页面结构布局(通过Media Query来获取屏幕大小以获取适合的显示方式)

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

    #pagewrap {
        width: 94%;
    }
    #content {
        width: 65%;
    }
    #sidebar {
        width: 30%;
    }

}

/* for 700px or less */
@media screen and (max-width: 700px) {

    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: auto;
        float: none;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

    #header {
        height: auto;
    }
    h1 {
        font-size: 24px;
    }
    #sidebar {
        display: none;
    }

}

这里写图片描述

栅格系统

初识

row 比包含在.container中
只有 col可以作为row的直接子元素，网页内容应当放在col中

Bootstrap设备优先化栅格

Bootstrap3.0遵循设备优先的原则来确定当前结构的布局效果，因此我们可以在相同的结构中设置不同的设备类型，以实现在不同设备在呈现不同的布局效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.row > div {
    background-color: #eee;
    height: 100px;
    border: solid 1px red;
}
</style>
</head>
<body>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
        <div class="visible-xs">col-xs-12</div>
        <div class="visible-sm">col-sm-6</div>
        <div class="visible-md">col-md-4</div> 
        <div class="visible-lg">col-lg-2</div>                 
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
        <div class="visible-xs">col-xs-12</div>
        <div class="visible-sm">col-sm-6</div>
        <div class="visible-md">col-md-4</div>
        <div class="visible-lg">col-lg-2</div>     
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
        <div class="visible-xs">col-xs-12</div>
        <div class="visible-sm">col-sm-6</div>
        <div class="visible-md">col-md-4</div>
        <div class="visible-lg">col-lg-2</div>     
    </div>
</div>
</body>
</html>

这里写图片描述

固定栅格和流式栅格

固定栅格 container 声明宽度
流式栅格 container-fluid 不声明宽度，填满屏幕

列偏移

通过类名 col-md-offset-n来说明向右偏移n个列

i_idleness

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap2-Bootstrap基本架构

响应式设计实现原理栅格系统初识Bootstrap设备优先化栅格固定栅格和流式栅格列偏移响应式设计响应式设计可以使网页适应于不同的设备，如智能手机、平板电脑、TV、PC显示器、iPhone和Android手机，包括横向、纵向的屏幕。——《Bootstrap实战》实现原理同比例缩放元素尺寸（不使用绝对宽度的元素、网页字体也不使用绝对大...
复制链接

扫一扫