使用BootStrap进行响应式布局案例

最新推荐文章于 2023-05-25 21:07:27 发布

乞力马扎罗的雪CYF

最新推荐文章于 2023-05-25 21:07:27 发布

阅读量7.3k

点赞数 5

分类专栏：计算机捣鼓文章标签： BootStrap 响应式布局

本文链接：https://blog.csdn.net/CHENYUFENG1991/article/details/48793465

版权

（1）首先下载BootStrap,把bootstrap.min.css拷贝到项目中。

（2）新建style.css,实现代码如下：

.row{

    margin-bottom: 20px;


}

.row .row{

    margin-top: 10px;
    margin-bottom: 0px;

}

[class*="col-"]{
    padding-top: 15px;
    padding-bottom: 15px;
    /*background-color: #eee;*/
    /*background-color: rgba(86,61,124,.15);*/
    /*border: 1px solid #dddddd;*/
    /*border: 1px solid rgba(86, 61, 214,.2);*/

}

（3）新建index.html文件，实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet">

    <link href="style.css" type="text/css" rel="stylesheet">
</head>