Bootstrap实战练习---模仿前端网页(导航栏+轮播图+Media)_一、设计首页使用bootstrap框架设计如下图所示的页面1、设计导航栏2、设计轮播图3-程序员宅基地
技术标签： HTML/CSS/JS/Bootstrap bootstrap
-
Bootstrap实战—模仿前端网页(导航栏+轮播图+Media)
-
原网页效果图
连接
-
我的网页效果
-我的代码
<!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>
<div class="container-fluid shadow bg-white">
<!--导航栏-->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link pl-4 " href="#" style="background: url('images/hl.png') no-repeat 6px 10px;">融职科技</a>
</li>
<li class="nav-item ">
<a class="nav-link pl-4" href="#" style="background: url('images/llt.png') no-repeat 6px 10px;">学习猿地</a>
</li>
<li class="nav-item ">
<a class="nav-link pl-4" href="#" style="background: url('images/zzt.png') no-repeat 6px 10px;">智校云</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
培训模式
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">面授模式</a>
<a class="dropdown-item" href="#">坐班模式</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">实习模式</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
培训方向
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web全栈工程师</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Java全栈工程师</a>
<a class="dropdown-item" href="#">PHP全栈工程师</a>
<a class="dropdown-item" href="#">Web前端工程师</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">UI设计师+产品经理</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Web全栈就业班</a>
</li>
</ul>
<div class="nav-item dropdown float-right">
<a class="nav-link dropdown-toggle pl-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" style="background: url('images/微信.jpg') no-repeat ;">
咨询微信
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">158-0168-4338</a>
<a class="dropdown-item" href="#">QQ：97484619</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><img src="images2/qrcode.png" alt=""></a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
<!--标题栏-->
<div class="row pt-5">
<div class="col m-2">
<img src="images/logo.png" alt="" style="height: 50px;width: auto;">
</div>
<div class="col m-2 h5 mt-3">在工作中学习，在学习中工作</div>
<div class="col m-2">
<span class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
学习辕地
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Java全栈</a>
<a class="dropdown-item" href="#">Python全栈</a>
<a class="dropdown-item" href="#">Golang全栈</a>
<a class="dropdown-item" href="#">PHP全栈</a>
<a class="dropdown-item" href="#">大数据全栈</a>
<a class="dropdown-item" href="#">Web前端全栈</a>
<a class="dropdown-item" href="#">UI/UE全栈</a>
<a class="dropdown-item" href="#">Linux全栈</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">官网首页</a>
</div>
</span>
<span class="dropdownk">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
智校云
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">CRM系统</a>
<a class="dropdown-item" href="#">在线教育系统</a>
<a class="dropdown-item" href="#">考试系统</a>
<a class="dropdown-item" href="#">财务系统</a>
<a class="dropdown-item" href="#">教务系统</a>
<a class="dropdown-item" href="#">就业系统</a>
<a class="dropdown-item" href="#">代理系统</a>
<a class="dropdown-item" href="#">分销系统</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">全部产品</a>
</div>
</span>
</div>
</div>
<!--轮播图-->
<div class="row">
<div class="col m-1">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/player/p1.png" class="d-block w-100" alt="..." style="height: 400px;">
<div class="carousel-caption d-none d-md-block">
<h3>Web全栈开发就业班，你找不到比这个更好的培训班了</h3>
<h5>你将掌握全套Web技术，能参与所有Web项目开发， 有科学的教学方式，让小白轻松就能学好的方法， 拥有10大行业第一的核心优势，前100报名只需*****元。</h5>
<div class="btn btn-primary"><a class="text-white text-decoration-none" href="https://www.baidu.com/" target="_blank">了解更多</a></div>
</div>
</div>
<div class="carousel-item" >
<img src="images/player/p2.png" class="d-block w-100" alt="..." style="height: 400px;">
<div class="carousel-caption d-none d-md-block">
<h3>浸入【智校云】项目组实习，CTO带着你做项目</h3>
<h5>提供准程序员的实习岗位，在工作中学技术，积累工作经验，轻松就业，挑战高薪。 拥有不同基础浸入项目组的实习方案，小白也可以培养成为开发大牛，高薪就业。</h5>
<div class="btn btn-primary"><a class="text-white text-decoration-none" href="https://www.baidu.com/" target="_blank">了解更多</a></div>
</div>
</div>
<div class="carousel-item">
<img src="images/player/p3.png" class="d-block w-100" alt="..." style="height: 400px;">
<div class="carousel-caption d-none d-md-block">
<h3>千人千面的人才培养方案，将学习融入在工作中</h3>
<h5>EduWork除了有面授培训班，并首创“坐班”的学习模式，和参加工作很类似， 按规定的时间来公司坐班学习，知识闯关的学习模式，技术总监身边指导，全套的学习资源和单录制的新课程， 高出面授一倍的培训效果。</h5>
<div class="btn btn-primary"><a class="text-white text-decoration-none" href="https://www.baidu.com/" target="_blank">了解更多</a></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--实习的岗位-->
<div class="row my-5">
<div class="col m-1">
<div class="media">
<div class="media-body">
<h1 class="font-weight-bold my-3">实习的岗位</h1>
<p class="lead">程序员的开发工作，需要有一定的技术积累才能胜任，带薪实习也一样需要你有开发的能力，定义的是“劳动者”。 我们打造的收费实习岗位， 可以接收不同基础的实习人员，在工作中学习，定义的是“学习者”。 零基础参加实习由主管带着学习， 学会一个模块参与部分项目模块开发， 掌握一定技能后全程进入项目组参与商业项目开发。 有基础则可直接进入项目组，由总监带着你做项目，积累开发经验。</p>
<h3 class="text-muted my-3">有大牛带着的工作</h3>
</div>
</div>
</div>
<div class="col-5 m-1 shadow">
<img src="images2/media/实习的岗位.jpg" class="mr-3" alt="..." style="height: 100%;width: 100%;">
</div>
</div>
<hr class="my-4">
<!--工作的经验-->
<div class="row my-5">
<div class="col-5 m-1 shadow">
<img src="images2/media/工作的经验.jpg" class="mr-3" alt="..." style="height: 100%;width: 100%;">
</div>
<div class="col m-1">
<div class="media">
<div class="media-body">
<h1 class="font-weight-bold my-3">工作的经验</h1>
<p class="lead">开发工作的经验基本上都是新人找工作必要条件，开发公司基本都不会要新人，而新人又没有工作经验，这是一个矛盾的痛点。 所有参加培训的学员多数都会去包装简历，虚拟开发经验，为自己赢得面试和工作的机会。 包装简历也会抹去自己的培训经历， 面试官多数都不喜欢培训出来的学员， 认为是填鸭式教育， 没有多少解决问题的能力。而在这里入职浸入在开发组中， 在工作中学习， 又参与商业项目开发， 锻炼的是开发能力和解决问题的能力， 在简历中可以写真实的开发经验。</p>
<h3 class="text-muted my-3">浸入在开发组</h3>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!--全栈的技能-->
<div class="row my-5">
<div class="col m-1">
<div class="media">
<div class="media-body">
<h1 class="font-weight-bold my-3">全栈的技能</h1>
<p class="lead">按职位发展方向培养技术，例如Java工程师方向需要掌握的不仅是Java语言本身技术， JavaSE、JavaEE、SSM、SSH框架等， 还需要掌握关系型和非关系型两种以上的数据库，主流开发工具的使用。 掌握Linux操作和服务器的运维技术， 掌握全套前端开发技能， 包括HTML、CSS、JavaScript、jQuery、VUE、REACT等。以及分布式和程序架构、项目开发流程、业务流程和团队开发合作等。</p>
<h3 class="text-muted my-3">掌握一门技术，而不只是一门语言</h3>
</div>
</div>
</div>
<div class="col-5 m-1 shadow">
<img src="images2/media/全栈的技能.jpg" class="mr-3" alt="..." style="height: 100%;width: 100%;">
</div>
</div>
<!--商业的项目-->
<div class="row my-5">
<div class="col-5 m-1 shadow">
<img src="images2/media/商业的项目.jpg" class="mr-3" alt="..." style="height: 100%;width: 100%;">
</div>
<div class="col m-1">
<div class="media">
<div class="media-body">
<h1 class="font-weight-bold my-3">商业的项目</h1>
<p class="lead">参与商业项目实战开发与培训公司的教学项目是有本质的区别的， 首先，目标不同，教学项目为了讲解某个技术点在项目中的应用，功能不一定全部实现， 而商业项目需要上线真实应用， 所有业务需求必须全部完成。 其次，项目架构不同，教学项目基本上都是拼凑的架构，为了将所学应用到项目中， 而商业项目必须为将来扩展维护及多模块建设全方位思考。再有抗压设计， 教学项目在本地访问没有多大问题，如果上线应用,用户量上来没有几个能扛住的。 还有细节的考虑， 教学项目只实现一些功能的大框，而商业项目不放过每个细节， 有时只为了一个非常小的业务实现，就要写出教学项目十几倍的代码量。所以参与商业项目开发，才能掌握项目开发的本质,学到真技术，积累经验。</p>
<h3 class="text-muted my-3">真实上线应用</h3>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!--人脉的积累-->
<div class="row my-5">
<div class="col m-1">
<div class="media">
<div class="media-body">
<h1 class="font-weight-bold my-3">人脉的积累</h1>
<p class="lead">一个好汉三个帮一个篱笆三个桩， 走技术路线，不管是学习阶段还是工作阶段， 一定要结交一些志同道合的朋友。在学习中可以一起探讨、互相督促、共同进步。 在工作中更是互相帮忙， 同舟共济。浸入在项目组中，不仅和同路的开发者成为同事， 全公司的各部门的同事， 以及你的技术总监，都将成为你在以后工作道路上第一波积累的人脉，扩宽你的职业道路。</p>
<h3 class="text-muted my-3">开发中结交同路好友</h3>
</div>
</div>
</div>
<div class="col-5 m-1 shadow">
<img src="images2/media/人脉的积累.jpg" class="mr-3" alt="..." style="height: 100%;width: 100%;">
</div>
</div>
<hr class="my-4">
<!--期望的工作-->
<div class="row my-5">
<div class="col-5 m-1 shadow">
<img src="images2/media/期望的工作.jpg" class="mr-3" alt="..." style="height: 100%;width: 100%;">
</div>
<div class="col m-1">
<div class="media">
<div class="media-body">
<h1 class="font-weight-bold my-3">期望的工作</h1>
<p class="lead">IT职业是目前性价比最高的工作，待遇好发展空间大。但入行的门槛比较高，需要技术和经验的积累， 自学成长慢，时间长容易放弃， 报班学习不仅费高，还需要包装简历， 弄虚作假才能走上工作岗位， 在试用期有很大的心里压力。 而通过实习， 浸入到项目组中， 在工作中学习， 获得技术和工作经验， 相当于助跑阶段， 提升自己的开发技能，快速并入企业开发的跑道上。</p>
<h3 class="text-muted my-3">为就业积累能量</h3>
</div>
</div>
</div>
</div>
<hr class="my-4">
</div>>
<!--页脚-->
<footer class="container-fluid">
<div class="row bg-dark text-white">
<div class="col mt-5">
<div class="pl-3 m-3">EduWork 是智校云旗下专注程序员培养的实习平台。</div>
<div class="pl-3 m-3">
<a class="text-white text-decoration-none p-3" href="#">关于我们</a>
<a class="text-white text-decoration-none p-3" href="#">联系我们</a>
<a class="text-white text-decoration-none p-3" href="#">加入我们</a>
<a class="text-white text-decoration-none p-3" href="#">帮助中心</a>
<a class="text-white text-decoration-none p-3" href="#">学习猿地</a>
<a class="text-white text-decoration-none p-3" href="#" >智校云</a>
</div>
<div class="pl-3 text-muted m-3">2018-2020 北京智校云网络科技有限公司 版权所有</div>
</div>
<div class="col-2 mt-5">
<figure class="figure p-3">
<img src="images2/qrcode.png" class="figure-img img-fluid rounded" alt="..." style="height: 100px;width: 100px;">
<figcaption class="figure-caption text-center">关注我们</figcaption>
</figure>
</div>
</div>
</footer>
<!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
智能推荐
python中文显示不出来_解决Python词云库wordcloud不显示中文的问题-程序员宅基地
文章浏览阅读2.6k次。解决Python词云库wordcloud不显示中文的问题2018-11-25背景：wordcloud是基于Python开发的词云生成库，功能强大使用简单。github地址：https://github.com/amueller/word_cloudwordcloud默认是不支持显示中文的，中文会被显示成方框。安装：安装命令：pip install wordcloud解决：经过测试发现不支持显示中文..._词云python代码无法输出文字
JVM在线分析-解决问题的工具一(jinfo,jmap,jstack)_jmap 在线分析-程序员宅基地
文章浏览阅读807次。扩展。_jmap 在线分析
台式计算机cpu允许温度,玩游戏cpu温度多少正常（台式电脑夏季CPU一般温度多少）...-程序员宅基地
文章浏览阅读1.1w次。随着炎热夏季的到来，当玩游戏正爽的时候，电脑突然死机了，自动关机了，是不是有想给主机一脚的冲动呢？这个很大的原因是因为CPU温度过高导致的。很多新手玩家可能都有一个疑虑，cpu温度多少以下正常？有些说是60，有些说是70，到底多高CPU温度不会死机呢？首先我们先看看如何查看CPU的温度。下载鲁大师并安装，运行鲁大师软件，即可进入软件界面，并点击温度管理，即可看到电脑各个硬件的温度。鲁大师一般情况下..._台式机玩游戏温度多少正常
小白自学Python日记 Day2-打印打印打印！_puthon打印任务收获-程序员宅基地
文章浏览阅读243次。Day2-打印打印打印！我终于更新了！（哭腔）一、 最简单的打印最最简单的打印语句： print(“打印内容”)注意：python是全英的，符号记得是半角下面是我写的例子：然后进入power shell ，注意：你需要使用cd来进入你保存的例子的文件夹，保存时名字应该取为xxx.py我终于知道为什么文件夹取名都建议取英文了，因为进入的时候是真的很麻烦！如果你没有进入正确的文件夹..._puthon打印任务收获
Docker安装：Errors during downloading metadata for repository ‘appstream‘:_"cenerrors during download metadata for repository-程序员宅基地
文章浏览阅读1k次。centos8问题参考CentOS 8 EOL如何切换源？ - 云服务器 ECS - 阿里云_"cenerrors during download metadata for repository \"appstream"
尚硅谷_谷粒学苑-微服务+全栈在线教育实战项目之旅_基于微服务的在线教育平台尚硅谷-程序员宅基地
文章浏览阅读2.7k次，点赞3次，收藏11次。SpringBoot+Maven+MabatisPlusmaven在新建springboot项目引入RELEASE版本出错maven在新建springboot项目引入RELEASE版本出错maven详解maven就是通过pom.xml中的配置，就能够从仓库获取到想要的jar包。仓库分为：本地仓库、第三方仓库(私服)、中央仓库springframework.boot:spring-boot-starter-parent:2.2.1.RELEASE’ not found若出现jar包下载不了只有两_基于微服务的在线教育平台尚硅谷
随便推点
网络学习第六天（路由器、VLAN）_路由和vlan-程序员宅基地
文章浏览阅读316次。路由的概念路由器它称之为网关设备。路由器就是用于连接不同网络的设备路由器是位于OSI模型的第三层。路由器通过路由决定数据的转发。网关的背景：当时每家计算机厂商，用于交换数据的通信程序（协议）和数据描述格式各不相同。因此，就把用于相互转换这些协议和格式的计算机称为网关。路由器与三层交换器的对比路由协议对比路由器的作用：1.路由寻址2.实现不同网络之间相连的功能3.通过路由决定数据的转发，转发策略称为 路由选择。VLAN相关技术什么是VLAN？中文名称叫：虚拟局域网。虚_路由和vlan
设置div背景颜色透明度，内部元素不透明_div设置透明度,里面的内容不透明-程序员宅基地
文章浏览阅读2.8w次，点赞6次，收藏22次。设置div背景颜色透明度，内部元素不透明：.demo{ background-color:rgba(255,255,255,0.15) } 错误方式：.demo{ background-color:#5CACEE;opacity:0.75;} 这样会导致div里面的元素内容和背景颜色一起变透明只针对谷歌浏览器的测试_div设置透明度,里面的内容不透明
Discuz!代码大全-程序员宅基地
文章浏览阅读563次。1.[ u]文字：在文字的位置可以任意加入您需要的字符，显示为下划线效果。2.[ align=center]文字：在文字的位置可以任意加入您需要的字符，center位置center表示居中，left表示居左，right表示居右。5.[ color=red]文字：输入您的颜色代码，在标签的中间插入文字可以实现文字颜色改变。6.[ SIZE=数字]文字：输入您的字体大小，在标签的中间插入文..._discuzcode 大全
iOS NSTimer定时器-程序员宅基地
文章浏览阅读2.6k次。iOS中定时器有三种，分别是NSTimer、CADisplayLink、dispatch_source，下面就分别对这三种计时器进行说明。一、NSTimerNSTimer这种定时器用的比较多，但是特别需要注意释放问题，如果处理不好很容易引起循环引用问题，造成内存泄漏。1.1 NSTimer的创建NSTimer有两种创建方法。方法一：这种方法虽然创建了NSTimer，但是定时器却没有起作用。这种方式创建的NSTimer，需要加入到NSRunLoop中，有NSRunLoop的驱动才会让定时器跑起来。_ios nstimer
Linux常用命令_ls-lmore-程序员宅基地
文章浏览阅读4.8k次，点赞17次，收藏51次。Linux的命令有几百个，对程序员来说，常用的并不多，考虑各位是初学者，先学习本章节前15个命令就可以了，其它的命令以后用到的时候再学习。1、开机 物理机服务器，按下电源开关，就像windows开机一样。 在VMware中点击“开启此虚拟机”。2、登录 启动完成后，输入用户名和密码，一般情况下，不要用root用户..._ls-lmore
MySQL基础命令_mysql -u user-程序员宅基地
文章浏览阅读4.1k次。1.登录MYSQL系统命令打开DOS命令框shengfen，以管理员的身份运行命令1：mysql -u usernae -p password命令2：mysql -u username -p password -h 需要连接的mysql主机名(localhost本地主机名)或是mysql的ip地址（默认为：127.0.0.1）-P 端口号（默认：3306端口）使用其中任意一个就OK,输入命令后DOS命令框得到mysql>就说明已经进入了mysql系统2. 查看mysql当中的._mysql -u user