Bootstrap01【前端开发框架】

如需温习上一节内容，请点击下方链接进行跳转。 

JavaWEB之AJAX快速入门_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之MVC购物车_云彩123的博客-CSDN博客1.引入问题1：先有servlet还是先有jsp？先有servletweb发展史：HTML静态页面---serlvet----jsp问题2：web开发模式发展：模型1 模型2只有静态页面的时候： HTML+css出现servlet之后：可以进行交互模型1：第一代----把所有的代码（java+html）写一个jsp页面。 一层模型1：第二代---javabean：将数据库交互的代码进行封装 src 二https://blog.csdn.net/m0_64522859/article/details/124464636

目录

一.WWW

1.What？

2.概述：

3.Why？

4.Where？

二.环境安装

①.下载html" class="superseo">Bootstrap库

②.页面中引入库

三.需要实现的四个案例：

案例1：查询按钮原生态实现对比Bootstrap方式实现

案例2：演示Bootstrap页面在手机浏览器中展示效果

案例3：首页导航&搜索区域原生态实现（div+css）

案例4：首页导航&搜索区域Bootstrap实现&搭首页框架

---

---

一.WWW 1.What？

①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架

②.是一个用于快速开发Web应用程序和网站的前端框架

③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

2.概述：

Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

3.Why？

①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）

②.移动设备优先

③.浏览器支持

④.容易上手

4.Where？

企业网站、博客、网站后台之类的网站

电商（电商网站分类太多）

二.环境安装 ①.下载Bootstrap库

https://v4.bootcss.com/

②.页面中引入库

bootstrap.css：Bootstrap核心样式【添加到head标签中】

jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

bootstrap.js：Bootstrap核心库

三.需要实现的四个案例： 案例1：查询按钮原生态实现对比Bootstrap方式实现

	
		
		
		
		
		
		
		
		
		
		
	
	
		
			原生态js实现查询按钮与Bootstrap查询按钮的对比
			
			原生态实现查询按钮的布局
			查询
			

			Bootstrap实现查询按钮的布局
			查询
			查询
			查询
			查询
			查询
			查询
			
			搜索
			
		
	

	
		
		
		
		
		
		
		
		
		
		
		
		
		
	
	
		
			移动端优先显示
			

				目的：该页面在手机端显示的时候是1:1比例
				根据head中的meta标签来设置
			
			
			原生态实现查询按钮的布局
			查询
			

			Bootstrap实现查询按钮的布局
			查询
			查询
			查询
			查询
			查询
			查询
			
			搜索
			
		
	

 

案例2：演示Bootstrap页面在手机浏览器中展示效果

	
		
		
		
	
	
		
		
			
			
				
					您好!欢迎来到吊炸天网上书城
				
				
					首页
					登录
					注册
					我的购物车
				
			
			
			
			
			
				
				搜索
			
		
	

	
		
		
		
		
		
		
		
		
		
		
	
	
		
		
			
				
				

				  
					  
					  
					    
					    
					      搜索
					    
					  
				  
				
				
			
		
	

案例3：首页导航&搜索区域原生态实现（div+css）

 

	
		
		
		
		
		
		
		
	
	
		
		
		
		
			
			
				
				
					One of three columns
				
				
					One of three columns
				
				
					One of three columns
				
			
		


	

 

案例4：首页导航&搜索区域Bootstrap实现&搭首页框架

	
		
		
		
		
		
		
		
		
	
	
		
		

		
		
			
			
				
					
						
						

							
								
								
									
									
										搜索
									
								
							
						

					
				
			

			
			
				
					左侧分类列表显示
				
				
					
						轮播图
						新书上架+热门书籍