主流网站开发平台,天津北京网站建设公司,建德网站建设,绍兴建设企业网站移动 Web 第五天
响应式布局方案
媒体查询Bootstrap框架
响应式网页指的是一套代码适配多端#xff0c;一套代码适配各种大小的屏幕。
共有两种方案可以实现响应式网页#xff0c;一种是媒体查询#xff0c;另一种是使用bootstrap框架。
01-媒体查询
基本写法 max-wid…移动 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 结构
div classboxdiv classleftleft/divdiv classmain响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果/div
/divCSS 样式
.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;}
}媒体查询-完整写法 关键词 / 逻辑操作符
andonlynot
媒体特性主要用来描述媒体类型的具体特征如当前屏幕的宽高、分辨率、横屏或竖屏等。
特性名称属性值视口的宽和高width、height数值视口最大宽或高max-width、max-height数值视口最小宽或高min-width、min-height数值屏幕方向orientationportrait: 竖屏landscape:横屏
工作中一般常用的是是空的宽度这一个特性
媒体类型
媒体类型用来区分设备类型
screen屏幕设备打印预览print阅读器speech不区分类型all
媒体特性
视口宽高width / height视口最大宽高max-width max-height视口最小宽高min-widthmin-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 文件
link relstylesheet href./Bootstrap/css/bootstrap.min.css调用类名 container 响应式布局版心类
div classcontainer测试/div栅格系统
作用响应式布局
栅格化是指将整个网页的宽度分成12等份每个盒子占用的对应的份数
例如一行排4个盒子则每个盒子占 3份 即可12 / 4 3 xs表示小于576大部分是手机。
row 类行可以让内容在一行排flex布局
代码如下
!--
视口宽度大于等于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 classcontainer // 添加container类让盒子实现响应式布局div classrow // 添加row类让这个盒子中的子盒子可以排列在一行div classcol-xl-3 col-md-6 col-sm-121/divdiv classcol-xl-3 col-md-6 col-sm-122/divdiv classcol-xl-3 col-md-6 col-sm-123/divdiv classcol-xl-3 col-md-6 col-sm-124/div/div
/div全局样式
在开发中最好是就着官方的文档使用如果比较熟练也可以不使用官方的文档。
按钮 button类名
btn默认样式清除默认的样式比如背景色边框线btn-success成功btn-warning警告……按钮尺寸btn-lg / btn-sm
button classbtn btn-success btn-sm按钮1/button
// btn 只是消除了默认的样式如果需要添加其他的样式需要使用其他的类名比如btn-success
button classbtn btn-warning btn-lg按钮2/button表格 表格类
table默认样式清除table默认的样式同时添加了一点自己的样式。table-striped隔行变色table-success表格颜色 既可以给table添加也可以给tr添加。……
组件
1.引入样式表适当的修改
2.引入 js 文件有些动态的组件是需要映入bootstrap的js文件的
3.复制结构修改内容
实例代码4
nav classnavbar navbar-expand-lg bg-body-tertiarydiv classcontainer-fluida classnavbar-brand href#Navbar/abutton classnavbar-toggler typebutton data-bs-togglecollapse data-bs-target#navbarNav aria-controlsnavbarNav aria-expandedfalse aria-labelToggle navigationspan classnavbar-toggler-icon/span/buttondiv classcollapse navbar-collapse idnavbarNavul classnavbar-navli classnav-itema classnav-link active aria-currentpage href#Home/a/lili classnav-itema classnav-link href#Features/a/lili classnav-itema classnav-link href#Pricing/a/lili classnav-itema classnav-link disabledDisabled/a/li/ul/div/div
/navbootstrap是支持自己修改对应的样式的方法就是直接层叠掉对应的样式就行。具体的操作方式是先打开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-对应的名称 。
i classbi-android2/i // 官网上的字体图标实例使用了两个类名但是实际的使用只需要添加一个类名就行了注意bootstrap的字体图标只需要使用一个类名而普通的字体图标需要使用两个类名。
注意官网的字体图标也是支持自定义样式的只需要用css的样式层叠掉就行。具体的实例如下
// 还是以android2为例
.bi-android2 {font-size: 100px;color: green;
}03-综合案例-alloyTeam
项目源码
准备工作 HTML 结构
title腾讯全端/title
link relshortcut icon hreffavicon.ico typeimage/x-icon
!-- 层叠性咱们的css 要 层叠 框架的 --
link relstylesheet href./Bootstrap/css/bootstrap.min.css
link relstylesheet href./Bootstrap/font/bootstrap-icons.css
link relstylesheet href./css/index.cssscript src./Bootstrap/js/bootstrap.min.js/scriptless 样式
// out: ../css/头部导航
HTML 结构
!-- 导航 --
nav classnavbar navbar-expand-lg bg-body-tertiary fixed-topdiv classcontainera classnavbar-brand href#img src./assets/images/logo.png alt/abutton classnavbar-toggler typebutton data-bs-togglecollapse data-bs-target#navbarNav aria-controlsnavbarNav aria-expandedfalse aria-labelToggle navigationspan classnavbar-toggler-icon/span/buttondiv classcollapse navbar-collapse idnavbarNavul classnavbar-navli classnav-itema classnav-link active aria-currentpage href#首页/a/lili classnav-itema classnav-link href#博客/a/lili classnav-itema classnav-link href#Github/a/lili classnav-itema classnav-link href#TWeb Conf/a/lili classnav-itema classnav-link href#SuperStar/a/lili classnav-itema classnav-link href#Web前端导航/a/lili classnav-itema classnav-link href#关于/a/li/ul/div/div
/navless 样式
// 导航
.bg-body-tertiary {background-color: transparent !important;.navbar-collapse {flex-grow: 0;}
}轮播图图片
HTML 结构
!-- 轮播图 --
div idcarouselExampleIndicators classcarousel slidediv classcarousel-indicatorsbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to0 classactive aria-currenttrue aria-labelSlide 1/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to1 aria-labelSlide 2/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to2 aria-labelSlide 3/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to3 aria-labelSlide 4/button/divdiv classcarousel-innerdiv classcarousel-item active/divdiv classcarousel-item/divdiv classcarousel-item/divdiv classcarousel-item/div/divbutton classcarousel-control-prev typebutton data-bs-target#carouselExampleIndicators data-bs-slideprevspan classcarousel-control-prev-icon aria-hiddentrue/spanspan classvisually-hiddenPrevious/span/buttonbutton classcarousel-control-next typebutton data-bs-target#carouselExampleIndicators data-bs-slidenextspan classcarousel-control-next-icon aria-hiddentrue/spanspan classvisually-hiddenNext/span/button
/divless 样式
.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 classproject containerdiv classtitleh2OpenSource / 开源项目/h2p种类众多的开源项目让你爱不释手/p/divdiv classcontentdiv classrowdiv classcol-lg-3 col-md-61/divdiv classcol-lg-3 col-md-62/divdiv classcol-lg-3 col-md-63/divdiv classcol-lg-3 col-md-64/div/div/div
/divless 样式
// 开源项目
// 视口宽度大于992一行排4个盒子 col-lg-3
// 视口宽度大于768一行排2个盒子 col-md-6
.project {margin-top: 60px;text-align: center;
}开源项目内容布局
HTML 结构
!-- 开源项目 --
div classproject containerdiv classtitleh2OpenSource / 开源项目/h2p种类众多的开源项目让你爱不释手/p/divdiv classcontentdiv classrowdiv classcol-lg-3 col-md-6a href#1/a/divdiv classcol-lg-3 col-md-6a href#1/a/divdiv classcol-lg-3 col-md-6a href#1/a/divdiv classcol-lg-3 col-md-6a href#1/a/div/div/div
/divless 样式
.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;}}}
}
