BootStrap框架的使用及响应式网页布局

1.BootStrap 概念： 将常见效果进行统一 封装后形成的框架。 特点：基于框架开发，效率高，稳定性高。 关于Bootstrap： 前端 UI 框架 ，它提供了大量 编写好的 CSS 样式 ，允许开发者结合一定 HTML 结构 及 JavaScript ， 快速 编写网页。 中文网址: https://www.bootcss.com/ 进入网站主页，选择Bootstrap3（企业开发一般用旧版本，更稳定。） 选择下载Bootstrap 点击下载Bootstrap、下载Sass项目

 下载到你的项目文件夹，解压。

在相应的选项下找到你要用的效果，根据指导说明进行赋值粘贴以及调用即可。

例：使用Bootstrap完成轮播图并完成响应式布局

1）使用Bootstrap完成轮播图

项目中引入jquery.js和bootstrap.min.js

注：bootstrap.min.js和bootstrap.js内容是一样的，bootstrap.min.js格式紧凑占用内存较小，运行较快，一般选择bootstrap.min.js。

 Bootstrap中点击JavaScript插件，在右侧导航栏选择Carousel，如下图

 复制Examples下面的代码到vs code你的项目.html中

  
  
    
    
    
  

  
  
    
      
      
        ...
      
    
    
      
      
        ...
      
    
    ...
  

  
  
    
    Previous
  
  
    
    Next
  

修改所用到的图片的位置；

根据图片个数修改轮播图下面小点点的个数 ,即在class=“carousel-indicators"中修改li的个数。

完成后的效果图如下：

 2）响应式布局

 本质：一套代码能适配不同的设备尺寸。 目标：能够根据设备 宽度的变化 ，设置 差异化样式 1.媒体查询 写法：@media（媒体特性） {                          选择器 {                                      样式                          }            }

 

当浏览器宽度>992px时，轮播图高度500px；

当浏览器宽度>768&&<992px时，轮播图高度400px；

当浏览器宽度<768px时，轮播图高度250px；

2.使用BootStrap中栅格系统进行响应式布局

BootStrap3默认将窗口分为12等份

	超小屏	小屏	中等屏	大屏
相应断点	<768px	>=768px	>=992px	>=1200px
类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*

*表示12份中所占份数。

eg:

即超小屏中显示1个；小屏显示2个；中等屏及以上显示4个，如下图