1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：东北赵四 分类：Toy博客 阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了前端移动高级web详细解析五。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

响应式布局方案

  • 媒体查询

  • Bootstrap框架

01-媒体查询

基本写法

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

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

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

书写顺序

  • min-width（从小到大）

  • max-width（从大到小）

案例-左侧隐藏

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

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

  • HTML 结构

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

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

媒体查询-完整写法

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

关键词 / 逻辑操作符

  • and

  • only

  • not

媒体类型

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

  • screen：屏幕设备

  • 打印预览：print

  • 阅读器：speech

  • 不区分类型：all

媒体特性

  • 视口宽高：width / height

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

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

  • 屏幕方向：orientation

    • protrait：竖屏

    • landscape：横屏

媒体查询-外部CSS

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

02-Bootstrap

简介

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

中文官网: Bootstrap中文网

使用步骤

下载

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

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

使用

  1. 引入 Bootstrap CSS 文件

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

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

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

栅格系统

作用：响应式布局

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

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

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

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

全局样式

按钮

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

类名

  • btn：默认样式

  • btn-success：成功

  • btn-warning：警告

  • ……

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

表格

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

表格类：

  • table：默认样式

  • table-striped：隔行变色

  • table-success：表格颜色

  • ……

组件

1.引入样式表

2.引入 js 文件

3.复制结构，修改内容

字体图标

下载

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

使用

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

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

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

<i class="bi-android2"></i>

03-综合案例-alloyTeam

准备工作

前端移动高级web详细解析五,前端,前端,html,开发语言,基础,笔记,css

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

// out: ../css/

头部导航

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

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

轮播图图片

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

.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 结构

<!-- 开源项目 -->
<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 样式

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

开源项目内容布局

  • 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 样式文章来源地址https://www.toymoban.com/news/detail-738225.html

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

到了这里，关于前端移动高级web详细解析五的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 高级web前端开发工程师的职责说明（合集）

    高级web前端开发工程师的职责说明（合集）

      高级web前端开发工程师的职责说明1 职责： 1、根据需求文档，完成PC端、移动端页面及交互的开发，并保证兼容性和确保产品具有优质的用户体验; 2、熟练使用 HTML 、 CSS 、 JS 、 Ajax 等技术，能解决各种浏览器兼容性问题，完成页面架构和布局; 3、熟练编写结构良好，语义

    2024年02月14日
    浏览(41)
  • Web端服务器推送技术原理分析及dwr框架简单的使用，html5移动web开发

    Web端服务器推送技术原理分析及dwr框架简单的使用，html5移动web开发

    缺点  ： a) 糟糕的用户体验 b) 对服务器的压力很大，并且造成带宽的极大浪费。 2.2 Ajax 轮询 Ajax隔一段时间（通常使用JavaScript的setTimeout函数）就去服务器查询是否有改变，从而进行增量式的更新。但是间隔多长时间去查询成了问题，因为性能和即时性造成了严重的反比

    2024年04月16日
    浏览(50)
  • 【前端web入门第一天】01 开发环境、HTML基本语法文本标签

    【前端web入门第一天】01 开发环境、HTML基本语法文本标签

    文章目录: 1. 准备开发环境 1.1 vs Code基本使用 2.HTML文本标签 2.1 标签语法 2.2 HTML基本骨架 2.3 标签的关系 2.4 注释 2.5 标题标签 2.6 段落标签 2.7 换行与水平线标签 2.8 文本格式化标签 VSCode与谷歌浏览器离线版,安装包评论区自提. VSCode默认安装位置:C:UsershpAppDataLocalProgramsMic

    2024年01月25日
    浏览(49)
  • 〖Web全栈开发④〗— HTML基础详讲(超详细)

    〖Web全栈开发④〗— HTML基础详讲(超详细)

    🏘️🏘️个人简介：以山河作礼。 🎖️🎖️: Python领域新星创作者，CSDN实力新星认证，阿里云社区专家博主 🎁🎁:Web全栈开发专栏：《Web全栈开发》免费专栏，欢迎阅读！ 浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示HTML文档、PDF、图片、视频等网络内

    2024年02月05日
    浏览(39)
  • [HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

    [HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

    希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录 前言 CSS颜色与背景 颜色color属性 背景background属性 1. 背景颜色background-color 2. 背景图像background-image 3. 背景

    2024年02月03日
    浏览(73)
  • [HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

    [HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

    希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录 前言 网页标题：三列自适应宽度 网页标题：多行三列自适应宽度 一级水平导航菜单：采用“无序列表+超

    2024年01月16日
    浏览(73)
  • 1+x web前端开发初级理论答案+解析（一）

    1+x web前端开发初级理论答案+解析（一）

    目录 一、单选题（每小题2分，共30小题，共60分） 二、多选题（每小题2分，共15小题，共30分） 三、判断题（每小题2分，共5小题，共10分。在每小题后对应括号内填入判断结果，正确的选项填写“√”，错误的选项填写“×”） 1、在HTML中，(  C  )用来表示特殊字符引号 A、

    2024年02月08日
    浏览(44)
  • 建站系列（五）--- 前端开发语言之HTML、CSS、JavaScript

    建站系列（五）--- 前端开发语言之HTML、CSS、JavaScript

    建站系列（一）— 网站基本常识 建站系列（二）— 域名、IP地址、URL、端口详解 建站系列（三）— 网络协议 建站系列（四）— Web服务器之Apache、Nginx 建站系列（五）— 前端开发语言之HTML、CSS、JavaScript 建站系列（六）— 后端开发语言 建站系列（七）— 常用前后端框架

    2024年02月09日
    浏览(52)
  • web前端大作业_Html5+CSS3+JS原生项目_京东商城首页 详细代码

    web前端大作业_Html5+CSS3+JS原生项目_京东商城首页 详细代码

    index.html css index.css js index.js 效果图如下：            

    2024年02月11日
    浏览(58)
  • [HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页

    [HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页

    希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的很重要！ 目录 前言 横向二级导航菜单 Web页面设计实例 总结 该练的还是要练，终究是自己的！ 网页标题：二级下拉导航

    2024年01月17日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包