Bootstrap响应式布局

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

中文官网: Bootstrap中文网

下载安装包。

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

使用步骤：

1. 复制 css文件

   并且引入到html文件中

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

2. 复制字体图标文件夹

3. 如果需要js，则复制js文件，并引入html文件中

   <script src="./js/bootstrap.min.js"></script>

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

<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>

1. px pt em rem vw 几个单位

   • px 绝对单位 网页布局最常用的单位， 一般用于pc端布局。 px 像素的意思。 版心是 1200px

   • pt 点 常用于 印刷。 或者 ios 常用的单位。 我们前端基本不用。

   • em 相对单位。 1em 就是当前的一个文字大小。 场景： 段落首行缩进 2个字。 text-indent: 2em;

   • rem 相对单位。 相对于 html标签 的文字大小，跟其余标签没有任何关系。 场景： 做适配。

   • vw 可以看做是适配的终极版本。 vw也是相对单位。 vw 把屏幕划分了 100等份。 场景： 做适配。