Bootstrap实战---讲师列表栏目(图片)

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

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

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

    <style>

    </style>

</head>
<body>
 
    <!--你的总监开始-->
    <section class="mt-4">
        <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 d-none d-lg-block">
                <div class="col">
                    <div class="card w-100 text-white border-0" style="margin-top: 200px;">
                        <img src="images/cwbg.png" class="card-img shadow-lg" alt="...">
                        <div class="card-img-overlay d-flex flex-row mt-5">
                            <div class="w-25 p-2" style="margin-top:-235px">
                                <img src="images/phpjs4c.png" class="img-fluid" alt="">
                            </div>
                            <div class="w-75 p-2" style="margin-top: -50px">
                                <h5 class="card-title">高 洛 峰</h5>
                                <p class="card-subtitle">智校云创始人 & 系统架构师 & 畅销书《细说PHP》作者</p>
                                <p class="card-text">拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务， 
                                    具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，
                                    培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 
                                    其中，对Web系统开发深有研究，近年来致力于推广开源的PHP技术。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-5">
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card text-center">
                        <img src="images/eduglf.jpg" class="card-img-top" alt="...">
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card text-center">
                        <img src="images/eduglf.jpg" class="card-img-top" alt="...">
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card text-center">
                        <img src="images/eduglf.jpg" class="card-img-top" alt="...">
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="card text-center" >
                        <img src="images/eduglf.jpg" class="card-img-top" alt="...">
                        <div class="card-body" style="font-size: 14px;">
                            EduWork教学总监&智校云创始人<br>
                            畅销书《细说PHP》作者
                        </div>
                        <div class="card-footer">
                            <h6><strong>高 洛 峰</strong></h6>
                        </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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 布局图片列表
mao_mu_mu的博客
12-07 9788
  pageEncoding="UTF-8"%> http://java.sun.com/jsp/jstl/core"%>  String path = request.getContextPath();     String basePath = request.getScheme() + "://"   + request.getServerName() + ":" +
Bootstrap笔记(十) 图片篇
XI_MILU的博客
08-22 870
图片 响应式图片 响应式图片指的是图片会随着父元素的宽度自动缩放，最大宽度为图片的原尺寸。制作响应式图片只要在 <img>元素加上 .img-fluid 类别，图片就会套用 max-width:100%; 和 height:auto; 两个属性成为响应式图片。 範例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
Bootstrap——列表（无序列表、有序列表、定义列表）、代码（code、pre、kbd、samp、var）、图片（响应式图片、图片缩略图、图片对齐方式）
m0_69034993的博客
10-09 2572
除了CSS3提供的border-radius属性可以实现，在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。也可以通过设置max-width：100%，height：auto样式，来实现图片响应式效果。Bootstrap定义了.list-unstyled类样式，使用它可以移除默认的.list-style样式，并且设置左侧填充为0。（2）使用文本类.text-left、.text-center、.text-right，分别实现水平居中、居中和居右对齐。
Bootstrap-表单和图片
One By One
12-14 186
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head>...
Bootstrap快速入门之轮播效果&列表组&画像（图文框）&表单
m0_67768699的博客
05-02 1767
案例1：首页轮播图实现 1.什么是轮播效果(Carousel) 2.轮播效果的工作原理 3.包含字幕的轮播示例 案例2：首页书籍分类实现 1.什么是列组表 2..active列表(启用)状态示例 案例3：首页新书上架&热门书籍实现 1.什么是图文框 2.图文框示例 案例4：首页整合 案例5：实现登录&注册页面 1.Forms表单 2.Forms表单示例
bootstrap-5.1.3-dist.zip
11-11
综上所述，"bootstrap-5.1.3-dist.zip"是一个包含Bootstrap 5.1.3所有静态资源的压缩包，包括CSS、JavaScript文件以及必要的图片和其他资源，用于快速构建现代Web应用。无论你是初学者还是经验丰富的开发者，这个...
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
bootstrap-table-master.rar
06-18
在这个"bootstrap-table-master.rar"压缩包中，你将找到所有必要的资源来在你的项目中实现功能丰富的表格。 首先，Bootstrap Table提供了多种预定义的样式，使得表格在不同设备上都能保持良好的显示效果，尤其在...
bootstrap-5.0.0-beta3-dist.zip
05-02
在压缩包"bootstrap-5.0.0-beta3-dist"中，你将找到Bootstrap的所有必需文件，包括CSS、JS和图标文件。这些文件可以直接应用到你的项目中，以快速启动一个具有现代设计感和优秀用户体验的网站。 总的来说，...
bootstrap4-editable.7z
08-02
压缩包中的“bootstrap-editable.js”就是实现这一功能的关键文件，它集成了x-editable插件，使得BootstrapTable具备了行内编辑的能力。 首先，我们需要在HTML文件中引入必要的库，包括Bootstrap CSS和JS，...
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
bootstrap卡片图文列表布局代码.zip
07-05
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
Bootstrap中CSS通用样式——排版，列表，代码，图片
qq_66198247的博客
10-18 1745
HTML5定义了若干个标签强调的标签，有、、、、、、等，在Bootstrap4中同样也可以使用，用来为元素添加强调样式。(3）固定不同级别标题字体大小，一级为2.5rem，二级为2rem,三级为1.75rem，四级为1.5rem，五级为1.25rem，六级为1rem。表示用户要输入的内容。缩略语是指在页面中使用缩写的形式表示，当鼠标指针悬停在缩写词上时会显示全部的内容，HTML5提供的标签用来实现缩略语。
Bootstrap图文列表缩略图大小不一致问题
hq.zheng的博客
01-28 8360
一.如果上传的图片大小不一致会有下图结果 二.解决方案  方式一：给图片加上固定的宽高值 &lt;img src="/test.jpg" alt="..." width="100%" height="100px"&gt; 解决了图片列表大小不一，排列错乱的问题，缺点：一是图片变形 方式二：将图片按比例裁剪成固定像素宽高的图片 网上插件很多，我用的是jQThumb  1.引入插件...
bootstrap 卡片card图片布局
IT从业者
02-22 2903
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" /> <title>热卖商品分析-xxx V1.0.1</title> <link rel="stylesheet" ...
bootstrap-3-上传图片-列表显示
06-16 462
效果 导入的js和css <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAk...
Bootstrap 关于列表、表单、图片的使用
qq_27460209的博客
04-13 560
列表: <ul class="list-inline"> <li>首页</li> <li>岗位课</li> <li>商城</li> <li>关于我们</li> </ul> <dl class="dl-horizontal"> <dt>购...
bootstrap----导航栏 图片布局
sunnyboysix的博客
11-29 6060
bootstrap----导航栏 图片布局
Bootstrap--响应式显示图片信息列表
weixin_30713953的博客
04-11 344
HTML布局 <link href="~/Content/StyleSheet1.css" rel="stylesheet" /> <div class="row"> <div class="col-sm-2 col-md-2" style="min-height:400px;border:1px #eee4e4 solid; border-radi...
Bootstrap flex-column
最新发布
05-25
Bootstrap flex-column 是一个 CSS 类，它用于使用 Flexbox 布局将元素垂直排列。Flexbox 是一种强大的布局模式，可以让你轻松地创建灵活的、响应式的布局。 当你使用 flex-column 类时，它会将父元素设为 Flex ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值