前端基础进阶7

前端基础进阶

响应式

  • 响应式网页

    • 一套代码适配不同的屏幕设备

　　

  • 媒体查询

    • 基本语法

    • 根据设备宽度的变化，设置差异化样式

    • 开发常用写法

      • 媒体特性常用写法

        • max-width

        • min-width

      <!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>

    • 书写顺序

      • min-width（从小到大）

      • max-width（从大到小）

      • 需求

        • 默认网页背景色是灰色

        • 屏幕宽度在768-992之间, 网页背景色是粉色

        • 屏幕宽度在992-1200之间, 网页背景色是skyblue

        • 屏幕宽度大于1200, 网页背景色是绿色

        <!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属性都有层叠性 */
        ​
                 /* @media (min-width: 1200px) {
                    body {
                        
                    }
                } */
                
                /*  - min-width（从小到大）
                    - max-width（从大到小） */
                @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>

         

    • 完整写法（了解即可，并不这么写）

    • 关键词（了解）

      • and（多个判断条件时）

      • only（一个判断条件时）

      • not

  • 媒体类型（了解）

    • 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

  • 媒体特征

    • 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

  • 基本语法

    • 外链式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>

BootStrap

  • UI框架

    • UI框架概念

      • 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。

    • 作用

      • 基于框架开发，效率高，稳定性高。

  • BootStrap简介

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

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

    • 中文官网: https://www.bootcss.com/

  • BootStrap使用步骤

    • 使用步骤

      • 1、引入： BootStrap提供的CSS代码

      • 2、调用类：使用BootStrap提供的样式

        • container：响应式布局版心类

  • BootStrap栅格系统

    • 使用BootStrap栅格系统布局响应式网页

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

    • BootStrap3默认将网页分成12等份

    <!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个内容; 中屏:一行排列2个内容 -->
        <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>

    • .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

    • .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

    • 分别使用.row类名和 .col类名定义栅格布局的行和列。

    • 注意：

      • 1、container类自带间距15px;

      • 2、row类自带间距-15px

      <!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>

  • 全局样式

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

    • 手册用法：

      • BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。

      • 网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

    • 布局类：表格

      • table : 基本类名, 初始化表格默认样式

      • table-bordered : 边框线

      • table-striped : 隔行变色

      • table-hover : 鼠标悬停效果

      • table-responsive : 表格宽溢出滚动

      <!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>
          <table class="table table-striped table-bordered table-hover">
              <tr>
                  <th>数字1</th>
                  <th>数字2</th>
                  <th>数字3</th>
              </tr>
              <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
              </tr>
          </table>
      ​
          
      </body>
      </html>

    • 美化内容类：按钮

      • btn : 基准样式

      • btn-info; btn-success : 设置按钮背景色

      • btn-block : 设置按钮为块元素

      • btn-lg; btn-sm; btn-xs : 设置按钮大小

      <!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组件快速布局网页

    • 组件

      • BootStrap提供的常见功能，包含了HTML结构和CSS样式。

      • 使用方法

        • 引入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="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          下拉
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>


      <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">用户中心</a></li>
        <li><a href="#">用户</a></li>
        <li class="active">数据</li>
      </ol>
</body>
</html>

    • Glyphicons字体图标

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

      • Glyphicons字体图标的使用步骤

        • HTML页面引入BootStrap样式文件

        • 准备字体文件 (注意路径)

        • 空标签调用对应类名

          • glyphicon

          • 图标类

        <!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>
            <i class="glyphicon glyphicon-user"></i>
        </body>
        </html>

    • 插件

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

      • 只有HTML和CSS的下拉菜单，单击后能弹出子菜单吗？不能，但插件可以有交互效果

      • 插件

        • BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript

      • 插件的使用步骤

        • 引入BootStrap样式

        • 引入js文件：jQuery.js + BootStrap.min.js

        • 复制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> -->
            <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">
                <!-- active保证第一张图默认显示 -->
                <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>
                <spanclass="sr-only">Next</span>
              </a>
            </div>
      ​
          <scriptsrc="./js/jquery.js"></script>
          <scriptsrc="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
      </body>
      </html>

    • 定制

    • 根据项目需求定制bootstrap框架

    • 定制步骤

      • 导航菜单 → 定制

      • 输入目标变量值

      • 编译并下载，使用定制后的框架

posted @   守漠待花开  阅读(92)  评论(0)  编辑  收藏  举报
相关博文：
·  前端基础进阶3
·  前端基础进阶5
·  No.2.7
·  BootStrap
·  前端知识-07-Bootstrap框架
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae