Bootstrap Studio：看这一篇就够了

前言

Bootstrap Studio 是一款基于 Bootstrap 框架的网页设计工具，旨在帮助用户通过拖放操作轻松创建响应式网站。什么是响应式网站？即无论是手机还是平板，亦或是电脑，都可以自动响应合适的界面。为什么使用Bootstrap？它的UI和框架本身是一体的，是原生Html、CSS、JS的集合，即不依赖其他前端框架，举个例子，elementUI需要依赖VUE框架，而Bootstrap的UI就是他本身。

在学习使用该软件快速构建网页之前，最好能够学习一下Bootstrap语法：

Bootstrap5：看这一篇就够了_基于bootstrap5的ui框架-CSDN博客

一、快速开始

1、下载安装

Bootstrap Studio - The Revolutionary Web Design Tool

2、界面介绍

Bootstrap Studio Docs | Bootstrap Studio

3、快速构建

（1）新建空白工程

还可以加载其他人的设计来修改，这种更快。

（2）任意拖拽元素到页面中

（3）根据不同断点看效果

如果不了解断点的含义，可以看一下前言的链接，这里简单说一下，断点就是不同尺寸的屏幕。

（4）运行工程查看效果

（5）修改整体颜色（全局风格）

（6）修改背景颜色

（7）改变样式

因为样式里也是改变背景，与设置的背景颜色冲突，因此先取消设置，再添加背景样式，此时可以通过html代码看到设置或更改样式的更新。

 （8）设置属性

（9）切换界面/添加网页/JS脚本等（使用右键操作）

顺便写一个覆盖样式的JS。

// 获取目标元素
const targetElement = document.getElementById('good');

if (targetElement) {
  // 方案 1：直接覆盖背景色（优先级最高）
  targetElement.style.background = '#ff0000'; // 直接指定颜色值
  
  // 方案 2：动态继承当前主题色并修改
  const computedColor = getComputedStyle(targetElement)
    .getPropertyValue('--bs-danger')
    .trim();
  
  // 基于原色值进行调整（示例：降低20%亮度）
  const modifiedColor = adjustColorLightness(computedColor, -20);
  targetElement.style.setProperty('background', modifiedColor);
  
  // 方案 3：完全接管CSS变量控制权
  targetElement.style.setProperty('--bs-danger', '#00ff00', 'important');
  targetElement.style.background = 'var(--bs-danger)';
}

// 颜色调整工具函数
function adjustColorLightness(hex, percent) {
  // 移除#号并解析颜色分量
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  // 转换为HSL进行调整
  let [h, s, l] = rgbToHsl(r, g, b);
  l = Math.min(100, Math.max(0, l + percent));
  
  // 转回HEX格式
  const result = hslToRgb(h, s, l);
  return `#${result[0].toString(16)}${result[1].toString(16)}${result[2].toString(16)}`;
}

// RGB转HSL算法
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return [h * 360, s * 100, l * 100];
}

// HSL转RGB算法
function hslToRgb(h, s, l) {
  h /= 360, s /= 100, l /= 100;
  let r, g, b;
  if (s === 0) {
    r = g = b = l;
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
  return [
    Math.round(r * 255),
    Math.round(g * 255),
    Math.round(b * 255)
  ];
}

 

（10）导出html 

导出后的目录结构： 

│  index.html
│
└─assets
    ├─bootstrap
    │  ├─css
    │  │      bootstrap.min.css
    │  │
    │  └─js
    │          bootstrap.min.js
    │
    ├─css
    │      Navbar-Centered-Brand-icons.css
    │
    └─js
            good.js

二、实战技巧

1、加载模板工程

通过加载官方模板工程，并基于模板修修改改，可快速建立属于自己的网站，如下所示。

2、模板与前端框架

除了在bootstrap studio直接使用模板，还有一些提供前端页面下载的商店，会提供一些bootstrap5的网站工程下载，但是，这些工程可能会跟VUE等前端框架相结合，下载时需要注意。

持续更新中。。。