响应式布局 bootstrap栅格系统

最新推荐文章于 2023-01-11 20:46:17 发布

Henry_ww

最新推荐文章于 2023-01-11 20:46:17 发布

阅读量455

点赞数

分类专栏：案例文章标签： css html bootstrap less 列表

本文链接：https://blog.csdn.net/Henry_ID/article/details/119086740

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

阿里百秀案例制作

1.1 技术选型

方案：我们采取响应式页面开发方案

技术：bootstrap框架

设计图：本设计图采用 1280px 设计尺寸

项目结构搭建

Bootstrap 使用四步曲：

创建文件夹结构
创建 html 骨架结构
引入相关样式文件
书写内容

在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- 1.引入 bootstrap.css -->
        <link rel="stylesheet" href="./boostrap/css/bootstrap.css" />
        <!-- 2.引入自己的 index.css -->
        <link rel="stylesheet" href="./css/index.css" />
        <title>阿里百秀</title>
    </head>
    <body>
        <!-- 1.响应式布局容器 -->
        <div class="container">
            <div class="row">
                <!-- 因为大屏跟中屏 比例都是 2：7：3 ，没有设置上限，所以用中屏 md 即可  -->
                <header class="col-md-2">
                    <!-- logo部分优化： <h1><a href="#"></a></h1>  -->
                    <h1 class="logo">
                        <a href="#">
                            <!-- 在极小屏幕显示 -->
                            <span class="visible-xs">阿里百秀</span>
                            <!-- 在极小屏幕隐藏 -->
                            <img class="hidden-xs" src="./images/logo.png" alt="" />
                        </a>
                    </h1>

                    <!-- 导航 -->
                    <ul class="nav">
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-camera"></i>生活馆</a>
                        </li>
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-picture"></i>自然汇</a>
                        </li>
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-phone"></i>科技潮</a>
                        </li>
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-gift"></i>奇趣事事</a>
                        </li>
                        <li>
                            <a href="#"><i class="glyphicon glyphicon-glass"></i>美食杰</a>
                        </li>
                    </ul>
                </header>
                <article class="col-md-7">
                    <!-- 图片列表 -->
                    <section class="pic">
                        <div class="left">
                            <img src="./upload/lg.png" alt="" />
                        </div>
                        <div class="right">
                            <a href="#"><img src="./upload/1.jpg" alt="" /></a>
                            <a href="#"><img src="./upload/2.jpg" alt="" /></a>
                            <a href="#"><img src="./upload/3.jpg" alt="" /></a>
                            <a href="#"><img src="./upload/4.jpg" alt="" /></a>
                        </div>
                    </section>
                    <!-- 新闻列表 -->
                    <section class="news">
                        <ul>
                            <li class="row">
                                <div class="col-md-9">
                                    <h3>又现酒窝夹笔盖新技能 城里人是不让人活了！</h3>
                                    <p class="text-muted hidden-xs">themebetter主题小秘发布2021-1-1</p>
                                    <p class="hidden-xs">
                                        继炫腹，炫锁骨以后，城里人又现新技能:酒窝夹笔盖！
                                        你们城里人活儿真好，又是反手摸肚脐炫腹，锁骨放硬币秀胸的，现在又来酒窝夹笔盖晒脸！别以为我不知道你们在想什么！！哼还让不让人活了 一大波美女晒颜值拼活
                                        介个真心赞啊，肤白貌美颜值高，酒窝笔盖夹得好。 小梨涡夹笔盖也是毫不费力呢！...
                                    </p>
                                    <p class="text-muted">阅读(2417)评论(1)赞 (18) 标签：炫富 / 酒窝 / 趣味生活</p>
                                </div>
                                <div class="col-md-3 hidden-sm hidden-xs">
                                    <img src="./upload/1.jpg" alt="" />
                                </div>
                            </li>
                        </ul>
                    </section>
                </article>
                <aside class="col-md-3">
                    <div class="boke">
                        <img src="./upload/zgboke.jpg" alt="" />
                    </div>
                    <div class="hot">
                        <button type="button" class="btn btn-danger">热搜</button>
                        <h4>欢迎加入中国博客联盟</h4>
                        <p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台....</p>
                    </div>
                </aside>
            </div>
        </div>
    </body>
</html>

index.less

li {
    list-style: none;
}
ul {
    margin: 0;
    padding: 0;
}
.shenglue {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 头部
header {
    .logo {
        background-color: #ff5e52;
        margin: 0;

        img {
            width: 100%;
        }
    }

    // 导航
    .nav a {
        background-color: #eee;
        color: #444;
        &:hover {
            background-color: #fff;
            color: #ff5e52;
        }
    }
}

// 文章
article {
    .pic {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        img {
            width: 100%;
            height: 100%;
        }
        .left,
        .right {
            width: calc((100% - 5px) / 2);
            height: 266px;
            // background-color: #0a0;
        }
        .right {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            // 多行
            align-content: space-between;
        }
        .right a {
            width: calc(50% - 5px);
            height: 128px;
            // background-color: #6cf;
        }
    }
    .news {
        li {
            border-bottom: 1px solid #ccc;
        }
        h3 {
            .shenglue;
        }
        img {
            width: 100%;
            margin: 10px;
        }
    }
}

aside {
    .boke img {
        width: 100%;
    }
    .hot {
        border: 1px solid #ccc;
        padding: 0 20px;
        margin-top: 20px;
        h4 {
            .shenglue;
        }
        p {
            font-size: 12px;
        }
    }
    .hot button {
        background-color: #ff6054;
        border: 0;
        border-radius: 0;
    }
}

// 媒体查询  小屏幕设置样式
@media screen and (min-width: 768px) and (max-width: 991px) {
    // 头部
    header {
        .logo {
            text-align: center;
        }
        .logo img {
            width: auto;
        }

        .nav {
            display: flex;
            li {
                flex: 1;
                text-align: center;
            }
        }
    }
}

// 超小屏幕设置样式
@media screen and (max-width: 767px) {
    header {
        .logo a {
            height: 50px;
            line-height: 50px;
            color: #fff;
            text-align: center;
            font-size: 14px;
            // 添加下划线  tdu
            text-decoration: underline;
        }

        .nav {
            display: flex;
            li {
                flex: 1;
                text-align: center;
                i {
                    display: block;
                    margin-bottom: 3px;
                }
            }
        }
    }

    article {
        .pic {
            flex-wrap: wrap;
            .left,
            .right {
                width: 100%;
            }
        }
        .news h3 {
            font-size: 16px;
        }
    }
}

Henry_ww

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
响应式布局 bootstrap栅格系统

阿里百秀案例制作3.1 技术选型方案：我们采取响应式页面开发方案技术：bootstrap框架设计图：本设计图采用 1280px 设计尺寸项目结构搭建Bootstrap 使用四步曲：创建文件夹结构创建 html 骨架结构引入相关样式文件书写内容...
复制链接

扫一扫