做网站平台需要多少钱,android下载安装app,51模板网,网站获利模式响应式布局方案 媒体查询 Bootstrap框架
01-媒体查询
基本写法 max-width#xff1a;最大宽度#xff08;小于等于#xff09; min-width#xff1a;最小宽度#xff08;大于等于#xff09;
书写顺序 min-width#xff08;从小到大#xff09; max-width…响应式布局方案 媒体查询 Bootstrap框架
01-媒体查询
基本写法 max-width最大宽度小于等于 min-width最小宽度大于等于
书写顺序 min-width从小到大 max-width从大到小
案例-左侧隐藏
需求网页宽度小于等于768px则隐藏左侧区域 HTML 结构
div classboxdiv classleftleft/divdiv classmain响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果/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;}
}
媒体查询-完整写法 关键词 / 逻辑操作符 and only not
媒体类型
媒体类型用来区分设备类型 screen屏幕设备 打印预览print 阅读器speech 不区分类型all
媒体特性 视口宽高width / height 视口最大宽高max-width max-height 视口最小宽高min-widthmin-height 屏幕方向orientation protrait竖屏 landscape横屏
媒体查询-外部CSS 02-Bootstrap
简介
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架它提供了大量编写好的 CSS 样式允许开发者结合一定 HTML 结构及JavaScript快速编写功能完善的网页及常见交互效果。
中文官网: Bootstrap中文网
使用步骤
下载
下载Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件 使用 引入 Bootstrap CSS 文件
link relstylesheet href./Bootstrap/css/bootstrap.min.css 调用类名 container 响应式布局版心类
div classcontainer测试/div
栅格系统
作用响应式布局
栅格化是指将整个网页的宽度分成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
使用 复制 fonts 文件夹到项目目录 网页引入 bootstrap-icons.css 文件 调用 CSS 类名图标对应的类名
i classbi-android2/i
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.css
script src./Bootstrap/js/bootstrap.min.js/script less 样式
// 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
/nav less 样式
// 导航
.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
/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 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
/div less 样式
// 开源项目
// 视口宽度大于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
/div 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;}}}
}
