bootstrap的使用与less源码解析（框架自定义）

最新推荐文章于 2023-07-11 12:15:00 发布

一千次晚安。

最新推荐文章于 2023-07-11 12:15:00 发布

阅读量358

点赞数 1

分类专栏：前端文章标签： bootstrap css html

本文链接：https://blog.csdn.net/weixin_46104231/article/details/121722292

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

它是一个响应式的开发框架

容器

流体容器

<div class="container-fluid">test</div>

意为width等于百分之百，也就是自适应百分之百宽度，响应式宽度不变。

固定容器

<div class="container">我是固定容器</div>

意为一个固定的容器，先进行媒体查询，之后固定一个width

阈值：768,992,1200，根据阈值进行查询，固定width

大于等于1200（lg）：1170，大于等于992小于1200（md）：970，大于等于768小于992（sm）：750，小于等于768（xs）：widthauto

所有的阈值都是加过槽宽的（槽宽默认为30px）

width百分百的话是内容为百分之百，而width等于auto是padding是扣掉的，在box-sizing: border-box当中二者意义是一样的。

栅格系统（网格容器）

<div class="container">
        <div class="row">
            <div class="col-lg-10">col-lg-10</div>
            <div class="col-lg-2">col-lg-2</div>

        </div>
    </div>

栅格系统默认将行分为12.

lg意为阈值，将页面拉小后自动变为流体容器

三种的源码解析（需要less基础）

公共样式中的padding默认为槽宽的一半，该处图片当中没有使用变量，源码是使用了槽宽变量

从上往下读，最终覆盖，默认为xs的auto。（当为1300时其实每一行都进行解析，只不过被最终的lg而覆盖掉了）

该段源码为栅格系统的列的定义，在less当中利用递归来实现循环，传递参数index多大就递归为多大，而grid-columns默认为12，当终止递归后，所有递归产生的变量总共作为一个选择器进去，对他们进行一个样式默认定义，也就是公共样式。

这段是列产生的最终源码，也是使用递归来设置样式均为浮动left，之后递归设置一个分数的赋值来定义列的大小。

而该段响应式的最终实现为：给一个div标签的类同时设置两个阈值的大小。

栅格是基于浮动的，有点像flex布局。

列排列与列偏移，同样使用递归来实现给每个后面加参数的pull来定义样式。

由源码可见：列排列当中push为向右推，pull为向左拉，为0则是auto。

在得知源码后可以自行更改定义一个栅格系统，完成对bootstrap的自定义化。

栅格系统实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
              <div class="thumbnail">
                <img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.50/dist/img/expo.png" alt="...">
                <div class="caption">
                  <h3 class="text-center">优站精选</h3>
                  <p class="text-center"><small >Bootstrap 网站实例</small></p>
                  <p class="text-center">Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                  <img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.50/dist/img/react.png" alt="...">
                  <div class="caption">
                    <h3 class="text-center">React</h3>
                    <p class="text-center"><small >用于构建用户界面的 JavaScript 框架</small></p>
                    <p class="text-center">React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                  <img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.50/dist/img/webpack.png" alt="...">
                  <div class="caption">
                    <h3 class="text-center">Webpack</h3>
                    <p class="text-center"><small >是前端资源模块化管理和打包工具</small></p>
                    <p class="text-center">Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="thumbnail">
                  <img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.50/dist/img/typescript.png" alt="...">
                  <div class="caption">
                    <h3 class="text-center">TypeScript</h3>
                    <p class="text-center"><small >中文手册</small></p>
                    <p class="text-center">TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
                  </div>
                </div>
              </div>
          </div>
    </div>    
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</html>

该为一个简单的响应式网格布局实例

响应式工具源码解析

四个阈值的选择器都使用了一个混和来修改invisibility

首先在调用的时候均设置为display：none

之后再进行一个判断，当你的屏幕为xs的话，调用可见的混和

hidden则为相反的源码（最开始为显示，当满足条件后会调用混和隐藏起来）

栅格盒模型的设计巧妙之处

容器两边有15px的padding

行两边有-15px的margin

列两边有15px的padding

为了维护槽宽的规则，列的两边必须有15px的padding（槽宽/2）

行两边的-15px的margin是为了列套行，二者刚好抵消掉。

为了使容器包裹住行，容器两边必须要有15px的padding

对less的复习

一千次晚安。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap的使用与less源码解析（框架自定义）

目录容器流体容器固定容器栅格系统（网格容器）三种的源码解析（需要less基础）栅格系统实例响应式工具源码解析栅格盒模型的设计巧妙之处对less的复习Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它是一个响应式的开发框架容器流体容器<div class="container-fluid">test</div>意为width等于百分之百，也就是...
复制链接

扫一扫