[CSS3]响应式布局

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

导读

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

媒体查询

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

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

开发中的常用写法

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

  1. 示例代码

    Document
    1
  • 盒子添加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. 在代码中使用这些样式, 查看效果

    全局CSS样式-表格
    数字1 数字2 数字3
    1 2 3
    1 2 3
    1 2 3
  • 没有书写任何样式代码,只是为元素添加了样式类名, 就完成了样式的修改

按钮样式

复制代码 
<!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. 示例代码

    组件 /* 路径导航组件 */
    1. 首页
    2. 用户中心
    3. 用户
    4. 数据

插件

使用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. 示例代码

    字体图标

腾讯全端

项目准备

新建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. 之前案例自己用媒体查询控制也行, 用这个类名方便一点
相关推荐
沐土Arvin3 小时前
港澳台行政区域json
前端
程序员鱼皮4 小时前
我花 300 块，让 Claude Fable 5 开发桌面 APP，值么？
前端
William_Xu4 小时前
JavaScript 并发控制
前端
拾年2754 小时前
从零手写 Ajax：用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax
光影少年4 小时前
懒加载与分包：React.lazy + Suspense
前端·react.js·掘金·金石计划
小林ixn4 小时前
你以为你懂 + 号？看完这篇 Bun + TS 实战，才发现以前全写错了
前端·javascript·typescript
namexingyun5 小时前
开源前端生态如何成为 AI UI 生成的“燃料“：shadcn/ui、Tailwind CSS、Storybook 技术价值全解剖
java·前端·人工智能·python·ui·开源·ai编程
Zyed5 小时前
[STM32]Day15读写FLASH+读取ID
前端·stm32·性能优化
jvxiao6 小时前
你真的懂作用域吗？从编译原理角度深度 JS 的作用域
前端·javascript
Darling噜啦啦6 小时前
二叉树与递归算法实战：从树结构到 LeetCode 爬楼梯，一文吃透前端数据结构与递归思维
前端·javascript·数据结构
热门推荐
01HTTP 与 HTTPS 的区别：从原理到实战详解02《置身钉内》原文-可播放阅读03【AI】2026 年具身智能模型和世界模型总结042026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？05Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析062026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？07AI科技热点日报 | 2026年6月1日08GitHub 镜像站点09AI一周事件 · 2026-06-03 至 2026-06-09102026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf