Bootstrap实战---成长平台(栅格布局)

最新推荐文章于 2024-05-06 14:40:38 发布
最新推荐文章于 2024-05-06 14:40:38 发布
阅读量326 收藏 1
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118947282
版权
本文介绍了如何使用Bootstrap实现成长平台的响应式栅格布局，展示了如何组织内容和图片，以适应不同屏幕尺寸。通过实例演示了如何创建列、行和圆角卡片，配合Swiper插件和自定义CSS。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • Bootstrap实战—成长平台(栅格布局)

  • 目标布局
    在这里插入图片描述

  • 我的布局：不含JS和CSS特效
    在这里插入图片描述

  • 我的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>融职教育</title>
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--引入Bootstrap CSS-->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- 引入CSS Swiper插件 -->
    <link rel="stylesheet" href="css/swiper.min.css">

    <!--引入手风琴CSS-->
    <link rel="stylesheet" href="css/style.css">

    <!--引入 Dplayer css-->
    <link rel="stylesheet" href="css/DPlayer.min.css">



</head>
<body>



    <!-- 成长平台开始 -->
<section class="B-area mt-3 d-none d-lg-flex">


    <div class="container">
        <div class="row">
            <div class="col-12">
                <div>
                    <h4 class="d-inline-block">成长平台</h4><small class="text-muted pl-2">浸入到开发组中实习，在工作中学技术涨经验</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-1 rounded text-white text-center m-2 p-1 " style="background: url('images/h1.jpg');">
                <small>按职业划分<br>技术模块<br>【1】</small>
            </div>
            <img src="images/jtr.png" alt="" class="mt-5" style="height: 15px;">

            <div class="col-1 rounded text-white text-center m-2 p-1" style="background: url('images/h2.jpg');">
                <small>参与项目<br>模块开发<br>【1】</small>
            </div>
            <img src="images/jtr.png" alt="" class="mt-5"  style="height: 15px;">

            <div class="col-1 rounded text-white text-center m-2 p-1 pt-3" style="background: url('images/h3.jpg');">
                <small style="font-size: 14px;font-weight: 900;">... ...</small>
            </div>
            <img src="images/jtr.png" alt="" class="mt-5"  style="height: 15px;">

            <div class="col-1 rounded text-white text-center m-2 p-1" style="background: url('images/h1.jpg');">
                <small>按职业划分<br>技术模块<br>【N】</small>
            </div>
            <img src="images/jtr.png" alt=""  class="mt-5" style="height: 15px;">

            <div class="col-1 rounded text-white text-center m-2 p-1" style="background: url('images/h2.jpg');">
                <small>参与项目<br>模块开发<br>【N】</small>
            </div>
            <img src="images/jtr.png" alt="" class="mt-5"  style="height: 15px;">

            <div class="col rounded text-white text-center m-2 p-1 pt-3" style="background: url('images/h2.jpg');">
                <small >【智校云】产品研发部<br>开源项目研发部</small>
            </div>
        </div>

        <div class="row">
            <div class="col-1  text-center mx-1 p-1">
                <img src="images/jts.png" alt="" style="height: 15px;">
                <div class="rounded text-white  mt-1" style="background: url('images/h1.jpg');height: 180px;width: 95px;">
                    <p class="small"><br><br>知<br>识<br>闯<br>关</p>
                </div>
                <img src="images/jts.png" alt="" style="height: 15px;">
                <div class="rounded-circle text-white mt-2" style="background: url('images/h5.jpg');height:80px;width: auto;">
                    <p class="small p-2">入职<br>安排任务<br>指导</p>
                </div>
            </div>

            <div class="col-2 small" >
                <div style="margin-top: 100px;margin-left: 45px" class="w-100">
                    <div>
                        <p class="ml-5">海量学习资源</p>
                        <p class="ml-3">定制学习规划</p>
                        <p class="ml-0">大牛一对一身边指导</p>
                        <p class="ml-3">闯关式学习任务</p>
                        <p class="ml-5">可调解学习节奏</p>
                    </div>
                </div>
            </div>

            <div class="col" style="background:url(images/ldot.png) no-repeat;height: 300px;width: auto;margin-top: 55px;">
                <div class="rounded-circle " style="background: url('images/h1.jpg');height: 250px;width: 250px;margin-left: 20px;">
                    <div class="rounded-circle" style="position:relative; background:white url('images/lmonkey.png') no-repeat center;height: 120px;width: 120px;margin-left: 50px;top:70px;left:20px;"></div>
                </div>
            </div>  

            <div class="col">
                <div class="rounded-circle  " style="background: url('images/h2.jpg');height: 250px;width: 250px;margin-top: 60px;margin-left: -30px; ">
                    <div class="rounded-circle" style="position:relative; background: white url('images/zxy.png') no-repeat center;height: 120px;width: 120px;margin-left: 50px;top:70px;left:20px;">
                    <a href="https://www.lmonkey.com"></a>
                    </div>
                </div>
            </div>

            
            <!--注意图放在背景里面了-->
            <div class="col-2 small" style="position:relative;background:url(images/rdot.png) no-repeat;height: 300px;width: auto;margin-top: 55px;margin-right: 100px;">
                <div style="margin-top: 45px;margin-left: 40px;" class="w-100">
                    <p class="ml-0">浸入真实项目开发组中</p>
                    <p class="ml-2">开发真实商业上线项目</p>
                    <p class="ml-3">技术总监带队一起开发</p>
                    <p class="ml-2">团队合作开发</p>
                    <p class="ml-0">全套技能掌握</p>
                </div>
            </div>


            <div class="col-1  text-center mx-1 p-1">
                <img src="images/jtx.png" alt="" style="height: 15px;">
                <div class="rounded text-white  mt-1" style="background: url('images/h2.jpg');height: 180px;width: 95px;">
                    <p class="small py-5">外包项目<br>开发组<br>人员<br>离岸外包<br>驻场开发</p>
                </div>
                <img src="images/jtx.png" alt="" style="height: 15px;">
                <div class="rounded-circle text-white mt-2" style="background: url('images/h4.jpg');height:80px;width: auto;">
                    <p class="small py-3">就业指导<br>跳槽</p>
                </div>
            </div>
            
        </div>


        <div class="row shadow pt-2 rounded-circle border border-info mt-4"></div>

        
    </div>
</section>
<!-- 成长平台结束 -->



    <!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>


</body>
</html>
12.tornado操作之使用Bootstrap美化项目（Bootstrap的使用及font- awesome插件的使用）+ 静态文件的处理
孤寒者的博客
06-10 3万+
12.tornado操作之使用 Bootstrap 前端框架美化项目（Bootstrap的使用及font- awesome插件的使用）+ 静态文件的处理
Bootstrap：文字排版与图片样式
2401_84094979的博客
04-19 688
默认设置：Bootstrap 4 默认的font-size为 16px,为 1.5。默认的为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的元素。
Bootstrap实现的经典栅格布局效果实例【附demo源码】
08-30
主要介绍了Bootstrap实现的经典栅格布局效果,结合具体实例形式分析了基于BootStrap实现栅格布局的完整步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
响应式布局（一）——bootstrap栅格系统
weixin_30606669的博客
11-28 341
bootstrap根据不同屏幕尺寸，选择不同的栅格选项。一共有四种栅格选项，超小屏（手机）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。栅格系统分为12列，即每行最多可容纳12列。若<HTML>里，一个.row内包含的列（column）大于12个（即，一行中的栅格单元超过12个单元），则会自动排版，总之，一行只能最多12列，具体分析往后阅读。 一、 栅格系统的使用...
bootstrap4 网格布局实例_Bootstrap实现的经典栅格布局效果实例【附demo源码】
weixin_30300027的博客
01-14 805
本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考，具体如下：先来看看效果图：具体代码如下(某管理系统的Bootstrap实现)：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XXXXX系统body {padding-top: 50px;padding-bottom: 40px;col...
使用Bootstrap的栅格布局实现一个简单的demo
Amelian的博客
11-20 576
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个me
Element-UI布局问题全解析：排查、调试与版本迭代的终极指南
[Element-UI布局问题全解析：排查、调试与版本迭代的终极指南](https://res.cloudinary.com/practicaldev/image/fetch/s--6lkj2ZPm--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/...
前端开发实战指南：HTML+CSS+JS+JQ+Bootstrap网页构建教程
它包含了一个预先设计好的组件库，比如导航栏、按钮、表单、模态框等，同时还提供了一个灵活的栅格系统，以适应不同屏幕尺寸的设备。Bootstrap极大地简化了响应式网页设计的复杂性。 6. 网站源码：源码是实现网站...
2024年前端基础知识第四章---移动端WEB开发之响应式布局，前端性能优化之APK优化
最新发布
2401_84437170的博客
05-06 423
1️⃣ 栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。2️⃣Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，响应式栅格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位
05-19
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位。
bootstrap栅格系统响应式布局
02-05
bootstrap栅格系统响应式布局，根据浏览器不同宽度进行自适应地样式响应调整，使pc、平板、手机三端不同风格完美融合~
响应式布局-BootStrap从基础到项目实战 （高级篇）
12-11
响应式布局-BootStrap从基础到项目实战 - 第二季（高级篇）
HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap--思维导图
04-08
内容概要：思维导图涵盖知识包括HTML+CSS+Javascript+H5C3+响应式web设计+Bootstrap，每个模块包括基础知识点，还有一些注意点，介绍仔细，某些知识点会有图解，代码，以及本人学习过程的笔记。 适合人群： 比较适合想要学习前端的小白新手，思维导图学习思路清晰，内容全 能够学到什么：思维导图把每个模块分得较细，基础知识点可以很容易掌握；在书写代码如果忘记了哪个知识点，也可以很快找到相应知识点。 阅读建议：想要学习前端，打好基础的可以尝试看看这个思维导图
bootstrap栅格布局和常用案例
weixin_42056687的博客
07-30 858
1，bootstrap 中文网 ： http://www.bootcss.com/ 英文网 : http://getbootstrap.com/ 2，容器 2.1流体布局容器 容器的width为auto，只是两边加了15px的padding。 2.2固定布局 容器的width会随设备分辨率的不同而生产变化 分辨率阈值 w >=1200 容器的width为1170 左右padding为15 （注意是borderBox） 1200>w >=992 容器的width为970
Bootstrap3栅格系统布局实例
歪脖先生的博客
05-02 3922
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先，其实也就是小设备优先。使用这些栅格类，再结合栅格系统的规则，就可以构建出千变万化的页面布局。 先看一个简单实例，来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统： <divclass="row"> <divclass="col-md-4"&g...
Bootstrap框架实战教程（栅格布局的应用）
巴胡子
03-22 1232
最近用Bootstrap框架学着做了一个项目，用时3天，很是粗糙，不过每个模块讲解都很详细，项目模板、素材已经放到github，欢迎下载，试看 https://zouzhuo939.github.io/Bootstrap_3/ 项目分为7大块 前提知识： 在项目中添加下好的Bootstrap框架的项目文件的时候需要下载好的文件 （下载不分前后，使用导入需要注意顺序） 1、jQuery库文件文件...
Bootstrap-栅格实例（二）
dengfengling999的博客
11-20 936
yann移动到第一个：class样式添加： col-md-pull-8 据right 往左移动2个位置 8(2*4) 个单位。webpack的calss添加：col-sm-push-6 此时缩小到sm 据left 往右移动1个位置 12/2=6。react的class添加：col-sm-pull-6 此时缩小到sm 据right 往左移动1个位置 6个单位。第二个跟第三个换一换：第二个class添加：col-lg-push-3 据左边移动3个单位，往右移一个位置。
bootstrap布局实例
weixin_33795833的博客
01-15 2679
1.路径导航 <!doctype html><html><head><meta charset="utf-8"><title>路径导航</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script typ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值