【前端】Bootstrap案例：网格系统、鼠标悬浮动画显示、响应式布局

已于 2022-10-18 20:17:25 修改
阅读量1.5k 收藏 5
点赞数 2
分类专栏： 前端案例 文章标签： 前端 bootstrap css3
于 2022-10-18 20:13:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/karshey/article/details/127392879
版权

bootstrap框架系列案例

案例网址
【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691
【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528
【前端】Bootstrap案例：网格系统、鼠标悬浮动画显示、响应式布局https://blog.csdn.net/karshey/article/details/127392879

文章目录

目标

有响应式。

电脑全屏：

在这里插入图片描述

  • 鼠标若悬浮则如左红框
  • 否则如右红框
  • 要有动画效果

平板
在这里插入图片描述
手机：
在这里插入图片描述

  • 没有标题
  • 字直接显示
  • 没有图
  • 背景颜色

代码

0.html框架

<!-- 目标客户：网格系统 -->
<div class="target-customer">
   <div class="title">目标客户</div>

   <div class="container-fluid">
       <div class="row">
           <div class="col item">
               <img src="img/target-1.png" alt="">
               <div class="sub-title">电子银行</div>
               <div class="desc">
                   <p>助力五大行、商业银行、城商行、农商行、农信社等</p>
                   <p>手机银行与直销银行APP消费场景升级</p>
               </div>
           </div>
           <div class="col item">
               <img src="img/target-2.png" alt="">
               <div class="sub-title">金服平台</div>
               <div class="desc">
                   <p>助力钱包、小贷、基金、保险、信托、证券等</p>
                   <p>金融服务平台APP 消费场景升级</p>
               </div>
           </div>
           <div class="col item">
               <img src="img/target-3.png" alt="">
               <div class="sub-title">企业福利</div>
               <div class="desc">
                   <p>助力国有、私营、外资、人力资源公司等</p>
                   <p>企业报销与福利系统消费场景升级</p>
               </div>
           </div>
           <div class="col item">
               <img src="img/target-4.png" alt="">
               <div class="sub-title">智能终端</div>
               <div class="desc">
                   <p>助力机器人、汽车中控、电子屏、商用电视等</p>
                   <p>人工智能语音消费场景升级</p>
               </div>
           </div>
       </div>
   </div>
</div>

在这里插入图片描述

1.样式

1.1 背景和标题：目标客户
.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);
}

在这里插入图片描述

1.2 副标题和内容
/* 副标题和内容 */
.target-customer .row .item {
    /* 想要居中:这里使用弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;

    height: 135px;
    cursor: pointer;
}

.target-customer .sub-title {
    /* 这里要绝对定位:在容器里的父盒子已经是相对定位了 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 居中 */
    transform: translate(-50%, -50%);

    font-size: 24px;
    color: var(--title-color);
}

/*隐藏desc盒子*/
.desc {
    opacity: 0;
}

竟然是这样：图片没有在正中间。
原因：因为有desc的盒子，且把它隐藏了。
在这里插入图片描述
如果没隐藏，就是这样的：

在这里插入图片描述
显然是desc盒子把图片挤过去了。

先把desc删除即可得到我们的目标。方法：让它溢出，然后溢出隐藏。

/* 副标题和内容 */
.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);
}

.target-customer .desc{
    position: absolute;
    top: 132%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 要调整宽度 */
    width: 100%;
    font-size: 16px;
}

效果：
在这里插入图片描述

2.响应式布局

目标：

  • 大屏一行4个，每个都是col-lg-3
  • ipad一行2个，每个都是col-md-6
  • 手机一行1个

把每个item的class变成：

<div class="col-md-6 col-lg-3 item">

3.副标题和内容的动画

目标：鼠标悬浮在副标题上，副标题向上一点，p标签里的内容显示出来（向上）。
注意，让desc居中。

<div class="desc text-center">

css：

.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: 132%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 要调整宽度 */
    width: 100%;
    font-size: 16px;
    /* 透明度为0,就看不到了 */
    opacity: 0;

    transition: top 0.6s ease;
}

/* 动画 */
@media (min-width:768px) {
    .target-customer .item:hover .sub-title {
        top: 35%;
    }

    .target-customer .item:hover .desc {
        top: 75%;
        opacity: 1;
    }
}

效果：鼠标放上去就会显示。
在这里插入图片描述

4.手机屏幕时

目标，手机屏幕时：

  • 去除标题
  • 去除图片
  • 直接显示p标签（desc盒子）
  • 副标题字变小
  • 变背景色

去除标题：

<!-- d-none d-md-block表示默认不显示,ipad屏幕及以上显示 -->
<div class="title text-center d-none d-md-block">目标客户</div>

去掉图片：

<img class="d-none d-md-block" src="img/target-1.png" alt="">

另外三个要求：

/* 手机屏幕时 */
@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 .item:nth-child(odd){
        background-color: white;
    }
    /* 偶数 */
    .target-customer .item:nth-child(even){
        background-color: var(--bg-target-color);
    }
}

效果：
在这里插入图片描述

总体代码

html

<!-- 目标客户：网格系统 -->
<div class="target-customer">
    <!-- d-none d-md-block表示默认不显示,ipad屏幕及以上显示 -->
    <div class="title text-center d-none d-md-block">目标客户</div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-lg-3 item">
                <img class="d-none d-md-block" src="img/target-1.png" alt="">
                <div class="sub-title">电子银行</div>
                <div class="desc text-center">
                    <p>助力五大行、商业银行、城商行、农商行、农信社等</p>
                    <p>手机银行与直销银行APP消费场景升级</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 item">
                <img class="d-none d-md-block" src="img/target-1.png" alt="">
                <div class="sub-title">金服平台</div>
                <div class="desc text-center">
                    <p>助力钱包、小贷、基金、保险、信托、证券等</p>
                    <p>金融服务平台APP 消费场景升级</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 item">
                <img class="d-none d-md-block" src="img/target-1.png" alt="">
                <div class="sub-title">企业福利</div>
                <div class="desc text-center">
                    <p>助力国有、私营、外资、人力资源公司等</p>
                    <p>企业报销与福利系统消费场景升级</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 item">
                <img src="img/target-4.png" alt="">
                <div class="sub-title">智能终端</div>
                <div class="desc text-center">
                    <p>助力机器人、汽车中控、电子屏、商用电视等</p>
                    <p>人工智能语音消费场景升级</p>
                </div>
            </div>
        </div>
    </div>
</div>

css

.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: 132%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);

    font-size: 16px;

    transition: top 0.6s ease;
     /* 默认透明度为0,动画时候为1,有渐变效果地出现 */
     opacity: 0;
}

/* 大屏 */
@media (min-width:768px) {
    .target-customer .row .item:hover .sub-title {
        top: 35%;
    }
    .target-customer .row .item:hover .desc {
        top: 75%;
        opacity: 1;
    }
}

/* 小屏 */
@media (max-width:768px) {
    .target-customer .row .sub-title {
        top: 40%;
        font-size: 16px;
    }

    .target-customer .row .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);
    }
}

参考

transform:translate()方法坐标详解_无名之辈程序媛的博客-CSDN博客_transform: translate

karshey
关注
专栏目录
使用动画效果的Bootstrap页面设计
DgboSql的博客
09-21 763
Bootstrap是一个流行的前端开发框架，它提供了一套简洁而强大的工具和组件，可以帮助我们轻松地为网页添加动画效果。通过使用Bootstrap，我们可以轻松地为网页添加各种动画效果，包括淡入淡出、滑动、弹出框和滚动效果。淡入淡出效果是最常见的动画效果之一，它可以使元素在显示或隐藏时产生平滑的过渡效果。滚动效果可以在页面中创建平滑的滚动动画，使用户在点击导航链接时能够顺利滚动到相应的位置。在Bootstrap中，我们可以使用CSS类"collapse"和"slide"来实现滑动效果。
Bootstrap 动画过渡（Transitions）
soindy
03-24 9473
整理自慕课笔记 动画过渡（Transitions）: 源文件：transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法： * 调用统一编译的bootstrap.js； * 调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）。 tr
Bootstrap - Table表格内容及tooltip实现鼠标悬停悬浮显示信息
Mr_WoLong
06-14 3218
Bootstrap - Table表格内容及tooltip实现鼠标悬停悬浮显示信息
Bootstrap中的动画和图形效果
Wangxinlei_King的博客
09-20 2797
圆角 现在，所有现代浏览器都支持不带厂商前缀的 border-radius属性了。有鉴于此，我们没有提供 .border-radius()mixin，但是，Bootstrap does 提供...
bootstrap使用动画
m0_37058714的博客
06-25 8022
boorstrap使用动画一般需要两个配合( wow.js 库   aimate.css库)1.下载wow.js(   网址：https://github.com/matthieua/WOW/blob/master/dist/wow.min.js)    下载过后把wow.js文件放在自己建立的wow文件夹下，并引用2.在body里面加上下面的js代码&lt;script&gt; var wow...
【Bootstrap网格系统全攻略】构建响应式布局的秘籍
最新发布
07-04
1. **响应式布局**：Bootstrap的网格系统可以自动调整布局以适应不同的屏幕尺寸。 2. **预制组件**：提供了丰富的UI组件，如按钮、表单、导航条、卡片、弹窗等。 3. **定制性**：可以通过Sass变量轻松定制Bootstrap...
前端开发案例：bootstrap前端样式经典案例
05-28
1. **栅格系统**：Bootstrap的响应式栅格系统允许开发者轻松创建不同屏幕尺寸下的布局。它基于12列的网格，可以灵活地堆叠或分列，以适应手机、平板和桌面设备。 2. **预定义的样式和类**：Bootstrap提供了一系列...
Bootstrap 网格系统布局详解
08-31
Bootstrap 网格系统是一种响应式、移动设备优先的流式网格系统，可以随着屏幕或视口尺寸的增加自动分为最多12列。网格系统通过一系列包含内容的行和列来创建页面布局。在平面设计中，网格是一种由一系列用于组织内容...
Bootstrap商品图片网格布局代码
07-24
Bootstrap商品图片网格布局代码是利用流行的前端开发框架Bootstrap构建的一种高效、响应式的商品展示方案。在Bootstrap中，网格系统是核心特性之一，它允许开发者轻松地创建多列、响应式的网页布局，尤其适用于购物...
Bootstrap 案例
weixin_65089602的博客
05-01 453
案例思维导图 案例一：轮播图 代码展示： <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/lb1.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/lb
简单的bootstrap进度条动画特效
01-10
简单的bootstrap进度条动画特效~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
bootstrap一个小案例
08-16
包括导航条，carousel，利用栅栏的三栏布局，导航的标签页以及模态框等
Jasny-Bootstrap 的简单实例
01-17
JasnyBootstrap页面操作的的简单实例，可实现固定格式的文本。
H5 CSS3 bootStrap 的 一些简单事例
11-27
H5 CSS3 bootStrap 的 一些简单事例，给大家学习提供一点参考
非常酷炫的Bootstrap图片轮播动画
11-26
对于网站开发者来说，对展示内容增加一个滑动或者是轮播效果的是非常常见的需求。收费和免费的轮播插件多的是不胜枚举。其中很 多提供很多有用的配置选项和动态效果。 很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端 框架）的话。你可以参考一下bootstrap官方组件。 这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果。同时确保这个js组件自由扩展和快速上手。 介绍Animate.css 为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库，被形象的称为animate.css。 Dan E
简单的bootstrap实例
matthew_leung的博客
12-24 2704
一个简单的bootstrap- table例子，直接使用网络资源和和浏览器+文本就可以书写出来的实例。 &lt;!-- 引入bootstrap样式 --&gt; &lt;link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;!-- 引入...
bootstrap模板加载条动画
2304_76550555的博客
05-15 842
关于</li><li class="breadcrumb-item active" aria-current="page">我的
Bootstrap一个小案例
极客神殿
08-17 569
index.html &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;zh-CN&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt;
Bootstrap（五）——实现一个简单案例
猫与故巷的博客
05-17 549
Bootstrap实现一个简单案例1.目的效果2.设计实现 1.目的效果 2.设计实现 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Website Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s
BootStrap案例解析：响应式布局与实战
BootStrap是一款流行的前端开发框架，它提供了响应式布局的功能，使网页能在不同设备上自适应显示。响应式布局的关键在于媒体查询、网格系统和组件的灵活设计。在“响应式布局-BootStrap从基础到项目实战”的内容中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

karshey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值