[CSS3]响应式布局

二十雨辰2025-05-31 10:55

导读

响应式就是一套代码, 兼容大中小不同的屏幕, 即网页内容不变, 网页布局随屏幕切换而改变

媒体查询

响应式布局的核心技术是媒体查询

  1. 媒体查询可以检测屏幕尺寸, 设置差异化的css

开发中的常用写法

  1. 使用范围属性, 划定屏幕范围
  • max-width 最大宽度
  • min-width 最小宽度

  1. 示例代码

    <!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"> <title>Document</title> <style> /* 视口宽度小于等于768px， 网页背景色是粉色 */ @media (max-width: 768px) { body { background-color: pink; } }
    复制代码 
         /* 视口宽度大于等于1200px， 网页背景色是skyblue */
     @media (min-width: 1200px) {
         body {
             background-color: skyblue;
         }
     }
     
 </style>
    </head> <body> </body> </html>

书写顺序: 所有的css属性都有层迭性, 所以使用媒体查询时也要注意书写顺序

  1. 如果使用min-width属性, 媒体查询要从小往大写
  2. 如果使用max-width属性, 媒体查询要从大往小写

  1. 示例代码

    <!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"> <title>Document</title> <style> /* 视口宽度 >= 768px，网页背景色是 粉色 视口宽度 >= 992px，网页背景色是 绿色 视口宽度 >= 1200px，网页背景色是 skyblue */
    复制代码 
          /* css属性都有层叠性 */
      /* 不按顺序写,屏幕大于1200px时,蓝色不会生效, 被绿色层叠  */
      /* @media (min-width: 1200px) {
         body {
             background-color: skyblue;
         }
     } */
     
     @media (min-width: 768px) {
         body {
             background-color: pink;
         }
     }
     @media (min-width: 992px) {
         body {
             background-color: green;
         }
     }
     @media (min-width: 1200px) {
         body {
             background-color: skyblue;
         }
     }

 </style>
    </head> <body> </body> </html>

媒体查询的完整写法 (工作中常用的还是简写)

  1. 关键词的可选值
  • and (多个条件要同时满足)
  • only (多个条件至少满足一个)
  • not (条件不满足)
  1. 媒体类型的可选值
  • 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备
  1. 媒体特性的可选值
  • 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等

外链式css引入: 满足条件时样式表才会生效

复制代码 
<!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">
    <title>Document</title>
    <!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
    <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
</head>
<body>
    
</body>
</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">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 100%;
        }

        .left {
            width: 300px;
            min-height: 500px;
            background-color: pink;
        }

        .main {
            flex: 1;
            min-height: 500px;
            background-color: skyblue;
        }

        /* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
        @media (max-width: 768px) {
            .left {
                display: none;
            }
        }
    </style>
</head>
<body>
    /* 两列布局: 左侧固定宽度, 右侧宽度自适应 */
    <div class="box">
        <div class="left">left</div>
        <div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div>
    </div>
</body>
</html>
  1. 大屏布局效果
  1. 中屏的布局效果
  1. 小屏的布局效果

BootStrap

了解BootStrap

知道UI框架的作用

  1. UI框架概念: 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap
  2. 作用: 基于框架开发，效率高，稳定性高

使用BootStrap框架快速开发响应式网页

  1. Bootstrap 是由 Twitter 公司开发维护的前端UI 框架，它提供了大量编写好的CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

体验一下: 引入框架, 通过类名, 就可以快速实现响应式布局, 非常方便

复制代码 
<!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">
    <title>体验BootStrap</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
        <div class="col-lg-3 col-md-6 col-sm-12">1</div>
    </div>
</body>
</html>
  1. 大屏效果:
  1. 中屏效果
  1. 小屏效果
  1. 超小屏效果

使用步骤

下载: 首页 → BootStrap3中文文档→下载BootStrap

  1. 中文官网: http://www.bootcss.com/
  2. 开发版本和源码版本

使用

  1. 引入BootStrap提供的CSS代码
  1. 调用类:使用Bootstrap提供的样式
  • container: 响应式布局版心类

  1. 代码演示

    <!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"> <title>BootStrap使用方法</title> <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"> <style> div { height: 50px; background-color: pink; } </style> </head> <body>
    1
    </body> </html>
  • 盒子添加container这个类名后, 就有了版心的效果, 并且使用媒体查询进行了屏幕适配

栅格系统

栅格系统是BootStrap框架的核心

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份, 把所有的视口分为4类

复制代码 
<!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">
    <title>栅格系统</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <style>
        .container div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!--
         需求: 
            大屏: 一行排列4个内容  (12 / 4 = 3)
            中屏:一行排列2个内容   (12 / 2 = 6)
    -->
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>
    
</body>
</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">
    <title>栅格系统-类</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
   
    <!-- 版心样式 -->
    <!-- 盒子居中, 自带左右各15px的padding -->
    <div class="container">1</div>

    <!-- 不需要版心内边距的时候用 -->
    <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>

    <!-- 通栏样式-->
    <!-- 宽度100%: 自带左右各15px的padding -->
    <div class="container-fluid">3</div>
</body>
</html>
  1. .container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
  2. .container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%。
  3. 分别使用.row类名和.col类名定义栅格布局的行和列。
  • .container类自带间距15px;
  • .row类自带间距-15px

全局样式

掌握BootStrap手册用法使用全局CSS样式美化标签

  1. 手册: BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点
  2. 网站首页 →Bootstrap3中文文档 →全局css样式 →按分类导航查找目标类

表格样式

  1. 在官网中查看表格的全局样式

  1. 在代码中使用这些样式, 查看效果

    <!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"> <title>全局CSS样式-表格</title> <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"> </head> <body>
    数字1 数字2 数字3
    1 2 3
    1 2 3
    1 2 3
    </body> </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">
    <title>全局CSS样式-按钮</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-success btn-lg">成功</button>

    <button class="btn btn-warning btn-xs">警告</button>
</body>
</html>

组件

使用BootStrap组件快速布局网页

  1. 组件: BootStrap提供的常见功能，包含了HTML结构和CSS样式
  1. 使用方法
  • 引入BootStrap样式
  • 复制结构，修改内容

  1. 示例代码

    <!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"> <title>组件</title> <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"> </head> <body> /* 路径导航组件 */
    1. 首页
    2. 用户中心
    3. 用户
    4. 数据
    </body> </html>

插件

使用BootStrap插件实现常见的交互效果

  1. BootStrap提供的常见效果,包含了HTML结构，CSS样式与JavaScript
  1. 插件的使用步骤
  • 引入BootStrap样式
  • 引入js文件: jQueryjs + BootStrap.minjs
  1. 复制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">
  <title>插件</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <div class="dropdown">
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown trigger
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li>111</li>
      <li>111</li>
      <li>111</li>
    </ul>
  </div>

  <script src="./js/jquery.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

轮播图效果

复制技巧: 如果代码多, 拖拽复制就不方便, 左键点击开始位置, 按住shift再右键点击结束位置, 快速选择

复制代码 
<!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">
  <title>插件</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>

<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_1.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_2.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_3.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_4.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="./js/jquery.js"></script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

字体图标

使用Glyphicons字体图标实现网页中的图标效果

  1. Glyphicons字体图标的使用步骤
  • HTML页面引入BootStrap样式文件
  • 空标签调用对应类名
    • glyphicon
    • 图标类

  1. 示例代码

    <!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"> <title>字体图标</title> <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"> </head> <body> </body> </html>

腾讯全端

项目准备

新建index.html文件和index.less文件

复制代码 
<!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">
    <title>腾讯全端</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
  1. bootstrap.min.css中已经集成了清除浏览器默认的代码

使用轮播组件, 并设置banner图的高度

复制代码 
<!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">
    <title>腾讯全端</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- banner -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./uploads/banner_1.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_2.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_3.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="./uploads/banner_4.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    <!-- banner -->


    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

// banner
.carousel {
    // 如果视口<768, 图250 max-width
    // 如果视口<992, 图400 max-width
    // 如果视口>992, 图500 min-width

    img {
        height: 100% !important;
    }

    @media (max-width: 992px) {
        .item {
            height: 400px;
        }
    }

    @media (max-width: 768px) {
        .item {
            height: 250px;
        }
    }

    @media (min-width: 992px) {
        .item {
            height: 500px;
        }
    }
}

头部组件

使用导航条组件

复制代码 
<!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">
    <title>腾讯全端</title>
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">首页</a></li>
              <li><a href="#">博客</a></li>
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Tweb Conf</a></li>
              <li><a href="#">SuperStar</a></li>
              <li><a href="#">Web前端</a></li>
              <li><a href="#">关于</a></li>

            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    <!-- 头部 -->

    <!-- banner -->
    ... ...
    <!-- banner -->


    <script src="./lib/js/jquery.js"></script>
    <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

// 头部
.navbar-default {
    background-color: transparent;
    border: 0;
}

定制导航

bootStrap默认的导航条组件, 是屏幕小于768时才折叠为图标, 项目需求是小于992时就堆叠排列

  1. 点击定制, 里面有非常多的配置项
  1. 如果知道位置, 可以从左侧的导航中索引, 如果不清楚, 直接全局搜索
  1. 找到需要修改的配置项之后, 修改为自己需要的值
  1. 下载定制好的bootstarp, 然后在项目中使用
复制代码 
<!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">
  <title>腾讯全端</title>
  /* 标准版 */
  <!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
  /* 定制版 */
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  
  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>
  1. 查看效果: 中屏的时候就可以堆叠排列了

开源项目

了解排版标签

  1. bootstrap为常见的标签都优化了默认样式, 同时提供了很多的类名, 可以方便的修改标签样式
  2. 如果需要查阅和使用, 找到全局样式, 点击排版区域进行查看

使用bootstrap栅格系统布局时, 栅格盒子只做布局, 内容的排版或者盒子的间距全部交给子级盒子

复制代码 
<!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">
  <title>腾讯全端</title>
  <!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 开源项目 -->
  <div class="project">
    <div class="container">
       /* 栅格盒子只做布局, 其他的属性, 都要加给a标签 */
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
    </div>
  </div>
  <!-- 开源项目 -->


  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

// 开源项目
.project {
    .container {
        div {
            background-color: pink;
          
            a {
                display: block;
                height: 200px;
                background-color: skyblue;
            }
        }
    }
}
  1. 这样布局的原因就是, 栅格系统把网页等分为12份, 已经占满了页面
  2. 如果再额外给栅格布局的盒子添加外边距, 会让布局容器超过100%, 导致换行排列
  1. 所以最佳实践, 栅格盒子只做布局 ,不设置任何属性, 这也符合单一职责的软件开发思想
  2. 如果想让盒子之间有距离,可以控制子集盒子的边距

完成开源项目区域

复制代码 
<!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">
  <title>腾讯全端</title>
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部 -->
  ... ...
  <!-- 头部 -->

  <!-- banner -->
  ......
  <!-- banner -->

  <!-- 开源项目 -->
  <div class="project">
    <h3 class="h2">OpenSource/开源项目</h3>
    <p>种类众多的开源项目，让你爱不释手</p>

    <div class="container">
      <!-- .row -->
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
      <div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div>
    </div>
  </div>
  <!-- 开源项目 -->


  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>

</html>

// 开源项目
.project {
    padding-top: 30px;
    text-align: center;

    .container {
        div {
            a {
                display: block;
                height: 200px;
                background-color: skyblue;
            }
        }
    }
}

扩展内容

在全局样式中, 还有辅助类和响应式工具这两个内容我们没接触, 现在了解一下

辅助类, 帮助我们快速完成一些效果

  1. 快速浮动和清除浮动可能会用到, 需要的时候, 查阅一下, 添加类名就行

响应式工具: 不同视口宽度控制元素显示隐藏

  1. 通过类名, 就能控制元素在不同适口的显示和隐藏
  2. 之前案例自己用媒体查询控制也行, 用这个类名方便一点
相关推荐
非凡ghost7 小时前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost7 小时前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller8 小时前
3年前我不会实现的，现在靠ai辅助实现了
前端·javascript
用户904706683578 小时前
commonjs的本质
前端
白兰地空瓶8 小时前
用 CSS3 造一场星际穿越：前端导演的《星球大战》片场手记
css
Sailing8 小时前
5分钟搞定 DeepSeek API 配置：从配置到调用一步到位
前端·openai·ai编程
Pa2sw0rd丶8 小时前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
非凡ghost8 小时前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端
j七七8 小时前
5分钟搭微信自动回复机器人5分钟搭微信自动回复机器人
运维·服务器·开发语言·前端·python·微信
快起来别睡了8 小时前
TypeScript装饰器详解：像搭积木一样给代码加功能
前端·typescript
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06Labelme从安装到标注：零基础完整指南07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）09jdk21下载、安装（Windows、Linux、macOS）10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）