# Bootstrap ## 准备开始 ### 重要的全局特性 - 使用 HTML5 类型声明 \`\`\`html <html lang="en"> \`\`\` - 响应式元标签 `<meta name="viewport" content="width=device-width, initial-scale=1.0">` - Box-sizing `border-box`，确保 `padding` 不会影响对元素宽度的计算 - Reboot ### JS 插件 可以分开使用 `js/dist/**.js`，也可以使用所有插件合并的 `bootstrap.min.js`；使用 bundler (Webpack, Rollup...)的话，使用 `/js/dist/**.js`，已经 UMD 完备。 > UMD 是 JS 模块的通用模块定义方式。这些模块可以在任何地方工作，无论是客户端、服务器还是其他地方。 > > -- Bundle 是指把多个 JS 文件合并为 1 个。 Bootstrap 也可用作 modules 和 components。但是，有些插件（Dropdown、Tooltip、Popover）无法兼容 module。 使用 Bootstrap 要注意 CSS/JS 插件的依赖问题。 Bootstrap v5 中是可以使用 jQuery 的。 Bootstrap 的数据属性可直接通过 HTML 使用，更推荐通过 JS 使用。 Bootstrap 提供对插件的自定义事件。 Bootstrap 提供可编程 API。可以在构造器中直接选择 CSS 选择器。所有 API 方法都是异步的且会进行变换。通过修改插件的 `Constructor.Default` 对象改变插件的默认设置。 通过 `bootstrap.Tooltip.VERSION` 获取每个插件的版本号。 如果关闭 JS，Bootstrap 不提供开箱即用的回退措施。 Sanitizer 是 Bootstrap 插件的净化器名词。 ### Webpack 1. 安装 bootstrap \`\`\`bash pnpm install bootstrap @popperjs/core \`\`\` 1. 导入 JS \`\`\`js // app.js // 导入全部 import 'bootstrap' // or get all of the named exports for further usage import * as bootstrap from 'bootstrap' // 仅导入使用的插件 import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap' ``` 1. 导入样式 方式一：导入预编译的 Sass 先创建 `custom.scss`，覆盖[默认设置](https://getbootstrap.com/docs/5.1/customize/sass/)，然后在 `main.scss` 中导入： \`\`\`scss @import 'custom'; @import '~bootstrap/scss/bootstrap'; \`\`\` 为了编译 Bootstrap，确保安装并使用了相应的加载器：[sass-loader](https://github.com/webpack-contrib/sass-loader)、[postcss-loader](https://github.com/webpack-contrib/postcss-loader) + [Autoprefixer](https://github.com/postcss/autoprefixer#webpack)。Webpack 配置参考： \`\`\`json // ... { test: *\.(scss)$*, use: [{ // inject CSS to page loader: 'style-loader' }, { // translates CSS into CommonJS modules loader: 'css-loader' }, { // Run postcss actions loader: 'postcss-loader', options: { // \`postcssOptions\` is needed for postcss 8.x; // if you use postcss 7.x skip the key postcssOptions: { // postcss plugins, can be exported to postcss.config.js plugins: function () { return [ require('autoprefixer') ]; } } } }, { // compiles Sass to CSS loader: 'sass-loader' }] } // ... \`\`\` 方式二：导入编译好的 CSS 直接导入 CSS 文件： \`\`\`js import 'bootstrap/dist/css/bootstrap.min.css' \`\`\` 之后只需要改动一下 Webpack 的配置即可： \`\`\`json // ... module: { rules: [ { test: *\.css$*, use: [ 'style-loader', 'css-loader' ] } ] } // ... \`\`\` ### Parcel 1. 安装 Parcel \`\`\`bash pnpm install --save-dev parcel \`\`\` 1. 安装 Bootstrap 项目结构： \`\`\`text project-name/ ├── build/ ├── nodemodules<*sub>* │ └── bootstrap/ │ └── popper.js/ ├── scss/ │ └── custom.scss ├── src/ │ └── index.html │ └── index.js └── package.json \`\`\` 1. 导入 JS 2. 导入 CSS 3. 在 HTML 中加入 `index.js` 4. 修改 `package.json` \`\`\`json "scripts": { "dev": "parcel ./src/index.html", "prebuild": "npx rimraf build", "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build" } \`\`\` 1. 运行命令 \`\`\`bash pnpm run dev pnpm run build \`\`\` ### 可访问性 概述：使用 Bootstrap 项目的可访问性与作者使用的标记、增加的样式和脚本有关，如果这些修改能够符合 WCAG 2.1 (A/AA/AAA) 等可访问性标准，那么该项目的可访问性是大概率没有问题的。 Bootstrap 提供结构化标记；交互式组件；良好的颜色对比；视觉上隐藏内容；减速运动 ### RFS RFS 是 Bootstrap 的小项目，是一个调整单位大小的引擎，最初用于调整字体大小（因此，它是 Responsive Font Sizes 的缩写）。RFS 发展到现在这个阶段，它能调整大多数 CSS 属性的单位值，比如 `margin`、`padding`、`border-radius`、甚至包括 `box-shadow`。 如何使用？ RFS 机制包含在 Bootstrap 的 SCSS 文件中；也可以在[这里](。 扩展文档在[这里](https://github.com/twbs/rfs/tree/v9.0.6) ### RTL RTL(Right to Left)。Bootstrap 基于[RTLCSS]( RTL。 需要设置 HTML： 1. `<html dir="rtl">` 2. 添加合适的 `lang` 属性 3. 导入 rtl css：`bootstrap.rtl.min.css` ## 自定义 学习如何用 Sass、大量的全局选项、广泛的色彩系统等来设计主题、定制和扩展 Bootstrap。 CSPs and embedded SVGs ### Sass 注意文件结构：使用包管理器和编译后文件。 导入：全部导入和导入需要的部分。 默认变量有 `!default` 标记，如需要覆盖可直接复制后修改属性值，并移除 `!default`。 地图和循环。 需要的键。 函数：颜色（对比度）、Escape SVG、增减函数。 Mixins：颜色规范。 ### Options 相关：[[coding|coding]] 相关：[[webassembly|webassembly]]