Bootstrap01

大家好久不见啊！停更了了一段时间了，今天开始会补上之前的博客

ok,进入今天的主题bootstrap第一课，上课前给大家看个思维导图，让大家更清楚今天要说的内容

一、Bootstrap 

bootstrap是什么？

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

为什么要学习bootstrap？

1.节省时间

Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。

通过Bootstrap，开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它可以让你不必再费神费力地写脚本。

2.定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。

3.详尽的说明文档，更容易上手

Bootstrap的文档相当精彩。Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。

4.响应式设计

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及 使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。这样我们不用再忙于适配各类终端。

5.浏览器支持

各类浏览器都支持Bootstrap没有不兼容的问题。

6.移动设备优先

最难适配的就是移动设备啦，当移动设备都被解决了，其他的不也能迎刃而解了吗？

 Bootstrap大多用于博客，企业的门户类网页等。毕竟人家推特是做博客的嘛。

不适用于复杂分类的网页：譬如某宝等。

二、使用步骤

1.下载Bootstrap

网址：https://v4.bootcss.com/

下载应该都会吧，下新版的就行，不会可以看文档，简单易上手。

引入库

如下：

	
		
		
		
		
		
		
		
		
	
	
		

			查询
			

			
			搜索
		
			
			
			
			
	

上面引入的代码有了，同时也是我们今天的第一个案例

效果如下

 第二个案例如下：

	
		
		
	
	
	
		
		

			

				您好，欢迎来到屌丝网上书店
			
			

				首页
				登录
				注册
				我的购物车
			
		
		
		

			
			查询
		
		
	

效果如下：

 第三个案例如下：

	
		
		
		
		
		
	
	
		
	
		
		

					

						loki，再见了
						
							
						
						

							

								首页 (current)
								登陆
								注册
								我的购物车
							
						
					
				
				
						

							
							

								

									

										

											

												
												

													查询
												
											
										
									
								
				
							
							
							

								

									左3-书籍分类
								
								

									
									

										

											右9中第一轮播图
										
									
				
									

										
										

											1,新书上架
										
										

											2,新书上架
										
										

											3,新书上架
										
										

											4,新书上架
										
										

											5,新书上架
										
									
				
				
				
									

										
										

											1,热门书籍
										
										

											2,热门书籍
										
										

											3,热门书籍
										
										

											4,热门书籍
										
										

											5,热门书籍
										
									
				
				
				
								
								

									3 of 3
								
							
						
		
		

 效果如下：放大150的，看这样的

 下面这个是放大两百的

 那个面包键打开是这样的

 ok，今天的代码分享就到这里了，什么代码也都打了注释

仅供参考

拜拜