前端Web移动端学习day05

移动 Web 第五天

响应式布局方案

媒体查询
Bootstrap框架

响应式网页指的是一套代码适配多端，一套代码适配各种大小的屏幕。

共有两种方案可以实现响应式网页，一种是媒体查询，另一种是使用bootstrap框架。

01-媒体查询

基本写法

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

max-width: 786px 这一段代码如果成为 @media 的条件会在页面的宽度小于 786px 的时候让@media 中的代码生效。

同理，min-width:786px 会在屏幕的宽度大于 786px 的时候让里面的代码生效。

如果实在不太好理解就借助数轴的方式来辅助，到底使用 max-width 还是 min-width。

书写顺序

min-width（从小到大）指的是@medai中的的视口宽度需要从上到下，从小到大写
max-width（从大到小）指的是@medai 中的的视口宽度需要从上到下，从大到小写

如果不按照这种顺序写，可能会出现css样式层叠，导致前面的样式不生效。

案例-左侧隐藏

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

HTML 结构

html 复制代码

<div class="box">
  <div class="left">left</div>
  <div class="main">
    响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
  </div>
</div>

CSS 样式

css 复制代码

.box {
  display: flex;
}

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

.main {
  flex: 1; /* 让右边的main盒子占整个父盒子剩下的全部 */
  /* 这样写的效果是左边left盒子的大小生效了，右边main盒子只占整个父盒子剩下的全部 */
  height: 500px;
  background-color: skyblue;
}

@media (max-width: 768px) {
  .left {
    display: none;
  }
}

媒体查询-完整写法

关键词 / 逻辑操作符

and
only
not

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

特性名称	属性	值
视口的宽和高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口最小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait: 竖屏landscape:横屏

工作中一般常用的是是空的宽度这一个特性

媒体类型

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

screen：屏幕设备
打印预览：print
阅读器：speech
不区分类型：all

媒体特性

视口宽高：width / height
视口最大宽高：max-width ；max-height
视口最小宽高：min-width；min-height
屏幕方向：orientation
- protrait：竖屏
- landscape：横屏

媒体查询-外部CSS

如果将媒体查询全都写到一个页面中，会发现需要在一个媒体查询里面写很多的代码，这种比较麻烦，于是就有了直接在link的时候在link标签上添加媒体查询，这样简化代码。具体的写法如下：在link标签中，属性名：属性值，不需要加 @。

逻辑符，媒体类型，and，这些一般可以省略，在需要的时候在写，但是(媒体查询) 不可以省略，尤其是括号更加不能省略。

02-Bootstrap

简介

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

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

使用步骤

下载

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

下载之后是一个压缩包，解压之后文件夹中会有css和js文件夹，css文件夹中有一大堆css文件，可以使用的是bootstrap.css和bootstrap.min.css这两个文件虽然名字不同但是功能是相同的。

这两个文件的区别：bootstrap.css是没有压缩过的文件，文件体积和bootstrap.css相比稍微大一点，里面的内容和平常的写代码习惯是相同的，bootstarp.min.css是经过压缩的文件，里面的代码是没有格式的。

以后再工作中需要哪一个就之间将对应的文件复制到项目的文件夹中就行了。映入bootstrap.css或者bootstrap.min.css其他文件不用引入。

使用

引入 Bootstrap CSS 文件

html 复制代码

<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

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

html 复制代码

<div class="container">测试</div>

栅格系统

作用：响应式布局

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

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

xs表示小于576，大部分是手机。

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

代码如下：

html 复制代码

<!--
视口宽度大于等于1200px，一行排4个盒子→3	添加类 .col-xl-数字
视口宽度大于等于768px，一行排2个盒子		添加类 .col-md-数字
视口宽度大于等于576px，一行排1个盒子		添加类 .col-sm-数字
后面的数字指的是一个盒子在父盒子中占有多少份，比如说 .col-sm-6 表示添加这个类的盒子当窗口的大小大于576px时在父盒子中占6份
注意：如果想要添加 .col-xx-x 这个类，其父盒子必须添加 .row 类，来开启flex布局，注意 .col-xx-x 这种类也是有样式的层叠性的如果使用了多个这种类必须要注意类名的排列顺序，
-->
<!--版心→row →子级-->
<div class="container"> // 添加container类，让盒子实现响应式布局
    <div class="row"> // 添加row类，让这个盒子中的子盒子可以排列在一行
		<div class="col-xl-3 col-md-6 col-sm-12">1</div>
        <div class="col-xl-3 col-md-6 col-sm-12">2</div>
        <div class="col-xl-3 col-md-6 col-sm-12">3</div>
        <div class="col-xl-3 col-md-6 col-sm-12">4</div>
    </div>
</div>

全局样式

在开发中最好是就着官方的文档使用，如果比较熟练也可以不使用官方的文档。

按钮

button类名

btn：默认样式清除默认的样式，比如：背景色，边框线
btn-success：成功
btn-warning：警告
......
按钮尺寸：btn-lg / btn-sm

html 复制代码

<button class="btn btn-success btn-sm">按钮1</button> 
// btn 只是消除了默认的样式，如果需要添加其他的样式需要使用其他的类名，比如：btn-success
<button class="btn btn-warning btn-lg">按钮2</button>

表格

表格类：

table：默认样式，清除table默认的样式，同时添加了一点自己的样式。
table-striped：隔行变色
table-success：表格颜色既可以给table添加，也可以给tr添加。
......

组件

1.引入样式表，适当的修改

2.引入 js 文件，有些动态的组件是需要映入bootstrap的js文件的

3.复制结构，修改内容

实例代码：4

html 复制代码

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

bootstrap是支持自己修改对应的样式的，方法就是，直接层叠掉对应的样式就行。具体的操作方式是：先打开html页面，按F12检查页面，选择到想要修改的元素，将元素对应的样式前面的勾选勾掉，看看样式是否发生变化，如果变了那就说明这就是想要修改的样式，只需要在自己的css文件中，添加对应的类名，然后修改对应的样式，注意有时候样式后面加了 !importent ，这时候自己的类名中也需要添加 !importent，否则会因为权重不够，样式不生效的。

注意：有时候自己在添加或者删除复制的html标签的时候，一定要注意，原本的html结构，比如说给标签添加的自定义属性之类的。

字体图标

下载

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

下载的压缩包中包括了非常多的svg图片和一个font文件夹，到时候只需要将font文件夹复制到项目的font文件夹中去就行了。

对了，如果使用了bootstrap库，可以在项目中直接创建一个bootstarp文件夹，到时候属于bootstrap库的文件全都放入这里就行了，比如说：bootstrap的css文件可以直接放在这个文件夹下，而不放入专门的单独的css文件夹下，bootstrap的font文件夹也可以直接放入这个bootstrap文件夹下，bootstrap的js文件也可以放在bootstrap的文件夹下的js文件夹下。

使用

复制 fonts 文件夹到项目目录
网页引入 bootstrap-icons.css 文件
调用 CSS 类名（图标对应的类名），调用的图标需要到官网上去看对应的图标的名字，

注意：官网上的图标的名称只是对应的字体图标类的一部分，比如说：有一个android2名称的类名，真正使用这个图标的时候使用的完整类名是 bi-androidq2，如果是其他的官网的字体图标也是相同的道方式，直接使用 bi-对应的名称 。

html 复制代码

<i class="bi-android2"></i> // 官网上的字体图标实例使用了两个类名，但是实际的使用只需要添加一个类名就行了

注意：bootstrap的字体图标只需要使用一个类名，而普通的字体图标需要使用两个类名。

注意：官网的字体图标也是支持自定义样式的，只需要用css的样式层叠掉就行。具体的实例如下：

css 复制代码

// 还是以android2为例
.bi-android2 {
	font-size: 100px;
	color: green;
}

03-综合案例-alloyTeam

项目源码

准备工作

HTML 结构

html 复制代码

<title>腾讯全端</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 层叠性：咱们的css 要 层叠 框架的 -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/index.css">



<script src="./Bootstrap/js/bootstrap.min.js"></script>

less 样式

less 复制代码

// out: ../css/

头部导航

HTML 结构

html 复制代码

<!-- 导航 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">博客</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Github</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">TWeb Conf</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SuperStar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Web前端导航</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

less 样式

css 复制代码

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

轮播图图片

HTML 结构

html 复制代码

<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

less 样式

css 复制代码

.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 样式

css 复制代码

// 轮播图: 小于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 结构

html 复制代码

<!-- 开源项目 -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / 开源项目</h2>
    <p>种类众多的开源项目，让你爱不释手</p>
  </div>
  <div class="content">
    <div class="row">
      <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>
  </div>
</div>

less 样式

less 复制代码

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

开源项目内容布局

HTML 结构

html 复制代码

<!-- 开源项目 -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / 开源项目</h2>
    <p>种类众多的开源项目，让你爱不释手</p>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
    </div>
  </div>
</div>

less 样式

css 复制代码

.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;
      }
    }
  }
}