您现在的位置是：首页 > 前端

当前栏目

移动端笔记(8)之bootstrap案例

Bootstrap 案例笔记移动

2023-06-13 09:12:59 时间

bootstrap也是大概了解了,现在就是做一个案例,更加深入的学习它的使用.

整体划为三档.注意:bootstrap原先给我们的最大档位的宽度是1170px,但是我们的设计稿的宽度是1280px,所以需要我们手动增加一个档位.

看一下做完的效果:

页面的布局会随着屏幕的尺寸发生变化.

做的过程中也遇到了一些值得注意的地方.

1.在a链接中放了一个<img>标签,里面插入了图片,但是就无法自适应,图片不能正常显示. 解决办法:<img>标签的父亲a链接的大小是自适应的,会随着屏幕大小发生改变,所以我们给img一个宽度:100%即可.

2.我们在设置单独的样式时,没有效果.解决:可能是权重问题导致的,可以增加类名/!important, 而且要注意不要直接给"col-..."的类名直接修改样式.

3.我们使用bootstrap里面的字体图标,将类名直接拿来用就可以了,它的实现原理就是对我们取类名的盒子使用::before伪元素选择器,所以我们再修改样式时要使用::before选出.

4.很多元素会自带内外边距,要注意小心,绿色的是padding,橙色的是margin.

完整代码:

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">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">


</head>

<body>
    <div class="container">
        <div class="row">
            <!-- header部分 左侧 -->
            <header class="col-md-2 ">
                <div class="logo">
                    <a href="#"><img src="./images/logo.png" alt="" class="hidden-xs"></a>
                    <span class="visible-xs">阿里百秀</span>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>

                    </ul>
                </div>
            </header>
            <article class="col-md-7">
                <!-- 新闻模块 中间-->
                <div class="news clearfix">
                    <ul>
                        <li>
                            <a href="#"><img src="./upload/lg.png" alt="">
                                <p>
                                    阿里百秀
                                </p>
                            </a>

                        </li>
                        <li> <a href="#"><img src="./upload/1.jpg" alt="">
                                <p>
                                    奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                </p>
                            </a></li>
                        <li><a href="#"><img src="./upload/1.jpg" alt="">
                                <p>
                                    奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                </p>
                            </a></li>
                        <li><a href="#"><img src="./upload/1.jpg" alt="">
                                <p>
                                    奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                </p>
                            </a></li>
                        <li><a href="#"><img src="./upload/1.jpg" alt="">
                                <p>
                                    奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                </p>
                            </a></li>
                    </ul>
                </div>
                <!-- 发表模块 中间-->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活馆 关于指甲的10个健康知识,你知道几个?</h3>
                            <p class="text-muted hidden-xs">xxx发布于205-5-14</p>
                            <p class="hidden-xs">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈</p>
                            <p class="text-muted">阅读(2464) 评论(1) 赞(18)</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs"><img src="./upload/2.jpg" alt=""></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活馆 关于指甲的10个健康知识,你知道几个?</h3>
                            <p class="text-muted hidden-xs">xxx发布于205-5-14</p>
                            <p class="hidden-xs">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈</p>
                            <p class="text-muted">阅读(2464) 评论(1) 赞(18)</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs"><img src="./upload/2.jpg" alt=""></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活馆 关于指甲的10个健康知识,你知道几个?</h3>
                            <p class="text-muted hidden-xs">xxx发布于205-5-14</p>
                            <p class="hidden-xs">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈</p>
                            <p class="text-muted">阅读(2464) 评论(1) 赞(18)</p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs"><img src="./upload/2.jpg" alt=""></div>
                    </div>
                </div>
            </article>
            <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="./upload/zgboke.jpg" alt="">
                </a>
                <a href="#" class="hot">
                    <span class="btn btn-primary">热搜</span>
                    <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                    <p class="text-muted">哈哈哈哈哈哈红红火火恍恍惚惚红红火火恍恍惚发发发</p>
                </a>
            </aside>
        </div>
    </div>
</body>

</html>

CSS部分:

body {
    background-color: #f5f5f5;
}
.container {
    background-color: #fff;
}
ul li {
    list-style: none;

}
ul {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    color: #666;
}
a:hover {
    text-decoration: none;
}
/* 手动修改container最大宽度 */
@media screen and (min-width:1280px){
    .container {
        width: 1280px;
    }
}
/* header部分 */
.logo a img {
    display: block;
    /* 要让图片宽度为100%,否则无法自适应 */
    /* width: 100%; */
    /* logo图片不需要缩放效果 */
    max-width: 100%;
    margin: 0 auto;
}
.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 18px;
}
header {
    padding: 0!important;
    background-color: #3795da;

}
.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;

}
.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
}
.nav a:hover {
    background-color: #fff;
    color: #333;
}  
.nav a::before {
    vertical-align: middle;
    margin-right: 5px;
} 
/* 当我们进入小屏和超小屏幕时,里面的li浮动起来并且宽度为20%. */
@media screen and (max-width:768px){
    .nav ul li{
        float: left;
        width: 20%;

    }
    .nav ul li a {
        font-size: 12px!important;
        /* color: chartreuse; */
    }
    .news ul li:nth-child(1) {
        width: 100%;
    }
    .news ul li:nth-child(n+2) {
        width: 50%;
    }
    .publish h3 {
        font-size: 14px;
    }
}
@media screen and (max-width:992px){
    .nav ul li {
        float: left;
        width: 20%;
    }
    .nav ul li a {
         font-size: 14px;
    }
    article {
        margin-top: 10px;
    }
}

.news ul li {
    float: left;
    width: 25%;
    height: 128px;
    padding-right: 10px;

}
.news li:nth-child(1) {
    height: 266px;
    width: 50%;
}
.news a {
    position: relative;
    display: block;
    /* 增加a的点击范围 */
    width: 100%;
    height: 100%;
}
.news a img {
    width: 100%;
    /* 高也要改! */
    height: 100%;
    vertical-align: middle;
}
/* 当我们处于超小屏幕,第一个li的宽度为100% */
.news li {
    /* background-color: blue; */
    margin-bottom: 10px;
}
.news li a p {
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 41px;
    width: 100%;
    /* background-color: brown; */
    background-color: rgba(0,0,0,.5);
    font-size: 12px;
    color: #fff;
    /* p自带一个margin值 */
    margin: 0;
    padding: 5 10px;

}
.news li:nth-child(1) p {
    line-height: 41px;    
    font-size: 20px;
    padding-left: 10px;
}
.publish {
    /* 上面的news没有高度,所以要清除浮动 */
    border-top: 1px solid #ccc;
}
.publish img {
    width: 100%;
}
.pic {
    margin-top: 10px;
}
.publish .row {
    border-bottom: 1px solid #ccc;
    padding: 10px 0px;
}
.pic img {
    width: 100%;
}
.banner {
    width: 100%;
}
.banner img {
    width: 100%;
}
.hot {
    display: block;
    border: 1px solid #ccc;
    margin-top: 20px;
    padding: 0 20px 20px;
}
.btn-primary {
    border-radius: 0;
    margin-bottom: 20px;
}
.hot p {
    font-size: 12px;
}

猜你喜欢

1.LVS有哪些负载均衡模式并分别与nginx有什么区别
凝血相关基因免疫相关分析发13分+SCI
实现Oracle中内外表同步的策略（oracle 内表外表）
ORA-27366: job “string.string” is not running ORACLE 报错故障修复远程处理
详解PostgreSql 别名区分大小写的相关问题
行解决MySQL远程连接终端命令（远程连接mysql命令）
linux下安装redis图文详细步骤
运维技巧之CRT button标签
工作流入门教程（flowable框架）
Linux下发布网页的完美实现（linux发布网页）
CreatePipe、CreateProcess函数

zl程序教程

当前栏目

移动端笔记(8)之bootstrap案例

相关文章