使用Bootstrap搭建响应式布局

一、关于bootstrap

bootstrap是Twitter公司推出的一款相对流行的前端框架，使用bootstrap可以快速搭建整洁大方、美观、可响应的用户界面。

[响应式布局]：同一套代码可以适应不同分辨率的设备。bootstrap使用栅格系统来实现。container>row>col···：容器>行>列。

二、Bootstrap开发包的结构

css：该文件夹提供了bootstrap预先定义好的css样式，方便开发者轻松地使用，从而迅速搭建用户界面。

js：该文件夹提供了支持bootstrap所需的JavaScript文件，例如使用响应式导航，必须要导入bootstrap.min.js文件。注意：由于bootstrap是基于jQuery的，使用bootstrap.min.js文件之前一定要先导入JQuery文件。

fonts：该文件夹提供了许多bootstrap的字体文件，可以轻松使用bootstrap中提供的图标。

小贴士：文件拓展名含min的是经过压缩的文件，建议导入含min的bootstrap文件。经过压缩后，文件能够更快加载，既安全又能够提升性能。

使用bootstrap将bootstrap在官网下载用于生产的开发包解压复制在项目下即可，在HBuilder环境中目录如下：

三、尝试建议第一个bootstrap项目

按照步骤，依次在头文件head中使用link标签、script标签导入bootstrap.min.css、jQuery.3.5.1min.js、bootstrap.min.js这三个文件。

bootstrap中，row左右各带15px间距。若想去除：margin-left:-15px;

上述的container、row、col其实都是css中的样式类名。依照不同分辨率的设备，列分为了col-sm-x(小屏幕),col-lg-x(大屏幕)、col-sm-md-x(中屏幕)。

!DOCTYPE html>

	
		
		
		
		
		
		
	
	
		
			
				
					你好，Bootstrap！