• 39.响应式布局

    目录

    1  响应式布局原理

    2  Bootstrap

    2.1  下载Boootstrap

    2.2  引入Bootstrap

    2.3  使用Bootstrap

    2.4  Bootstrap的响应式布局容器

    2.5  Bootstrap的栅格系统

    2.5.1  正常使用

    2.5.2  份数小于12份

    2.5.3  份数大于12份

    2.5.4  行嵌套

    2.5.5  列嵌套

    2.5.6  列偏移

    2.5.7  列排序

    2.6  Bootrap的响应式隐藏与显示

    3  阿里百秀首页案例

    3.1  案例介绍

    3.2  代码

    3.2.1  html

    3.2.2  CSS

    3.3  效果

    响应式布局的特点是页面会根据宽度的不同，从而有不同的元素排列方法

    手机端

    平板端

    PC端

    1  响应式布局原理

    响应式布局可以划分为四个档，这四个档可以设置不同的布局方式

    • 宽度设置的比实际尺寸小的原因是两边留白会显得好看一点

    响应式布局首先需要一个布局容器，我们下面举个简单的例子

    我现在有一个大盒子和三个小盒子，三个小盒子的宽度为200px

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         @media screen and (min-width:700px) {
    11.             .container {
    12.                 width: 610px;
    13.             }
    14.         }
    15.  
    16.         @media screen and (max-width:700px) {
    17.             .container {
    18.                 width: 210px;
    19.             }
    20.         }
    21.  
    22.         div {
    23.             display: inline-block;
    24.             width: 200px;
    25.             height: 200px;
    26.             background-color: cyan;
    27.         }
    28.  
    29.         .container {
    30.             display: block;
    31.             background-color: red;
    32.             margin: 0 auto;
    33.         }
    34.     style>
    35. head>
    36.  
    37. <body>
    38.     <div class="container">
    39.         <div>div>
    40.         <div>div>
    41.         <div>div>
    42.     div>
    43.  
    44. body>
    45.  
    46. html>

    当页面宽度大于600px的时候，我将大盒子的宽度设置为610px，那么三个小盒子就会横着排

    当页面宽度小于600px的时候，我将大盒子的宽度设置为210px，那么三个小盒子就会横着排

    在这三个盒子中我们可以放我们需要的元素，大盒子我们叫做响应式布局容器，一般会将其类名命名为container

    2  Bootstrap

    Bootstrap是一个框架，可以帮我们快速搞定响应式布局，Bootstrap的官方中文网站地址 Bootstrap中文网

    Bootstrap的简介可以看一下这个 05-Bootstrap简介_哔哩哔哩_bilibili

    JS我们放在JS的专栏中讲，我们在这里只搞CSS

    2.1  下载Boootstrap

    我当前Boootstrap已经更新到5，我们直接使用最新的

    下载之后我们对其进行解压

    解压后里面有css与js

    如果你想快速使用Bootstrap中的样式，你可以下载这个

    下载解压后会有很多的demo

    我们打开headers，里面有html与css文件

    打开其中的index.html，发现其中有很多的头部样式

    这样你就可以直接拿去用了

    2.2  引入Bootstrap

    我们可以讲Bootstrap的入门模板复制到我们的html文件中

    部分BootStrap入门模板中有在模板中考虑到兼容性问题

    在我这个版本中没有关于IE的判断

    入门模板中主要就引入css与JS，我们下载好之后引入本地文件就可以了

    我们自己使用的时候像以前一样引入就可以了

    2.3  使用Bootstrap

    我们先搞一个按钮来看看

    点击组建，Buttons，然后我们复制Danger这个按钮到html中

    打开之后发现已经成功搞到了页面中

    这里它是通过类名搞到的这种样式

    这里就会涉及到一个问题，别的框架可能也会使用相同的类名，所以同一个网站，最好只使用一种框架

    如果你再加一个div，使用相同的类，样式相同

    如果你想对这个div进行小改动，那么你可以再加一个类对其进行修改

    2.4  Bootstrap的响应式布局容器

    在Bootstrap5中是这样定义的

    先看其中的两个，一个是.container多用于PC端布局，另一个.container-fluid这个是流式布局，多用于移动端布局

    • 其他版本会有不同，不过不重要，最后直接看效果就完了
    • 像.container-sm这种都是类前缀，我们下面说栅格系统的时候会提到

    引入后在不同的页面中容器会有不同的宽度

    2.5  Bootstrap的栅格系统

    栅格系统(grid systems)也叫网格系统，可以理解为把页面搞成一个一个的格子，然后往里面放元素

    Bootstrap的栅格定义是这样的，无论是大屏幕还是小屏幕都把页面分成12列

    • 这里是大于等于，如果你的sm以上的份数都没有变化的话，你直接写sm就行了

    2.5.1  正常使用

    我们下面简单用一下，在一行内搞四个小盒子，让其在大屏幕内一行占3份（一行占四个），让其在小屏幕内一张占6份（一行占两个）

    • row必须放在container中
    • col-lg与col-sm在container的截图中有提到，后面接份数

    在大屏幕中是这样的

    每一列会有15px的padding，如果不想使用这个padding可以通过CSS取消掉padding，如果你想给格子一个间隙的话不要对格子使用margin,你让给每一个格子里放一个盒子，对里面的盒子设置margin，像下面这样就是格子中有一个小盒子

    在小屏幕中是这样的

    份数可以自定义，我们再搞一行

    让第一个盒子占7份，第二个盒子占1份，最后的两个盒子格子占两份

    如果没有设置小屏幕的情况，那么它就会按照div的原始属性(自己独占一行)来显示

    2.5.2  份数小于12份

    如果一行内的元素份数加在一起不到12份，那么少了的那部分空间会放在末尾

    我们把第一个元素搞成6份

    剩的一份会在最后留出来

    2.5.3  份数大于12份

    我们把第一个元素搞成8份

    如果加下一个元素份数会超过12，那么下面的元素会自动折行

    2.5.4  行嵌套

    我想在第一个格子内再放两行，那么就可以这样写

    在当前版本行列最好交替使用，如果不交替使用就会变成这样

    相较于正常的行与列，连续使用行会明显向左移动一些

    2.5.5  列嵌套

    如果想再放两个列可以这样写

    2.5.6  列偏移

    我现在想搞两个盒子，都占5分，然后放在两侧，那么我可以这样写

    给第二个盒子偏移两份

    • 不同版本列偏移的类名不同

    用列偏移可以做水平居中

    中间的份数必须是偶数

    列偏移实际是做了一下盒子左侧的margin

    2.5.7  列排序

    使用order-序号进行列排序

    2.6  Bootrap的响应式隐藏与显示

    • hidden-lg这种应该已经在bootstrap5中弃用了

    我们简单用一下，让一号盒子只在md尺寸及以下中隐藏

    列隐藏没有问题，隐藏行是有问题的

    如果对行进行隐藏，在小的窗口下确实可以达到隐藏的效果

    但当显示的时候，列之间的比例关系会被破坏

    3  阿里百秀首页案例

    阿里百秀地址 阿里百秀

    我们就做到热门推荐那里就可以了

    3.1  案例介绍

    它从大到小的变化是这样的

    最大状态(xxl)，左中右比例大致为2:7:3

     较大状态(xl)，结构不变，页面两侧的空间逐渐消失，这里我们得知xl与xxl的结构是相同的，所以不需要对xxl单独设置份数

     大状态(lg)最右侧消失（要对右侧设置在lg以下消失），左侧与中侧大概3:9，其余无变化

    中等状态(md)左侧横着放在了最上面

    最小状态(sm)最上侧的一些信息消失，且不能够再进行缩小

     

    最后我们看一下移动端的情况，跟最小的情况差不多，我门就不做修改了

     我们制作的思路是这样的，先做大的，再一步一步修改小的

    3.2  代码

    我项目的结构是这样的，bootstrap-5.1.3-dist是将bootstrap直接解压后放里面的，bootstrap5中没有字体图标功能，所以字体图标使用的是icomoon

    一般来讲使用框架是不需要自己做初始化的，我习惯自己初始化一下，所以还是加上了

    3.2.1  html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport"
    8.         content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    9.     <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
    10.     <link rel="stylesheet" href="css/initialization.css">
    11.     <link rel="stylesheet" href="css/index.css">
    12.     <title>Documenttitle>
    13.     <style>
    14.         /* div[class*='row'] {
    15.             border: 1px solid red;
    16.         }
    18.         div[class*='col'] {
    19.             border: 1px solid red;
    20.         }
    22.         section[class*='row'] {
    23.             border: 1px solid red;
    24.         }
    26.         section[class*='col'] {
    27.             border: 1px solid red;
    28.         } */
    29.     style>
    30. head>
    31.  
    32. <body>
    33.     <div class="container">
    34.         <div class="row">
    35.             <section class="col-xl-2 left col-md-3">
    36.                 <div class="row head">div>
    37.                 <div class="link_row">
    38.                     <div class="row"><a href="#">📡 新闻a>div>
    39.                     <div class="row"><a href="#">📽 生活a>div>
    40.                     <div class="row"><a href="#">🌴 自然a>div>
    41.                     <div class="row"><a href="#">⌚️ 科技a>div>
    42.                     <div class="row"><a href="#">🎁 奇趣a>div>
    43.                     <div class="row"><a href="#">🍔 美食a>div>
    44.                 div>
    45.                 
    46.                 <form action="#" class="row">
    47.                     <input type="text" placeholder="输入关键字" class="col-md-8 d-none d-md-block">
    48.                     <input type="submit" value="搜索" class="col-md-4 d-none d-md-block">
    49.                 form>
    50.             section>
    51.  
    52.  
    53.             <section class="col-xl-7 col-md-9">
    54.                 <div class="middle">
    55.                     <div class="row middle_top">
    56.                         <div class="col-sm-6 d-none d-sm-block">
    57.                             <a href="#">
    58.                                 <img src="upload/百科营销.jpg" alt="">
    59.                                 <div class="one_line_mask">同步赞百科营销服务正式发布div>
    60.                             a>
    61.                         div>
    62.                         <div class="col-sm-3 d-none d-sm-block">
    63.                             <div class="row">
    64.                                 <a href="#">
    65.                                     <img src="upload/保安马云.jpg" alt="">
    66.                                     <div class="two_line_mask">奇了 成都一小区护卫长得像马云 市民纷纷求合影div>
    67.                                 a>
    68.                             div>
    69.                             <div class="row">
    70.                                 <a href="#">
    71.                                     <img src="upload/不雅照.jpeg" alt="">
    72.                                     <div class="two_line_mask">另类教育！外国老爸怒传女儿不雅照到Facebookdiv>
    73.                                 a>
    74.                             div>
    75.                         div>
    76.                         <div class="col-sm-3 d-none d-sm-block">
    77.                             <div class="row">
    78.                                 <a href="#">
    79.                                     <img src="upload/蛇吃蜈蚣.jpeg" alt="">
    80.                                     <div class="two_line_mask">震惊！巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽div>
    81.                                 a>
    82.                             div>
    83.                             <div class="row">
    84.                                 <a href="#">
    85.                                     <img src="upload/大熊猫.jpeg" alt="">
    86.                                     <div class="two_line_mask">竹子真的是大熊猫最爱吗？NO，国宝也吃肉div>
    87.                                 a>
    88.                             div>
    89.                         div>
    90.                     div>
    91.                     <div class="row">
    92.                         <p class="title">
    93.                             <span>一周热门排行span>
    94.                         p>
    95.                         <p>暂无文章！p>
    96.                     div>
    97.                     <div class="row middle_bottom">
    98.                         <p class="title">
    99.                             <span>热门推荐span>
    100.                         p>
    101.  
    102.                         <div class="col-sm-3 col-6">
    103.                             <a href="#">
    104.                                 <img src="upload/同步赞.jpg" alt="">
    105.                                 <p>自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务p>
    106.                             a>
    107.                         div>
    108.                         <div class="col-sm-3 col-6">
    109.                             <a href="#">
    110.                                 <img src="upload/签约仪式.jpg" alt="">
    111.                                 <p>鑫网传媒与万林在线战略合作仪式暨股东签约仪式在深举办p>
    112.                             a>
    113.                         div>
    114.                         <div class="col-sm-3 col-6">
    115.                             <a href="#">
    116.                                 <img src="upload/保安马云.jpg" alt="">
    117.                                 <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影p>
    118.                             a>
    119.                         div>
    120.                         <div class="col-sm-3 col-6">
    121.                             <a href="#">
    122.                                 <img src="upload/卫星拍地球.jpg" alt="">
    123.                                 <p>世界真美 令人惊叹 卫星拍地球风景地貌p>
    124.                             a>
    125.                         div>
    126.                     div>
    127.                 div>
    128.             section>
    129.  
    130.  
    131.             <section class="col-xl-3 right d-none d-xl-block">
    132.                 <div class="row"><img src="upload/中国博客联盟.jpg" alt="">div>
    133.                 <div class="row hot">
    134.                     <div class="hot_title">热搜div>
    135.                     <h4>欢迎加入中国博客联盟h4>
    136.                     <p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......p>
    137.                 div>
    138.                 <div class="row">
    139.                     <p class="title">
    140.                         <span>最新文章span>
    141.                     p>
    142.  
    143.                     <div class="col-xl-12 new_article_list">
    144.                         <a href="#" class="row">
    145.                             <div class="col-xl-8">
    146.                                 <div class="row article_title">自助发稿融媒体平台赞传媒正式上线，赠免费写稿服务div>
    147.                                 <div class="row">阅读(1905)div>
    148.                             div>
    149.                             <div class="col-xl-4">
    150.                                 <div class="row"><img src="upload/同步赞.jpg" alt="">div>
    151.                             div>
    152.                         a>
    153.  
    154.                         <a href="#" class="row">
    155.                             <div class="col-xl-8">
    156.                                 <div class="row article_title">鑫网传媒与万林在线战略合作仪式暨股东签约仪式在深举办div>
    157.                                 <div class="row">阅读(1650)div>
    158.                             div>
    159.                             <div class="col-xl-4">
    160.                                 <div class="row"><img src="upload/签约仪式.jpg" alt="">div>
    161.                             div>
    162.                         a>
    163.  
    164.  
    165.                         <a href="#" class="row">
    166.                             <div class="col-xl-8">
    167.                                 <div class="row article_title">奇了 成都一小区护卫长得像马云 市民纷纷求合影div>
    168.                                 <div class="row">阅读(10295)div>
    169.                             div>
    170.                             <div class="col-xl-4">
    171.                                 <div class="row"><img src="upload/保安马云.jpg" alt="">div>
    172.                             div>
    173.                         a>
    174.  
    175.  
    176.                         <a href="#" class="row">
    177.                             <div class="col-xl-8">
    178.                                 <div class="row article_title">世界真美 令人惊叹 卫星拍地球风景地貌div>
    179.                                 <div class="row">阅读(5397)div>
    180.                             div>
    181.                             <div class="col-xl-4">
    182.                                 <div class="row"><img src="upload/卫星拍地球.jpg" alt="">div>
    183.                             div>
    184.                         a>
    185.  
    186.                     div>
    187.  
    188.                 div>
    189.             section>
    190.         div>
    191.     div>
    192. body>
    193.  
    194. html>

    在布局的时候我们可以把网格画一下，这样哪里出了问题可以锁定要修改的位置

    3.2.2  CSS

    index.less

    1. // body {
    2. //     font-size: 14px;
    3. //     height: 3000px;
    4. // }
    5.  
    6. // 左侧
    7. .left {
    8.     background-color: #f6f6f6;
    9.     .head {
    10.         height: 120px;
    11.         background-color: rgb(255, 94, 82);
    12.         background-image: url(../images/阿里百秀_pc.png);
    13.         background-repeat: no-repeat;
    14.         background-position: center center;
    15.     }
    16.  
    17.     .link_row {
    18.         .row {
    19.             &:hover {
    20.                 background-color: rgb(255, 255, 255)
    21.             }
    22.     
    23.             a {
    24.                 height: 60px;
    25.                 line-height: 60px;
    26.                 font-size: 20px;
    27.                 text-indent: 15px;
    28.             }
    29.         }
    30.         
    31.     }
    32.  
    33.     form {
    34.         font-size: 20px;
    35.         margin-top: 50px;
    36.         height: 40px;
    37.         padding: 0px 5px;
    38.  
    39.         input[type='submit'] {
    40.             color: white;
    41.             background-color: rgb(254, 117, 107);
    42.             border-color: transparent;
    43.             text-align: center;
    44.         }
    45.     }
    46. }
    47.  
    48. // 中部
    49. .middle {
    50.     margin-left: 20px;
    51.     margin-right: 20px;
    52.     .middle_top {
    53.         height: 300px;
    54.         div[class*="col"] {
    55.             height: 100%;
    56.             .row {
    57.                 height: 50%;
    58.             }
    59.             a {
    60.                 width:100%;
    61.                 height:100%;
    62.                 .one_line_mask,
    63.                 .two_line_mask {
    64.                     position: relative;
    65.                     bottom: 34px;
    66.                     width: 100%;
    67.                     height: 34px;
    68.                     color: white;
    69.                     background-color: rgba(0, 0, 0, 0.7);
    70.                     z-index: 999;
    71.                     padding-left: 10px;
    72.                     padding-right: 10px;
    73.                     transition: all 0.3s;
    74.                     overflow: hidden;
    75.                 }
    76.     
    77.                 .one_line_mask {
    78.                     font-size: 16px;
    79.                     line-height: 34px;
    80.                 }
    81.     
    82.                 .two_line_mask {
    83.                     font-size: 12px;
    84.                     
    85.                 }
    86.     
    87.                 img {
    88.                     width: 100%;
    89.                     height: 100%;
    90.                 }
    91.     
    92.                 &:hover {
    93.                     .one_line_mask,
    94.                     .two_line_mask {
    95.                         background-color: rgb(254, 108, 95);
    96.                     }
    97.                 }
    98.             }
    99.         }
    100.         
    101.     }
    102.  
    103.     .middle_bottom {
    104.         height: 200px;
    105.         a {
    106.             img {
    107.                 width: 100%;
    108.                 height: 50%;
    109.             }
    110.             p {
    111.                 width: 100%;
    112.                 height: 20%;
    113.                 font-size: 20px;
    114.                 overflow: hidden;
    115.             }
    116.  
    117.             &:hover p {
    118.                 color:rgb(254, 108, 95);
    119.             }
    120.         }
    121.     }
    122. }
    123.  
    124. // 侧边栏部分
    125. .right {
    126.     img {
    127.         padding: 0px;
    128.         width: 100%;
    129.         height: 100%;
    130.     }
    131.  
    132.     .hot {
    133.         margin-top:20px;
    134.         margin-bottom: 20px;
    135.         border:1px solid gray;
    136.         &:hover {
    137.             border:1px solid red;
    138.         }
    139.         .hot_title {
    140.             position: relative;
    141.             left:15px;
    142.             width:60px;
    143.             height:30px;
    144.             line-height: 30px;
    145.             text-align: center;
    146.             background-color: rgb(255,94,82);
    147.             color:white;
    148.         }
    149.  
    150.         h4 {
    151.             margin-top: 20px;
    152.             color:rgb(255,94,121);
    153.         }
    154.  
    155.         p {
    156.             color:gray;
    157.         }
    158.     }
    159.  
    160.     .new_article_list {
    161.         a[class='row']{
    162.             padding-top:10px;
    163.             padding-bottom:10px;
    164.             border-bottom:1px solid #eee;
    165.  
    166.             img {
    167.                 width:80px;
    168.                 height:60px;
    169.             }
    170.  
    171.             &:hover .article_title {
    172.                 color:rgb(255,94,121);
    173.             }
    174.         }
    175.     }
    176.     
    177. }
    178.  
    179. // 标题样式
    180. .title {
    181.     border-bottom: 2px solid #eee;
    182.     padding-left: 0px;
    183.     span {
    184.         display: inline-block!important;
    185.         font-size: 25px;
    186.         padding-left: 0px;
    187.         border-bottom: 3px solid red;
    188.     }
    189. }
    190.  
    191. @font-face {
    192.     font-family: 'icomoon';
    193.     src:  url('../fonts/icomoon/fonts/icomoon.eot?kzli16');
    194.     src:  url('../fonts/icomoon/fonts/icomoon.eot?kzli16#iefix') format('embedded-opentype'),
    195.       url('../fonts/icomoon/fonts/icomoon.ttf?kzli16') format('truetype'),
    196.       url('../fonts/icomoon/fonts/icomoon.woff?kzli16') format('woff'),
    197.       url('../fonts/icomoon/fonts/icomoon.svg?kzli16#icomoon') format('svg');
    198.     font-weight: normal;
    199.     font-style: normal;
    200.     font-display: block;
    201.   }
    202.  
    203. // 响应式媒体查询
    204. @media screen and (max-width:767px) {
    205.     .left {
    206.         .head {
    207.             position: relative;
    208.             height: 42px;
    209.             background-image: url(../images/阿里百秀_m.png);
    210.  
    211.             &::after {
    212.                 position: absolute;
    213.                 right:10px;
    214.                 top: 8px;
    215.                 content: "\e986";
    216.                 font-family: 'icomoon';
    217.                 font-size:16px;
    218.                 color:white;
    219.             }
    220.         }
    221.  
    222.         .link_row {
    223.             position: relative;
    224.             &::after {
    225.                 position: absolute;
    226.                 right:0px;
    227.                 top: 15px;
    228.                 content: "\e9bd";
    229.                 font-family: 'icomoon';
    230.                 font-size:16px;
    231.                 color:black;
    232.             }
    233.         }
    234.  
    235.     }
    236.  
    237.     .link_row {
    238.         display: flex;
    239.         height: 0px;
    240.         .row {
    241.             a {
    242.                 text-indent:0px!important;
    243.                 font-size:14px!important;
    244.             }
    245.         }
    246.     }
    247.  
    248.     form {
    249.         height: 0px!important;
    250.     }
    251. }
    252.  
    253. @media screen and (max-width:575px) {
    254.     .middle_top {
    255.         height: 0px !important;
    256.     }
    257. }

    有些复杂样式的修改不能仅靠bootstrap解决，需要自己搞一下媒体查询

    3.3  效果

  • 相关阅读:
    健身房信息管理系统/健身房管理系统
    【JavaWeb】Filter
    基于OpenHarmony的智能喝水提醒器
    关于导出的Excel文件的本质
    Python使用总结之PyInstaller常用参数详解
    【SQL server】 表结构的约束和维护
    mysql图书管理系统（49-56）源代码
    2023.5.12解决Ubuntu中ens33没有ip
    通过curl命令分析http接口请求各阶段的耗时等
    《MongoDB入门教程》第03篇 MongoDB基本概念
  • 原文地址：https://blog.csdn.net/potato123232/article/details/126543832