(黑马学习移动web第七天)学会如何去使用前端 UI 框架/栅格系统学会怎么去用Bootstrap 框架,后面还会学饿了

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

下载安装包。

开发中，我们都是按需导入，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。

使用步骤：

复制 css文件

并且引入到html文件中

<link rel="stylesheet" href="./css/bootstrap.min.css">

复制字体图标文件夹
如果需要js，则复制js文件，并引入html文件中
```
<script src="./js/bootstrap.min.js"></script>
```

使用内部预定义好的类即可。

<div class="container">我的内容</div>

栅格系统

这是今天学习的一个重点,直接调用类名特别方便. 栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

简单说，栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。

BootStrap3默认将网页分成12等份

比如，超大屏幕下我们想要一个通栏的大盒子

 <div class="container">
    <div class="col-lg-12">我自己独占一行</div>
  </div>

又比如，超大屏幕下，我们想要一行左右来分

<div class="container">
    <div class="col-lg-6">我占左边6个</div>
    <div class="col-lg-6">我站右边6个</div>
</div>

超大屏下，如果一行放4个，怎么做呢？

 <div class="container">
    <div class="col-lg-3">我占左边3个</div>
    <div class="col-lg-3">我站右边3个</div>
    <div class="col-lg-3">我站右边3个</div>
    <div class="col-lg-3">我站右边3个</div>
  </div>

如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。

还是这4个盒子，如果在中等屏幕下放3个怎么做呢？

 <div class="container">
    <div class="col-lg-3 col-md-4">盒子内容</div>
    <div class="col-lg-3 col-md-4">盒子内容</div>
    <div class="col-lg-3 col-md-4">盒子内容</div>
    <div class="col-lg-3 col-md-4">盒子内容</div>
  </div>

还是这4个盒子，如果在小屏幕下放2个怎么做呢？

<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
  </div>

还是这4个盒子，如果在超小屏幕下放1个怎么做呢？

 <div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
  </div>