[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. 之前案例自己用媒体查询控制也行, 用这个类名方便一点
相关推荐
搏博1 小时前
基于Vue.js的图书管理系统前端界面设计
前端·javascript·vue.js·前端框架·数据可视化
掘金安东尼1 小时前
前端周刊第419期（2025年6月16日–6月22日）
前端·javascript·面试
bemyrunningdog1 小时前
AntDesignPro前后端权限按钮系统实现
前端
重阳微噪1 小时前
Data Config Admin - 优雅的管理配置文件
前端
Hilaku1 小时前
20MB 的字体文件太大了，我们把 Icon Font 压成了 10KB
前端·javascript·css
fs哆哆1 小时前
在VB.net中，文本插入的几个自定义函数
服务器·前端·javascript·html·.net
专注VB编程开发20年1 小时前
C# .NET多线程异步记录日声，队列LOG
java·开发语言·前端·数据库·c#
慧慧吖@2 小时前
箭头函数的this指向
开发语言·前端·javascript
锈儿海老师2 小时前
关于平凡AI 提示词造就世界最强ast-grep 规则这件事
前端·javascript·人工智能
LetsonH2 小时前
配置MCP报错npm error code EPERM
前端·npm·node.js
热门推荐
0138、基于卷积神经网络(CNN)的车牌自动识别系统(matlab)02扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解03KGG转MP3工具|非KGM文件|解密音频04C# 项目：导线计算 / 坐标转换 / 曲线放样 / 水准网 / 导线网平差05Coze扣子平台完整体验和实践（附国内和国际版对比）06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】08DeepSeek各版本说明与优缺点分析09零代码入门 | Coze——让大模型接入自己的数据库10jdk21下载、安装（Windows、Linux、macOS）