Bootstrap实战---实习目标栏目开发（弹性布局d-flex）

最新推荐文章于 2024-04-21 13:20:41 发布
最新推荐文章于 2024-04-21 13:20:41 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118855183
版权

Bootstrap实战—实习目标栏目开发（弹性布局d-flex）
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>融职教育-sea</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">

    <style>

    </style>

</head>
<body>
   
    

    <!--实习目标开始-->
    <section class="mt-4 bg-light">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div>
                        <h4 class="d-inline-block">实习目标</h4>
                        <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                    </div>
                </div>
            </div>
             
            <div class="row">
                <div class="col-sm-12 col-md-6 mb-4">
                    <div class="d-flex flex-column bg-white shadow">
                        <div class="d-flex flex-row text-white m b-4" style="background: #2C8DFB";">
                            <div class="mr-auto p-3"><h4><a href="#" class="text-white text-decoration-none">Java开发工程师</a></h4></div>
                            <div class="mr-2 p-3"><a href="#" class="btn btn-primary border-white text-white text-decoration-none" style="font-size: 13px;">了解更多</a></div>
                            <div class="p-3"><a href="#" class="btn  btn-primary  border-white  text-white text-decoration-none" style="font-size: 13px;">申请试岗</a></div>
                        </div>

                        <div class="d-flex flex-row mt-3 ">
                            <div class="d-flex flex-column flex-fill text-center  " >
                                <figure class="figure ">
                                    <img src="images/java_icon.png" class="figure-img img-fluid rounded" style="max-width: 150px;" alt="...">
                                    <figcaption class="figure-caption" style="color:#2C8DFB">
                                        排行榜第一的编程语言<br>
                                        重点的招聘方向
                                    </figcaption>
                                  </figure>
                                  <figure class="figure " >
                                    <img src="images/jteam.png" class="figure-img img-fluid rounded" style="max-width: 150px;" alt="...">
                                    <figcaption class="figure-caption" style="color:#2C8DFB">
                                        我的项目组
                                    </figcaption>
                                  </figure>
                            </div>
                            <div class="d-flex flex-column flex-fill ">
                                <div class="media">
                                    <img src="images/javait.png" class="m-4" alt="...">
                                    <div class="media-body align-self-center text-primary">
                                      <h6 class="mt-0">掌握的技术</h6>
                                    </div>
                                </div>
                                <div class="media">
                                    <img src="images/javait.png" class="m-4" alt="...">
                                    <div class="media-body align-self-center text-primary">
                                      <h6 class="mt-0">掌握的技术</h6>
                                    </div>
                                </div>
                                <div class="media">
                                    <img src="images/javait.png" class="m-4" alt="...">
                                    <div class="media-body align-self-center text-primary">
                                      <h6 class="mt-0">掌握的技术</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-column flex-fill text-center m-4">
                                <div class="btn btn-broder border-primary p-2  rounded-circle text-white bg-primary">
                                        0基础<br>
                                        入职
                                </div>
                                <div>
                                    <img src="images/Javajt.png" class="figure-img img-fluid rounded" style="max-width: 30px;" alt="...">
                                </div>
                                <div class="btn btn-primary">
                                    学习+工作<br>
                                    成长规划
                                </div>
                                <div>
                                    <img src="images/Javajt.png" class="figure-img img-fluid rounded" style="max-width: 30px;" alt="..."> 
                                </div>
                                <figure class="figure">
                                    <img src="images/javajl.png" class="figure-img img-fluid rounded" style="max-width: 150px;" alt="...">
                                    <figcaption class="figure-caption text-primary">
                                        收获的简历
                                    </figcaption>
                                  </figure>
                            </div>
                        </div>



                        
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 mb-4">
                    <div class="d-flex flex-column bg-white shadow">
                        <div class="d-flex flex-row text-white m b-4" style="background: #2C8DFB";">
                            <div class="mr-auto p-3"><h4><a href="#" class="text-white text-decoration-none">Java开发工程师</a></h4></div>
                            <div class="mr-2 p-3"><a href="#" class="btn btn-primary border-white text-white text-decoration-none" style="font-size: 13px;">了解更多</a></div>
                            <div class="p-3"><a href="#" class="btn  btn-primary  border-white  text-white text-decoration-none" style="font-size: 13px;">申请试岗</a></div>
                        </div>

                        <div class="d-flex flex-row mt-3 ">
                            <div class="d-flex flex-column flex-fill text-center  " >
                                <figure class="figure ">
                                    <img src="images/java_icon.png" class="figure-img img-fluid rounded" style="max-width: 150px;" alt="...">
                                    <figcaption class="figure-caption" style="color:#2C8DFB">
                                        排行榜第一的编程语言<br>
                                        重点的招聘方向
                                    </figcaption>
                                  </figure>
                                  <figure class="figure " >
                                    <img src="images/jteam.png" class="figure-img img-fluid rounded" style="max-width: 150px;" alt="...">
                                    <figcaption class="figure-caption" style="color:#2C8DFB">
                                        我的项目组
                                    </figcaption>
                                  </figure>
                            </div>
                            <div class="d-flex flex-column flex-fill ">
                                <div class="media">
                                    <img src="images/javait.png" class="m-4" alt="...">
                                    <div class="media-body align-self-center text-primary">
                                      <h6 class="mt-0">掌握的技术</h6>
                                    </div>
                                </div>
                                <div class="media">
                                    <img src="images/javait.png" class="m-4" alt="...">
                                    <div class="media-body align-self-center text-primary">
                                      <h6 class="mt-0">掌握的技术</h6>
                                    </div>
                                </div>
                                <div class="media">
                                    <img src="images/javait.png" class="m-4" alt="...">
                                    <div class="media-body align-self-center text-primary">
                                      <h6 class="mt-0">掌握的技术</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex flex-column flex-fill text-center m-4">
                                <div class="btn btn-broder border-primary p-2  rounded-circle text-white bg-primary">
                                        0基础<br>
                                        入职
                                </div>
                                <div>
                                    <img src="images/Javajt.png" class="figure-img img-fluid rounded" style="max-width: 30px;" alt="...">
                                </div>
                                <div class="btn btn-primary">
                                    学习+工作<br>
                                    成长规划
                                </div>
                                <div>
                                    <img src="images/Javajt.png" class="figure-img img-fluid rounded" style="max-width: 30px;" alt="..."> 
                                </div>
                                <figure class="figure">
                                    <img src="images/javajl.png" class="figure-img img-fluid rounded" style="max-width: 150px;" alt="...">
                                    <figcaption class="figure-caption text-primary">
                                        收获的简历
                                    </figcaption>
                                  </figure>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--实习目标结束-->


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




</body>
</html>
i see the future
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap系列之Flex布局
Debug的博客
02-25 2501
以上就是今天要讲的内容，本文仅仅简单介绍了bootstrap中flex的使用，并记录了常用的一些排列方式，如果这篇文章不足以满足需求，可以去官方文档查看详情。
Flex布局
jhqdlove的专栏
03-23 411
简介Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。.box{ display: -webkit-flex; /* Safari */ display: flex; } .inlin-box{ display: -webkit-inline-flex; /* Safari */ display: i
Bootstrap 5 保姆级教程（十四）：Flex
最新发布
Flag少侠的博客
04-21 1054
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。important;使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
Luo3255069063的博客
03-12 1841
Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）
BootStrap布局结构 Flex各种布局
舜岳的博客
03-27 1565
1、左右结构 <div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="width: 140px;"> 西 </div> ...
bootstrapTable-treeView：treeView的bootstrapTable扩展
02-05
TreeView演示注意数据中必须包含parentId属性，根节点parentId=null ，子例程中根据配置的parentId == options[treeId] 。例如配置项\u4e2dtreeId='id' ，那么子上游的parentId属性将父父的id 数据必须包含parentId...
bootstrap-5.1.3-dist.zip
11-11
这个"bootstrap-5.1.3-dist.zip"压缩包包含的是Bootstrap的5.1.3稳定版本，该版本提供了最新的功能改进和修复，旨在提升开发者的工作效率和用户体验。 在Bootstrap 5.1.3中，开发者可以期待以下关键知识点： 1. **...
bootstrap-5.0.0-beta3-dist.zip
05-02
在压缩包"bootstrap-5.0.0-beta3-dist"中，你将找到Bootstrap的所有必需文件，包括CSS、JS和图标文件。这些文件可以直接应用到你的项目中，以快速启动一个具有现代设计感和优秀用户体验的网站。 总的来说，...
bootstrap4-rtl:Bootstrap 4 RTL主题
05-25
bootstrap4-rtl Bootstrap 4 RTL主题 用法： <!-- Original Bootstrap 4.x -->... link rel =" stylesheet " href =" bootstrap-rtl.css " > 使用安装：npm install @ ghalamborm / bootstrap4-rtl
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
前端基础之《Bootstrap（14）—JavaScript插件_固定右侧栏目、回到顶部》
csj50的专栏
11-15 594
data-spy="affix"：代替position: fixed;data-offset-bottom="200"：离开底部的距离。data-offset-top="60"：离开顶部的距离。1、自己实现固定在侧边栏。2、affix实现固定。
学习Bootstrap 5的第十六天
m0_74293254的博客
10-30 259
Flex（弹性）布局Flex（弹性）布局弹性盒子(flexbox)Bootstrap 3 和 Bootstrap 4 & 5 的最大区别在于 Bootstrap 5 现在使用 flexbox 而不是浮动来处理布局。弹性的框布局模块，可以更轻松地设计弹性响应式布局结构，而无需使用浮动或定位。注意：IE9 及更早版本不支持 Flexbox。如果需要 IE8-9 支持，请使用 Bootstrap 3。它是最稳定的 Bootstrap 版本，团队仍然支持它进行关键错误修复和文档更改。
WEB前端网页设计-Bootstrap5 Flex（弹性）布局
君逍遥o
05-02 536
Bootstrap5 通过 flex 类来控制页面的布局。
Bootstrap Flex（弹性）布局
书香水墨
07-26 5537
一、Bootstrap Flex（弹性）布局 1.1 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。 注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。 以下...
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 4175
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
Bootstrap4之弹性盒子详解（flexbox）
热门推荐
吉帅振博客
06-21 1万+
个人认为：弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分，接下来，我就根据自己的理解详细讲述一下对于弹性盒子的看法。1.排序方式2.响应式布局...
Flex 布局教程：语法篇
leon-这个程序员不闷骚的博客
06-27 8281
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就
Bootstrap实战---电池充电特效编写（仅d-flex布局）
Season CSDN博客
07-18 441
Bootstrap实战—电池充电特效编写（d-flex布局） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-t
Bootstrap　　d-inline-flex　
05-27
d-inline-flex是Bootstrap框架中的一个CSS类名，用于将元素设置为内联弹性盒子。内联弹性盒子是一种通过弹性布局来实现自适应布局的方式，可以根据内容的大小和屏幕宽度动态地调整元素的位置和尺寸。与传统的布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值