Bootstrap实战---你的收获栏目

最新推荐文章于 2022-07-10 18:28:12 发布
最新推荐文章于 2022-07-10 18:28:12 发布
阅读量95 收藏
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118661261
版权

Bootstrap实战—你的收获栏目
在这里插入图片描述

<!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">

    <style>

    </style>

</head>
<body>

    <style>

        .contain .span span{transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3;-ms-transition: 0.3s;}
        .contain .col-4{display:block; position: relative;}
        .contain i{position: absolute;width:100%; height:112px;border-radius:5px;left:0;top:3px;background:url(images/fuceng.png) no-repeat center top;opacity:0;}
        .contain .span{position: absolute;width:155px;height:90px;left:16px; top:17px;overflow:hidden;}
        .contain .span span{display:inline-block;background:#ff8e3b;position: absolute;width:100%;}
        .contain .span span:nth-child(1){width:2px;height:0px;bottom:0;left:0;}
        .contain .span span:nth-child(2){width:0px;height:2px;top:0;left:0;}
        .contain .span span:nth-child(3){width:2px;height:0px;top:0;right:0;}
        .contain .span span:nth-child(4){width:0px;height:2px;bottom:0;right:0;}
        .contain a:hover i{opacity:1;}
        .contain a:hover .span span:nth-child(1){height:90px;}
        .contain a:hover .span span:nth-child(2){width:155px;}
        .contain a:hover .span span:nth-child(3){height:90px;}
        .contain a:hover .span span:nth-child(4){width:155px;}

        h4.th4 {
            text-shadow: 1px 1px 1px #000000;
        }
    </style>


    <section class="mt-4">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h4 class="d-inline-block">你的收获</h4>
                    <small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
                </div>
            </div>
            <div class="row contain">
                <div class="col-4 p-1 col-lg pl-1">
                    <div class="text-center  rounded-lg " style="background: url('images/h1.jpg'); height: 120px;line-height: 120px;" >
                        <a href="" class="d-inline-block text-white text-decoration-none">
                            <h4>实习的岗位</h4>
                            <i class="d-none d-lg-block"></i>
                            <div class="span d-none d-lg-block">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-4 p-1 col-lg pl-1">
                    <div class="text-center rounded-lg " style="background: url('images/h2.jpg'); height: 120px;line-height: 120px;" >
                        <a href="" class="d-inline-block text-white text-decoration-none">
                            <h4>实习的岗位</h4>
                            <i class="d-none d-lg-block"></i>
                            <div class="span d-none d-lg-block">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-4 p-1 col-lg pl-1">
                    <div class="text-center  rounded-lg " style="background: url('images/h3.jpg'); height: 120px;line-height: 120px;" >
                        <a href="" class="d-inline-block text-white text-decoration-none">
                            <h4>实习的岗位</h4>
                            <i class="d-none d-lg-block"></i>
                            <div class="span d-none d-lg-block">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-4 p-1 col-lg pl-1">
                    <div class="text-center  rounded-lg " style="background: url('images/h4.jpg'); height: 120px;line-height: 120px;" >
                        <a href="" class="d-inline-block text-white text-decoration-none">
                            <h4>实习的岗位</h4>
                            <i class="d-none d-lg-block"></i>
                            <div class="span d-none d-lg-block">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-4 p-1 col-lg pl-1">
                    <div class="text-center  rounded-lg " style="background: url('images/h5.jpg'); height: 120px;line-height: 120px;" >
                        <a href="" class="d-inline-block text-white text-decoration-none">
                            <h4>实习的岗位</h4>
                            <i class="d-none d-lg-block"></i>
                            <div class="span d-none d-lg-block">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-4 p-1 col-lg pl-1">
                    <div class="text-center  rounded-lg " style="background: url('images/h6.jpg'); height: 120px;line-height: 120px;" >
                        <a href="" class="d-inline-block text-white text-decoration-none">
                            <h4>实习的岗位</h4>
                            <i class="d-none d-lg-block"></i>
                            <div class="span d-none d-lg-block">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                    </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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap学习心得——前端学习阶段性总结（非知识性）
m0_46544453的博客
10-20 2374
在学习完HTML,CSS,JS,jQuery后，我花了两天进行了bootstrap的学习。主要就是结合文档进行一些视觉和使用方式的修改，用的主要还是前面三个的东西，这让我在实现一些东西的时候更省时间了。 在学习前面三个东西的时候我就在想，可不可以通过搞一些属于自己的通用的小东西来节省写页面的时间（那时只是听说过框架，在学jQuery时是第一次接触框架这个东西，但jQuery并没有给我焕然一新简单的感觉）。在了解完bootstrap后，这个框架给我了强烈的冲击：之前要写个把小时的东西现在从文档复制然后改几.
学习关于Bootstrap的感悟和体会
action_xing的博客
08-23 7108
前言： 这是这两天他的学习关于Bootstrap的感悟和体会Bootstrap是一个非常受欢迎的前端开发框架，该框架极大的提高前端团队的开发效率。 Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装，使开发人员可以轻松使用。 使用Bootstrap可以快速制作精美的响应式页面，并且兼容移动端Boostrap是最近几天学的一个新的开发框架，和之前学过的AUI框架来
Bootstrap学习心得
qq_36142336的博客
07-09 2429
最近开始学习Bootstrap，决定在博客上记录一些自己的学习心得，最终的目标是学习完成之后可以结合PHP和Laravel开发一个自己的个人网站并部署到阿里云上面。那么话不多说，马上开始今天的学习。 Bootstrap的功能什么的自然是不必多说，主要用来处理自适应的问题，让不同屏幕大小的设备都可以看到最适合的界面。 由于Bootstrap使用了一些HTML5属性和CSS属性，所以为了让这些属性
bootstrap今天的学习心得
weixin_34090562的博客
04-21 156
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap-5.1.3-dist.zip
11-11
bootstrap 发布版本 5.1.3
bootstrap-3.4.1-dist
12-25
bootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-distbootstrap-3.4.1-...
bootstrap-table-master.rar
06-18
bootstrap框架是世界最好的前端框架之一，关于table格式数据操作需要的依赖Js文件以及其他需要的文件，下载此文件后可以直接将min文件引入到项目中进行使用。
bootstrap-switch.min.js
04-22
bootstrap-switch.min.js
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
30分钟快速掌握Bootstrap框架
11-25
什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 最近空余时间比较多，今天先给大家介绍一个前端“样式”框架——Bootstrap。 一、Bootstrap 整体架构 为什么在引言我称为Bootstrap为一个前端样式框架呢？可能这样的称谓并不是很准确，但是我觉得这样的称呼可以让一
bootstrap学习总结
binyao02123202的专栏
06-10 3199
bootstrap学习总结-js组件(四) 摘要: 这次我们来看下js组件的使用，本篇文章会有点长，希望大家可以耐心看，相信收获会有不少。不少园友加我好友，表示喜欢我写文字的风格，简单明了，这里，再次谢谢你们的支持。一方面，博主自身技术有限，写的东西都比较基础，另一方面，博主写的东西，都是根据自己的理解，把复杂的东西用最简单的语言表达出来。所以，写的阅读全文 posted @ 
bootstrap学习笔记心得1
dear_Alice_moon的专栏
10-11 666
Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。 Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多JQuery插件：莫泰局昂、标签页、滚动条
温故而知新——学习Bootstrap的一点经验
qq_64133626的博客
07-04 1135
1、首先，作为Bootstrap的初学者，在开始使用它之前，必需先了解Bootstrap及其工作方式；了解如何将其导入书面代码中以及如何构建Bootstrap项目。在开始编写之前，需要研究其相关代码。Bootstrap文档的所有信息都可以在相关网站上找到：2、其次，掌握HTML5、CSS3和JavaScript的相关知识，并安装最新版本的Bootstrap。3、然后，掌握Bootstrap的重点就是尽可能多地练习使用它。尝试构建一个实际的网站并一边学习一边参阅参考指南来测试该框架。4、另外，插件是网站设计的
【Bootstrap-学习小结】
橙子的博客
07-10 945
简介：是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性， 拥有样式库、组件和插件。常用来开发响应式布局（1）基本结构：栅格系统 （2）丰富的css样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式。 （3）布局组件：有丰富的组件库 （4）插件：基于jQuery的插件，功能强大。（1）浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。 （2）浏览器内核主要包括Blink、WebKit和Trident等。 （3）PC端的浏览器主要包括Google
Bootstrap 学习总结
uj
06-23 887
学习总结 学习总结 流程 Grid System原理及页面布局方式 响应式设计 使用教程 网页设计 必须掌握知识 学习原则 界面设计的原则 Bootstrap知识 注意事项 开发工具 参考资料 资料 入门指导 日常参考 说明 快速构建 流程 Grid System原理及页面布局方式 响应式设计 只设计一套页面，却可以在PC、平板和各种手机上得...
html实训收获,实训收获以前端框架bootstrap/jquery总结（一）
weixin_35775446的博客
06-07 1319
学校在大三的时候开了实训课程，八人组队去完成一个为期六周的进销存管理系统。在这六周里，我从一个只会写粗糙静态页面的前端菜鸟，变成了有那么一丢丢经验的前端菜鸟。我仍然很菜，可是我打算把这段时期学习到的前端知识总结一下，就当是记念这段实训生活吧！javascript进销存管理系统主要以表格为主，进行一些新增、统计、删除的操做，其中表格大体分为两类：可编辑的和点击按钮后可编辑的。可是普通的表格相似于的定...
bootstrap实践学习总结（一）
小石头
10-15 6820
1、导航中左右两块内容，左边logo，右边用户信息等 类如上图，css定义如下： 左侧：.logo      右侧：.navbar .main-header .logo{ float:left; display:block; width:230px; ……} .main-header > .navbar{ margin-left: 230px;……margin-bottom:0px
Bootstrap flex-column
最新发布
05-25
请注意，如果你使用 Bootstrap 4 或更早版本，则应该使用类名“flex-column”和“d-flex”来创建 Flex 容器。如果你使用 Bootstrap 5，则可以使用类名“flex-column”代替“d-flex flex-column”。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值