前端移动高级web详细解析五

响应式布局方案

• 媒体查询

• Bootstrap框架

01-媒体查询

基本写法

• max-width：最大宽度（小于等于）

• min-width：最小宽度（大于等于）

书写顺序

• min-width（从小到大）

• max-width（从大到小）

案例-左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域

• HTML 结构

  
left
  

    响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
  

• CSS 样式

.box {
  display: flex;
}
​
.left {
  width: 300px;
  height: 500px;
  background-color: pink;
}
​
.main {
  flex: 1;
  height: 500px;
  background-color: skyblue;
}
​
@media (max-width: 768px) {
  .left {
    display: none;
  }
}

媒体查询-完整写法

关键词 / 逻辑操作符

• and

• only

• not

媒体类型

媒体类型用来区分设备类型

• screen：屏幕设备

• 打印预览：print

• 阅读器：speech

• 不区分类型：all

媒体特性

• 视口宽高：width / height

• 视口最大宽高：max-width ；max-height

• 视口最小宽高：min-width；min-height

• 屏幕方向：orientation

  • protrait：竖屏

  • landscape：横屏

媒体查询-外部CSS

02-Bootstrap

简介

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

中文官网: Bootstrap中文网

使用步骤

下载

下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

使用

1. 引入 Bootstrap CSS 文件

1. 调用类名： container 响应式布局版心类

测试

栅格系统

作用：响应式布局

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

• row 类：行，可以让内容在一行排（flex布局）

全局样式

按钮

类名

• btn：默认样式

• btn-success：成功

• btn-warning：警告

• ……

• 按钮尺寸：btn-lg / btn-sm

表格

表格类：

• table：默认样式

• table-striped：隔行变色

• table-success：表格颜色

• ……

组件

1.引入样式表

2.引入 js 文件

3.复制结构，修改内容

字体图标

下载

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

使用

1. 复制 fonts 文件夹到项目目录

2. 网页引入 bootstrap-icons.css 文件

3. 调用 CSS 类名（图标对应的类名）

03-综合案例-alloyTeam

准备工作

• HTML 结构

​
​
​

• less 样式

// out: ../css/

头部导航

• HTML 结构

  

    
    
      
    
    

      

        

          首页
        
        

          博客
        
        

          Github
        
        

          TWeb Conf
        
        

          SuperStar
        
        

          Web前端导航
        
        

          关于
        
      
    
  

• less 样式

// 导航
.bg-body-tertiary {
  background-color: transparent !important;
  .navbar-collapse {
    flex-grow: 0;
  }
}

轮播图图片

• HTML 结构

  

    
    
    
    
  
  

    

      
    
    

      
    
    

      
    
    

      
    
  
  
    
    Previous
  
  
    
    Next
  

• less 样式

.carousel {
  .carousel-item {
    height: 500px;
    background-size: cover;
    background-position: center 0;
  }
  .carousel-item:nth-child(1) {
    background-image: url(../assets/uploads/banner_1.jpg);
  }
  .carousel-item:nth-child(2) {
    background-image: url(../assets/uploads/banner_2.jpg);
  }
  .carousel-item:nth-child(3) {
    background-image: url(../assets/uploads/banner_3.jpg);
  }
  .carousel-item:nth-child(4) {
    background-image: url(../assets/uploads/banner_4.jpg);
  }
}

轮播图响应式

• less 样式

// 轮播图: 小于768图片高度250 max；大于等于768图片高度400 min；大于等于992图片高度500
.carousel {
  // 响应式 → 媒体查询
  @media (max-width: 768px) {
    .carousel-item {
      height: 250px;
    }
  }
​
  @media (min-width: 768px) {
    .carousel-item {
      height: 400px;
    }
  }
  @media (min-width: 992px) {
    .carousel-item {
      height: 500px;
    }
  }
​
​
  .carousel-item {
    // height: 500px;
    background-size: cover;
    background-position: center 0;
  }
}

开源项目响应式

• HTML 结构

  

    
OpenSource / 开源项目
    
种类众多的开源项目，让你爱不释手
  
  

    

      
1
      
2
      
3
      
4
    
  

• less 样式

// 开源项目
// 视口宽度大于992；一行排4个盒子  col-lg-3
// 视口宽度大于768；一行排2个盒子  col-md-6
.project {
  margin-top: 60px;
  text-align: center;
}

开源项目内容布局

• HTML 结构

  

    
OpenSource / 开源项目
    
种类众多的开源项目，让你爱不释手
  
  

    

      
1
      
1
      
1
      
1
    
  

• less 样式

.project {
  margin-top: 60px;
  text-align: center;
  .row {
    div {
      margin-bottom: 10px;
      height: 200px;
      // background-color: pink;
      a {
        // 块级的宽度和父级一样大
        display: block;
        height: 200px;
        background-color: green;
        border-radius: 4px;
      }
​
      &:nth-child(1) a {
        background-color: #70c3ff;
      }
      &:nth-child(2) a {
        background-color: #fd6a7f;
      }
      &:nth-child(3) a {
        background-color: #7f8ea0;
      }
      &:nth-child(4) a {
        background-color: #89d04f;
      }
    }
  }
}