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中

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

修改所用到的图片的位置<img src" 图片位置">；

根据图片个数修改轮播图下面小点点的个数 ,即在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个，如下图