Bootstrap学习实践笔记（六）

HTML

	
	
	
	
	


	
	

		
		

			

				

					

						
							
							关注微信号
							
						
					
					

						
						188-8888-8888（服务时间：9:00-21:00）
					
					

						校企合作
						培训师
					
					

						免费注册
						立即登录
					
				
			
		
		
		

			

				
					
				
				
					
				

				

					

						

							首页
						
						

							
								学习学科
							
							

								Web前端+全栈
								

								Python+人工智能
								

								JavaEE+大数据
							
						
						

							服务体系
						
						

							软件工具
						
						

							专题学习
						
						

							就业指导
						
					
					

						
						Search
					
				
			
		
	
	
	
	

		

			

			

			

		
		

			

				
			
			

				
			
			

				
			
		
		
			
			Previous
		
		
			
			Next
		
	
	
	
	

		
		

			
热门课程
			
		
		
		

			

				

					

						

							
						
						

							

								【热】
								H5+C3从入门到精通
							
							
8大案例全程驱动教学
						
					
				
				

					

						

							
						
						

							

								【新】
								Python项目实战
							
							
368个课时打造最全QT
						
					
				
				

					

						

							
						
						

							

								【战】
								JavaEE-SSH三大框架
							
							
就业实战第一篇
						
					
				
				

					

						

							
						
						

							

								【战】
								Vue+Node拼多多项目实战
							
							
打通前后端，联通数据库
						
					
				
				

					

						

							
						
						

							

								【火】
								JavaEE-SSH综合项目应用
							
							
博客系统前后端统一部署
						
					
				
				

					

						

							
						
						

							

								【热】
								JavaScript高级+设计模式
							
							
原型链、设计模式、面向对象
						
					
				
			
		
	
	
	
	

		

			
			

				

					在线大学
				
				

					会员专享
				
				

					优质视频
				
				

					线下沙龙
				
				

					精品课程
				
				

					撩课小册
				
				

					面试宝典
				
				

					小撩阅读
				
				

					小撩公益
				
			
			
			

				

					

						

							

								
								

									
									

										
更多资讯欢迎
										
关注撩课学院
									
								
								
								

									HTML5+全栈 / Python+人工智能 / JavaEE+大数据
								
								
								

									
										欢迎来到IT人的在线大学
										/
										撩课学院
										/
									
								
								
								

									课程咨询
									了解更多
								
							
							

								
							
						
					
				
				

					

						

							

								
							
							

								
撩课学院会员
								
汇聚名师，为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战连载课程内容。专属的会员社群和私人订制服务，1年365天持续更新课程紧跟前沿技术！
							
						
					
				
				

					

						

							

								

									案例驱动·体系贯穿·全面系统
								
							
							
右
						
					
				
			
		
	
	
	
	

		
		

			
关于我们
			
		
		
		

			

				

					
撩课学院（itlike.com）起源于一个资深的教育团队所发起的一个公益项目。从2017年开始，通过各大在线平台（网易、腾讯等），向全国免费开放他们精心打磨的视频课程“H5系列”、“Python系列”、“Java系列”等。
					
在短短不到一年的时间，接近10万多名学生报名参加学习了这些课程，好评如潮。为了有组织的推出更加全面、优质、成体系的课程，撩课学院应运而生。
					
撩课学院课程体系完善，包含HTML5+全栈开发、Python+人工智能、JavaEE、Go语言+区块链、UI/UE设计、新媒体、电商运营等系列课程。
				
				

					
				
			
		
	
	
	
	

		
		

			
友情链接
			
		
		
		

			

				
				
				
				
				
			
		
	
	
	
	

		

			

				

					

						

							
关于我们
							
课程介绍
							
热门课程
						
						

							
名师授课
							
课堂互动
							
联系我们
						
					
				
				

					
公司地址：上海市松江区松江大学城
					
联系电话：六个六
					
地址邮箱：[email protected]
				
				

					
联系我们：
					
					
				
			
		
	
	
	
	
	
	

CSS

@charset "UTF-8";
/*——————————————————————通用样式begin——————————————————————*/
body{
	color: black;
	font-family: Microsoft YaHei;
}
a:hover{
	text-decoration: none;
}
ul,ol{
	list-style: none;
}
/*——————————————————————通用样式end——————————————————————*/

/*——————————————————————头部begin——————————————————————*/
#lk_header{
	/*background-color: red;*/
}
#lk_header .top-bar{
	height: 40px;
	line-height: 39px;
	border-bottom: 1px solid #e0e0e0;
}
#lk_header .top-bar .container .row>div+div{
	border-left: 1px solid #e0e0e0;
}
#lk_header .top-bar .container .row .top-bar-1 a{
	position: relative;
}
#lk_header .top-bar .container .row .top-bar-1 a img{
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	display: none;
	
}
#lk_header .top-bar .container .row .top-bar-1 a:hover img{
	display: block;
}
.icon-phone::before{
	content: '\e958';
	font-size: 13px;
}
.icon-tel::before{
	content: '\e492';
	font-size: 13px;
}
.btn-lk{
	color: white;
	background-color: #8330f0;
	border-color: #9318f2;
}


/*导航*/
#lk_header .navbar-lk{
	border-bottom: 1px solid #e0e0e0;
}
#lk_header .navbar-lk .navbar-brand{
	height: 90px;
	/*background-color: red;*/
	margin-left: 15px;
	margin-right: 60px;
}
#lk_header .navbar-lk .navbar-brand img{
	width: 130px;
}
#lk_header .navbar-lk .navbar-nav>li>a{
	height: 70px;
	/*background-color: red;*/
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}
#lk_header .navbar-lk .navbar-nav>li>a:hover{
	border-bottom: 2px solid purple;
}
#lk_header .navbar-lk .navbar-toggler{
	margin-top: 5px;
}
/*——————————————————————头部end——————————————————————*/


/*——————————————————————轮播图begin——————————————————————*/
#lk_carousel .carousel-item img{
	height: 100%;
	width: 100%;
	background: no-repeat center center;
	background-size: cover;
}
@media screen and (min-width: 900px){
	#lk_carousel .carousel-item{
		height: 410px;
	}
}
/*——————————————————————轮播图end——————————————————————*/

/*——————————————————————热门课程begin——————————————————————*/
#lk_hot{
	/*background-color: purple;*/
}
/*——————————————————————热门课程end——————————————————————*/

/*——————————————————————产品中心begin——————————————————————*/
#lk_product{
	background-color: #f0f0f0;
	padding: 40px 0;
}
#lk_product .nav-item{
	font-size: 18px;
}
#lk_product .nav-item a{
	color: #000;
	border: none;
	padding: 10px 20px;
}
#lk_product .nav-item a.active{
	border: none;
	background-color: transparent;
	border-bottom: 1px solid #8330f0;
	color: #8330f0;
}
#lk_product .tab-content{
	padding-top: 20px;
}
/*——————————————————————产品中心end——————————————————————*/

/*——————————————————————关于begin——————————————————————*/
#lk_about{
	/*background-color: skyblue;*/
}
/*——————————————————————关于end——————————————————————*/

/*——————————————————————友情链接begin——————————————————————*/
#lk_link{
	/*background-color: red;*/
}
/*——————————————————————友情链接end——————————————————————*/

/*——————————————————————尾部begin——————————————————————*/
#lk_footer{
	width: 100%;
	height: 130px;
	background: #9e0639;
	color: white;
}
#lk_footer .container .row{
	height: 130px;
}
#lk_footer .container .row a{
	color: white;
}
/*——————————————————————尾部end——————————————————————*/

JS

$(function() {
	// ——————————————————轮播图
	$(window).on('resize', function() {
		// 1.获得窗口宽度
		let clientW = $(window).width()
		// 2.设置临界点
		let isShowBigImage = clientW >= 900
		// 3.获取所有item
		let $allItems = $("#lk_carousel .carousel-item")
		// 4.遍历
		$allItems.each((Index, item) => {
			// 4.1取出图片的路径
			let src = isShowBigImage ? $(item).data('lg-img') : $(item).data('sm-img')
			let imgUrl = `url(${src})`;
			// 4.2设置背景
			$(item).css({
				backgroundImage: imgUrl
			})
			// 4.3创建img标签
			if(!isShowBigImage) {
				let imgEle = ``
				$(item).empty().append(imgEle)
			} else{
				$(item).empty();
			}
		})
	})
	$(window).trigger('resize');

	// ——————————————————工具的提示
	$("[data-toggle='tooltip']").tooltip();
})