在线手机网站建设,阿里云域名注册新人,北京海淀区最新通知,深圳商业网站建设哪家专业目录 1_认识Bootstrap1.1_概念1.2_起源和历史1.3_Bootstrap优缺点 2_Bootstrap4的安装2.1_方式一 CDN2.2_方式二 : 下载源码引入2.3_方式三 : npm安装 3_Bootstrap初体验4_响应式容器原理4.1_屏幕尺寸的分割点#xff08;Breakpoints#xff09;4.2_响应式容器Containers 5_网… 目录 1_认识Bootstrap1.1_概念1.2_起源和历史1.3_Bootstrap优缺点 2_Bootstrap4的安装2.1_方式一 CDN2.2_方式二 : 下载源码引入2.3_方式三 : npm安装 3_Bootstrap初体验4_响应式容器原理4.1_屏幕尺寸的分割点Breakpoints4.2_响应式容器Containers 5_网格系统Grid system5.1_认识5.2_12列网格系统5.3_网格系统的原理5.4_嵌套(nesting)5.5_自动布局Auto-layout 5.7_响应式类Responsive Class 6_响应式工具类6.1_认识6.2_响应式工具类-Display6.3_实用的工具类Utility classes6.4_可访问性-辅助类了解 7_Bootstrap组件8_项目8.1_导航栏8.2_轮播图8.3_目标客户 版块 1_认识Bootstrap
1.1_概念
Bootstrap 读音 /ˈbu:tstræp/ 是一个非常受欢迎的前端框架官方网站将其描述为。
最流行的 HTML、CSS 和 JS 框架用于在 Web 上开发响应式、移动优先的项目。(v3.x) 响应式页面页面布局会随着屏幕尺寸的变化而自动调整布局作用是适配各个屏幕。 Bootstrap是功能强大、可扩展且功能丰富的前端工具包。v5.xBootstrap底层是使用Sass构建支持定制Sass、Color、CSS variable …。v5.xBootstrap中的网格系统、组件以及强大的JavaScript 插件可以快速搭建响应式网站。(v5.x)
简单的理解
Bootstrap是由HTML、CSS和JavaScript编写可复用代码的集合包括全局样式、组件、插件等它是一个前端框架使用该框架能够快速开发出响应的网站即适配PC、平板和移动端的网站。Bootstrap可以免去编写大量的 CSS 代码Write less让更专注于网站业务逻辑的开发。Bootstrap是开源免费的可以从GitHub直接拿到源码 1.2_起源和历史
Bootstrap原名Twitter Blueprint由Twitter公司的Mark Otto和Jacob Thornton编写。
他们的本意是想制作一套可以让网页保持统一风格的前端框架。
在Bootstrap之前Twitter团队在开发界面时不同的项目组会使用不同的代码库。这样就会很容易导致界面风格不一致等问题从而增加了后期的维护成本。
Mark Otto发现自己设计的工具比别人设计的更强大能够做更多的事情。几个月之后Mark Otto和一群开发人员做出了Bootstrap的原型。然后经过他们开发小组几个月之后的努力大家把Twitter Blueprint改名为Bootstrap。
在2011年8月19日将其作为开源项目发布。项目由Mark Otto、Jacob Thornton和核心开发小组维护。
在2012年1月31日发布Bootstrap 2增加了十二列网格系统和响应式组件并对许多组件进行了修改。
在2013年8月19日发布Bootstrap 3开始将移动设备优先作为方针并且开始使用扁平化设计支持IE8-9。
在2018年1月7日发布Bootstrap 4增加了Flexbox Grid、Cards、Spacing Utilities等。
在2021年5月5日发布Bootstrap 5增强Grid System、增强Form elements、Not Support for IE、Bootstrap Icons等 1.3_Bootstrap优缺点
优点
Bootstrap在Web开发人员中如此受欢迎的原因之一是它具有简单的文件结构只需要懂HTML、CSS 和 JS 的基本知识就可以上手使用Bootstrap甚至阅读其源码对于初学者来是说易于学习。Bootstrap拥有一个强大的网格系统它是由行和列组成可以直接创建网格无需自行编写媒体查询来创建。Bootstrap预定义很多响应式的类。例如给图片添加.img-responsive类图片将会根据用户的屏幕尺寸自动调整图像大小更方便去做各个屏幕的适配。另外Bootstrap 还提供了很多额外的工具类辅助进行网页开发。Bootstrap框架提供的组件、插件、布局、栅格系统、响应式工具等等可以为节省了大量的开发时间。
缺点
不适合高度定制类型的项目因为Bootstrap具有统一的视觉风格高度定制类的项目需要大量的自定义和样式覆盖。Bootstrap的框架文件比较大(61KB JS 159KB CSS)资源文件过大会增加网站首屏加载的时间并加重服务器的负担。Bootstrap样式相对笨重也会额外添加一些不必要的HTML元素他会浪费一小部分浏览器的资源。
总结Bootstrap很容易上手并且也有非常完整的中文文档Bootstrap使用 jQuery 与HTML 交互。对于初学者来说它将是一个不错的入门方式。 同时Bootstrap框架优秀的设计和架构思想也是非常值得学习。 2_Bootstrap4的安装
Bootstrap 是一个前端框架。
该框架主要是由CSS 和 JS组成但是也会依赖一小部分的HTML。因此在安装Bootstrap时-需要引入相应的CSS和JS文件当然也需要添加一些全局的配置。在Bootstrap 5 版本以前Bootstrap是依赖jQuery的。那么如果使用的是Bootstrap5以下的版本需在引入Bootstrap之前先引入jQuery库。
Bootstrap的内容组成不同的下载文件包含的内容也不一样 2.1_方式一 CDN
Bootstrap框架的CDN地址
https://cdn.jsdelivr.net/npm/bootstrap4.6.1/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.jshttps://cdn.jsdelivr.net/npm/bootstrap4.6.1/dist/js/bootstrap.bundle.min.js
HTML中引入之后添加重要的全局配置
HTML5 文档类型doctype 或 DOCTYPEBootstrap 要求文档类型doctype是 HTML5。 如果没有设置这个就会看到一些古怪的、不完整的样式因此正确设置文档类型doctype能轻松避免这些困扰。
!DOCTYPE html添加视口viewport Bootstrap 采用的是移动设备优先mobile first 的开发策略为了网页能够适配移动端的设备需在 head 标签中添加viewport视口。 在移动端会把 layout viewport 的宽度设置为设备的宽并且不允许用户进行页面的缩放。
meta nameviewport contentwidthdevice-width, initial-scale1.0,user-scalableno,maximum-scale1.0,minimum-scale1.0,shrink-to-fitno示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!-- safari 9 --meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno, minimum-scale1.0, maximum-scale1.0, shrink-to-fitnotitleDocument/title!-- 引入Bootstrap框架中的CSS文件: box-size:border-box --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap4.6.1/dist/css/bootstrap.min.css
/head
bodyh1 classtext-left border border-primaryHello Bootstrap/h1!-- Bootstrap5 之前需要依赖jQuery库 故需要引入JQ库--script srchttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.js/script!-- 引入Bootstrap的JS文件 --script srchttps://cdn.jsdelivr.net/npm/bootstrap4.6.1/dist/js/bootstrap.bundle.min.js/script
/body
/html2.2_方式二 : 下载源码引入
Bootstrap框架的下载
Bootstrap下载地址https://v4.bootcss.com/docs/getting-started/download/jQuery下载地址https://jquery.com/download/
添加重要的全局配置
HTML5 文档类型doctype 或 DOCTYPEBootstrap 要求文档类型doctype是 HTML5。添加视口viewportshrink-to-fit 是为了兼容 Safari 9 以后版本禁止页面的伸缩)integrity: 防止资源被篡改篡改了将不加载crossorigin加载不同源的资源时是否需要需带用户凭证cook)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno, minimum-scale1.0, maximum-scale1.0, shrink-to-fitnotitleDocument/title!-- 引入 Bootstarp中的CSS文件 --link relstylesheet href../libs/bootstrap-4.6.1/css/bootstrap.css
/head
bodyh1 classfloat-righthello Bootstrap/h1script src../libs/jquery/jquery-3.6.0.js/script!-- bundle.js分成下面两部分popper.jsbootstrap.js--script src../libs/bootstrap-4.6.1/js/bootstrap.bundle.js/script
/body
/html2.3_方式三 : npm安装 3_Bootstrap初体验
需求开发两个按钮一个天空蓝的按钮和一个橙色的按钮。 下面将使用两种方式实现 (1) 用CSS来开发
style
.btn{width: 60px;line-height: 40px;color: white;text-align: center;
}.btn-cirlce{border-radius: 4px;
}.btn-primary{background-color: skyblue;
}.btn-warning{background-color: orange;
}
.btn-default{background-color: #cdcdcd;
}/stylebodydiv classbtn btn-cirlce btn-primary按钮1/divdiv classbtn btn-cirlce btn-warning按钮2/divdiv classbtn btn-cirlce btn-default按钮2/div
/body(2) 用Bootstrap框架 !-- 引入 Bootstarp中的CSS文件 --link relstylesheet href../libs/bootstrap-4.6.1/css/bootstrap.cssbody//只需添加对应的类名即可实现样式div classbtn btn-primary按钮1/divdiv classbtn btn-warning按钮2/divbutton classbtn btn-info按钮3/button//引入jQ库文件script src../libs/jquery/jquery-3.6.0.js/script//引入Bootstap的JS文件 script src../libs/bootstrap-4.6.1/js/bootstrap.bundle.js/script
/body补充Bootstrap4 框架设计图 4_响应式容器原理
4.1_屏幕尺寸的分割点Breakpoints
Bootstrap的一大核心就是响应式即开发一套系统便可以适配不同尺寸的屏幕。它底层原理是使用媒体查询来为布局和页面创建合理的断点(Breakpoints)然后根据这些合理的断点来给不同尺寸屏幕应用不同的CSS样式。Bootstrap 4设了5个断点来构建响应式系统5个断点分别为 Extra-Small、Small、Medium、Large、Extra large媒体查询是CSS的一项功能它允许你根据浏览器的分辨率来应用不同的CSS样式如 media (min-width: 576px){} 4.2_响应式容器Containers
Containers容器是 Bootstrap中最基本的布局元素并且该布局支持响应式。在使用默认网格系统时是必需的。
Containers容器用于包含、填充有时也会作为内容居中使用。容器也是可以嵌套但大多数布局不需要嵌套容器。
Bootstrap 带有三个不同的Containers容器
.container: 它在每个断点处会设置不同的max-width。.container-fluid在所有断点处都是 width: 100%。.container-{breakpoint}, 默认是width: 100%直到指定断点才会修改为响应的值。 5_网格系统Grid system
5.1_认识
在开发一个页面时经常会遇到一些列表例如商品列表这些列表通常都是通过行和列来排版。
对于这种列表-可以使用float来实现也可以使用flexbox布局实现。为了方便-对这种常见列表的布局Bootstrap框架对它进行了封装封装为一个网格系统Grid system。
网格系统是什么
Bootstrap网格系统是用于构建移动设备优先的强大布局系统可支持12列网格、5 个断点和数十个预定义类。提供了一种简单而强大的方法来创建各种形状和大小的响应式布局。底层使用了强大的flexbox来构建弹性布局并支持12列的网格布局。网格系统是使用container、row和col类来布局并且布局是支持响应的。
如何使用网格系统
编写一个container或container-fluid容器在container容器中编写row容器在row容器中编写列col容器。
比如使用Boostrap来实现一行3列的布局。 !-- 引入 Bootstarp中的CSS文件 --link relstylesheet href../libs/bootstrap-4.6.1/css/bootstrap.cssstyle.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}/stylebodydiv classcontainer!-- 【其类名的实际css样式如下】display: flexflex-wrap:wrap--div classrow!-- 【其类名的实际css样式如下】flex item: flex-grow: 1--div classcol item1/divdiv classcol item2/divdiv classcol item3/div/div/div
/body5.2_12列网格系统
从Bootstrap2开始网格系统从16 列转向12列网格原因之一是12列比以前的16列系统更灵活。
将一个容器(row)被划分为12列网格具有更广泛的应用因为 12 可以被 12、6、4、3、2 、1整除而 16列网格只能被 16、8、4 、2、1 整除所以12列网格能够在一行中表示更多种列数组合情况。
12列网格这意味着可将一行分解为12、6、4、3、2和1份
1列独占12等份2列每列占6等份3列每列占4等份4列每列占3等份。6列每列占2等份12列每列占1等份 5.3_网格系统的原理
网格系统是有container、row、col三部分组成底层使用flexbox来布局并且支持12列网格布局。
container或container-fluid是布局容器网格系统中必用的容器该容器也会应用在内容居中或作为包含其它内容等。
width: 100% / 某个断点的宽; - 布局的宽padding-right: 15px; - 让包含的内容不会靠在布局右边缘padding-left: 15px; - 让包含的内容不会靠在布局左边缘margin-right: auto; - 布局居中margin-left: auto; - 布局居中
row是网格系统中的每一行row是存放在container容器中。如果指定列宽那么一行最多可以存放12列超出列数会换行。
display: flex; - 指定row为弹性布局并支持12列网格布局flex-wrap: wrap; - 支持多行展示flex item。margin-right: -15px; - 抵消container右边15px的paddingmargin-left: -15px; - 抵消container左边15px的padding。
【row左右-15px的外边距margin是用来抵消container容器15px内边距实现row左右边缘和容器左右边缘对齐。可以理解为复制粘贴大小尺寸一模一样】
col是网格系统的每一列col是存放在row容器中
position: relative; - 相对定位布局flex-grow: 1 / flex:0 0 x%; - 自动拉伸布局或占百分比max-width: 100% / max-width: x%; - 最大的宽padding-right: 15px; - 让包含内容不会靠右边缘padding-left: 15px; - 让包含内容不会靠左边缘。 5.4_嵌套(nesting)
Bootstrap的网格系统是可以支持嵌套的例如
可以在某个网格系统的某一列上继续嵌套一个网格系统。当网格系统中的某一列嵌套一个网格系统的时候嵌套的网络系统可以省略container容器。因为网格系统中的col是可以充当一个container-fluid容器来使用col的属性和container-fluid的属性基本一样。
一个案例 用指定列宽( 语法col-{number} ) 的方式来实现一行8列的布局 link relstylesheet href../libs/bootstrap-4.6.1/css/bootstrap.cssstyle.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}/stylebody!-- 方式一 flex:列宽是自动拉伸并且每列的宽度是相等的【等列宽】 --div classcontainerdiv classrowdiv classcol item1/divdiv classcol item2/divdiv classcol item3/divdiv classcol item4/divdiv classcol item5/divdiv classcol item6/divdiv classcol item7/divdiv classcol item8/div/div/div!-- 方式二: 指定列宽 --div classcontainerdiv classrowdiv classcol-6 item !-- 嵌套网格系统( 嵌套的时候是可以省略container ) --div classrowdiv classcol-3 item1/divdiv classcol-3 item2/divdiv classcol-3 item3/divdiv classcol-3 item4/div/div/divdiv classcol-6 item!-- ( 嵌套的时候是可以省略container ) --div classrowdiv classcol-3 item1/divdiv classcol-3 item2/divdiv classcol-3 item3/divdiv classcol-3 item4/div/div/div/div/div
/body5.5_自动布局Auto-layout
col : 等列宽Equal-width。 底层代码是 flex-grow: 1, max-width: 100%。该类网格系统仅用flexbox布局。
【可以理解为每行的每个元素宽度相等总宽度被平分】 link relstylesheet href../libs/bootstrap-4.6.1/css/bootstrap.cssstyle.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}/stylebody!-- 网格系统-等列宽- flex-grow:1 --div classcontainerdiv classrowdiv classcol item1/divdiv classcol item2/divdiv classcol item3/divdiv classcol item4/divdiv classcol item5/divdiv classcol item6/divdiv classcol item7/divdiv classcol item8/divdiv classcol item9/divdiv classcol item10/divdiv classcol item11/divdiv classcol item12/divdiv classcol item13/divdiv classcol item13/divdiv classcol item13/divdiv classcol item13/divdiv classcol item13/divdiv classcol item13/divdiv classcol item13/div/div/div
/body col-auto : 列的宽为auto 自动列宽随着填充内容的大小变化 。其底层代码是 flex: 0 0 auto; width: auto !-- 网格系统-等列宽- flex-grow:1 --div classcontainerdiv classrow!-- 随着内容的宽度变化。 其余等列宽度均分 总宽度-自动列宽/剩余列的数量--div classcol-auto itemauto layout layout layout /div div classcol item1/divdiv classcol item2/divdiv classcol item3/div/div/divcol-{num}: 指定某个列的宽支持12列网格 其底层代码是 flex: 0 0 x%max-width: x%。
num的范围是1~12。比如说col-2意味着这个元素的宽度占这一行宽度的2/12也就是1/6. !-- 网格系统-等列宽- flex-grow:1 --div classcontainerdiv classrow!-- flex: 0 0 xx%; 超过12列就会自动换行可以理解为分子累加超过12--div classcol-1 item1/12/divdiv classcol-2 item2/12/divdiv classcol-3 item3/12/divdiv classcol-6 item6/12/divdiv classcol-1 item1/12/divdiv classcol-1 item1/12/divdiv classcol-1 item1/12/div /divdiv classrow!-- flex: 0 0 xx%; --div classcol-1 item1/12/divdiv classcol-2 item2/12/divdiv classcol-3 item3/12/divdiv classcol-6 item6/12/div/div/div运行效果如下图 5.7_响应式类Responsive Class
5个断点(Breakpoints) none(xs) : 576px 、sm : 576px、 md : 768px、 lg : 992、 xl : 1200px
响应式列布局的类
col-sm : 默认 width:100%当屏幕576px该类启用flexbox布局, 启用 flex-grow: 1max-width: 100%。col-md: 默认 width:100%当屏幕768px该类启用flexbox布局启用 flex-grow: 1max-width: 100%。col-lg : 默认 width:100%当屏幕992px该类启用flexbox布局启用 flex-grow: 1max-width: 100%。col-xl : 默认 width:100%当屏幕1200px该类启用flexbox布局, 启用 flex-grow: 1max-width: 100%。col-sm-{num} : 默认 width:100%当屏幕576px该类启用 (支持12列网格), 启用 flex: 0 0 x%。col-md-{num} : 默认 width:100%当屏幕768px该类启用 (支持12列网格), 启用 flex: 0 0 x%。col-lg-{num} : 默认 width:100%当屏幕992px该类启用 (支持12列网格), 启用 flex: 0 0 x%。col-xl-{num} : 默认 width:100%当屏幕1200px该类启用 (支持12列网格) , 启用 flex: 0 0 x%。
比如一个需求开发响应式列表xl屏幕显示6列在lg屏幕显示4列在md屏幕显示3列在sm屏幕显示2列特小屏(none)显示1列。 !-- 网格系统 --div classcontainerdiv classrow div classcol-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item1/divdiv classcol-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item2/divdiv classcol-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item3/divdiv classcol-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item4/divdiv classcol-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item5/divdiv classcol-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item6/div/div/div6_响应式工具类
6.1_认识
在开发响应式页面时可能会有这样的需求
某个功能在PC端可见但是在移动端不可见。因为移动端的屏幕比较小是不能把PC端中所有的内容都展示出来所以有些不重要的内容可能在移动端就被简化了这时就可以借用响应式的工具来实现该功能。
Bootstrap的响应式工具类-Display
为了更快地进行多端的开发可以使用Bootstrap提供的响应式工具类display该类可按设备显示和隐藏元素。为了避免为同一个网站开发出多个不同的版本PC、iPad、iPhone可以针对每个屏幕尺寸响应地隐藏和显示元素来实现在不同屏幕上显示不同的页面。
如何使用响应工具类display?
隐藏元素可以给某个元素添加 .d-none 类或 .d-{sm,md,lg,xl,xxl}-none 类中的任何一个。显示元素可以给某个元素添加 .d-block 类或 .d-{sm,md,lg,xl,xxl}-block 类中的任何一个 6.2_响应式工具类-Display
不同作用的类名 需求实现
某个元素只在lg(992px) 和 xl 屏显示大于xl的同时也大于lg故只需去掉d-xl-non即可e h1 classd-none d-lg-block某个元素只在lg(992px) 和 xl 屏显示/h1!-- 理解为这个元素本身是隐藏的然后屏幕分辨率满足lg、xl条件时显示 --某个元素只在lg(992px) 和 xl 屏隐藏
h1 classd-block d-lg-none某个元素只在lg(992px) 和 xl 屏隐藏/h1!-- 理解为这个元素本身是显示的然后屏幕分辨率满足lg、xl条件时隐藏 --某个元素只在 md(768px) 屏隐藏 h1 classd-block d-md-none d-lg-block某个元素只在 md(768px) 屏隐藏/h1!-- 理解为这个元素本身是显示的然后屏幕分辨率满足md条件时隐藏 --6.3_实用的工具类Utility classes
快速浮动Float
float-leftfloat-right
文本Text
text-left、text-right、text-centertext-{sm、md、lg、xl}-left
边框
borde border-top border-left …border border-primary border-success
截断文本 text-truncate 6.4_可访问性-辅助类了解
屏幕阅读器的适配专门针对残障人士设备的适配
.sr-only .sr-only 类可以对屏幕阅读器以外的设备隐藏内容即对屏幕阅读辅助器可见。.sr-only-focusable .sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来例如使用键盘导航的用户。对于需遵循可访问性的网站来说是很有必要的。
增强可访问性的辅助类针对残障人使用的设备的适配同时增强语义化
role”xxx” : 定义用户界面元素的类型作用增强Web可访问性使残障人士可以更好的使用Web内容。aria-*”xxx”: 增强可访问性当与role“xxx”结合使用时当元素的状态和属性发生变化时会触发辅助技术发出通知并将信息传达给用户 7_Bootstrap组件
访问官网 https://getbootstrap.com/docs/5.3/components/accordion/
可以复制其中的组件代码体验前提是安装好Bootstrap 8_项目
前提导入Bootstrap库以及JQ库。
效果图如下 8.1_导航栏 !-- 1.导航栏 --nav classnavbar navbar-expand-lgdiv classcontainer-fluid!-- logo --a classnavbar-brand href#img classlogo src./img/logo.png alt/a!-- 按钮 992才会显示出来 --button classnavbar-toggler typebutton data-togglecollapse data-target#navbarNavimg classexpand-icon src./img/show-icon.png alt/button!-- 导航列表 --div classcollapse navbar-collapse idnavbarNavul classnavbar-nav mr-auto!-- 使用自定义的样式 --li classtext-link activespan首页/span/lili classtext-linkspanAPI/span/lili classtext-linkspan解决方案/span/lili classtext-linkspan案例/span/lili classtext-linkspan新闻/span/lili classtext-linkspan关于我们/span/li/ulp classtext-link hot-linespan咨询热线4009910008/span/p/div/div/nav8.2_轮播图
HTML代码 !-- 2.轮播图 --!-- data-ridecarousel 当页面加载完成之后 录播图自动轮播 --div idcarouselExampleIndicators_liujun classcarousel slide!-- 指示器 --ol classcarousel-indicatorsli data-target#carouselExampleIndicators_liujun data-slide-to0 classactive/lili data-target#carouselExampleIndicators_liujun data-slide-to1/lili data-target#carouselExampleIndicators_liujun data-slide-to2/li/ol!-- 轮播图的图片 --div classcarousel-inner!-- 改为js动态加载图片 div classcarousel-item activeimg src./img/banner0.png classd-block w-100 alt.../divdiv classcarousel-itemimg src./img/banner1.png classd-block w-100 alt.../divdiv classcarousel-itemimg src./img/banner2.png classd-block w-100 alt.../div --/div!-- 分页:上一张 下一张 --button classcarousel-control-prev typebutton data-target#carouselExampleIndicators_liujun data-slideprevspan classcarousel-control-prev-icon/span/buttonbutton classcarousel-control-next typebutton data-target#carouselExampleIndicators_liujun data-slidenextspan classcarousel-control-next-icon/span/button/divJS代码
$(function() {var currentImg none // none big small// 1.准备数据var banners [{id:0,bigUrl: ./img/banner0.png,smUrl: ./img/banner0_sm.png},{id:0,bigUrl: ./img/banner1.png,smUrl: ./img/banner1_sm.png},{id:0,bigUrl: ./img/banner2.png,smUrl: ./img/banner2_sm.png}]// renderBanner(banners)
//加入了之前写的节流函数$(window).on(resize,throttle( function() {// console.log( $(this).outerWidth() ) // border paddig content var winWidth $(this).outerWidth()var isBigScreen winWidth 768if(currentImg none){// 调取这个函数来渲染界面renderBanner(banners, isBigScreen)} if(currentImg big !isBigScreen) { //当前为大屏要变为小屏renderBanner(banners, isBigScreen)}if(currentImg small isBigScreen) { //当前为小屏要变为大屏renderBanner(banners, isBigScreen)}}))$(window).trigger(resize)function renderBanner(banners [], isBigScreen) {currentImg isBigScreen ? big : small // 先把之前的定时器停掉$(.carousel).carousel(dispose)var banneHtmlString // 2.将数据渲染到页面上banners.forEach(function(item, index) {var active index 0 ? active :var imgUrl isBigScreen ? item.bigUrl: item.smUrlbanneHtmlString div classcarousel-item ${active} data-interval3000img src${imgUrl} classd-block w-100 alt.../div})$(.carousel-inner).empty().append(banneHtmlString)// 自动录播( 开始一个定时器 )$(.carousel).carousel(cycle)}})补充节流函数代码 function throttle(fn, interval 400, options { leading: true, trailing: true }) {// 1.记录上一次的开始时间const { leading, trailing } optionslet lastTime 0let timer null// 2.事件触发时, 真正执行的函数const _throttle function(...args) {// 2.1.获取当前事件触发时的时间const nowTime new Date().getTime()if (!lastTime !leading) lastTime nowTime// 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数const remainTime interval - (nowTime - lastTime)if (remainTime 0) {if (timer) {clearTimeout(timer)timer null}// 2.3.真正触发函数fn.apply(this, args)// 2.4.保留上次触发的时间lastTime nowTimereturn}if (trailing !timer) {timer setTimeout(() {timer nulllastTime !leading ? 0: new Date().getTime()fn.apply(this, args)}, remainTime)}}return _throttle}8.3_目标客户 版块
HTML代码 !-- 3.目标客户 --div classtarget-customer!-- 在小屏上是不可见 --h1 classtitle text-center d-none d-md-block目标客户/h1!-- 网格系统性 --div classcontainer-fluiddiv classrowdiv classcol-md-6 col-xl-3 itemimg class d-none d-md-block src./img/target-1.png altdiv classsub-title电子银行/divdiv classdesc text-centerp助力五大行、商业银行、城商行、农商行、农信社等/pp手机银行与直销银行APP消费场景升级/p/div/divdiv classcol-md-6 col-xl-3 item!-- 在小屏上是不可见 --img class d-none d-md-block src./img/target-2.png altdiv classsub-title金服平台/divdiv classdesc text-centerp助力钱包、小贷、基金、保险、信托、证券等/pp金融服务平台APP 消费场景升级/p/div/divdiv classcol-md-6 col-xl-3 itemimg class d-none d-md-block src./img/target-3.png altdiv classsub-title企业福利/divdiv classdesc text-centerp助力国有、私营、外资、人力资源公司等/pp企业报销与福利系统消费场景升级/p/div/divdiv classcol-md-6 col-xl-3 itemimg class d-none d-md-block src./img/target-4.png altdiv classsub-title智能终端/divdiv classdesc text-centerp助力机器人、汽车中控、电子屏、商用电视等/pp人工智能语音消费场景升级/p/div/div/div/div/divCSS代码。因为bootstrap没有符合的所以定制
.target-customer{min-height: 265px;background-color: var(--bg-target-color);
}.target-customer .title{height: 80px;line-height: 80px;font-size: 30px;color: var(--title-color);font-weight: normal;
}.target-customer .row .item{display: flex;justify-content: center;align-items: center;height: 135px;cursor: pointer;overflow: hidden;}.target-customer .sub-title{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 24px;color: var(--title-color);transition: top 0.6s ease;
}.target-customer .desc{position: absolute;top: 125%;left: 50%;width: 100%;opacity: 0;transform: translate(-50%, -50%);transition: top 0.6s ease;
}media (min-width: 768px){.target-customer .row .item:hover .sub-title{top: 35%;}.target-customer .row .item:hover .desc{top: 73%;opacity: 1;}}media (max-width: 768px){.target-customer .sub-title{top: 40%;font-size: 16px;}.target-customer .desc{top: 75%;opacity: 1;font-size: 14px;}.target-customer .row .item:nth-child(odd){background-color: white;}.target-customer .row .item:nth-child(even){background-color: var(--bg-target-color);}}cursor: pointer;
overflow: hidden;
}
.target-customer .sub-title{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-size: 24px; color: var(–title-color); transition: top 0.6s ease; }
.target-customer .desc{ position: absolute; top: 125%; left: 50%; width: 100%; opacity: 0; transform: translate(-50%, -50%); transition: top 0.6s ease; }
media (min-width: 768px){
.target-customer .row .item:hover .sub-title{ top: 35%; } .target-customer .row .item:hover .desc{ top: 73%; opacity: 1; }
}
media (max-width: 768px){ .target-customer .sub-title{ top: 40%; font-size: 16px; } .target-customer .desc{ top: 75%; opacity: 1; font-size: 14px; }
.target-customer .row .item:nth-child(odd){ background-color: white; }
.target-customer .row .item:nth-child(even){ background-color: var(–bg-target-color); }
} br
