瞎扯一扯我眼中的Bootstrap

力扣写不下去力（晕），来写写博客~~划划水~~理一理脑子

日常水背景

最近在弄浪潮这边静态网页的设计和美化：

感谢Bootstrap这种对我这样的菜鸡后端er极其友好的框架，整体写的还算顺利，除了博客这块儿采用的mkdocs外，剩下都是靠的BS（救！）

所以写写自己的浅显认知罢，理一理坑和小tips

正片开始

首先，依然坚持我的观点，官方文档是最好的学习资料和手册

扔：

平常要用到的啥随时CV查用即可

日常使用引入

框架使用官方讲的很清楚，用CDN可以，下载源文件也可以

注： CDN即内容分发网络( Content Delivery Network )，采用缓存服务器并将其放在用户相对集中的地区或网络，用户访问时，利用全局负载技术，将访问指向最近的缓存服务器上响应请求（类似电商本地仓库）采用CDN可以大大提升访问速度、提升安全性等

对于Bootstrap来讲，使用者的CSS和JS配置文件都写好了放在不远的地方，引入一下，相当于直接从云端扒下来使用

所以，开发者使用时只需要专注HTML文件，考虑布局、细节即可，需要的组件都已经写好了

Bootstrap官方也说：" HTML和CSS优于JS "，所以站在这个角度俺觉得它更像个组件库

还是说说具体用法，这里也有注意点来着，写写罢，怕自己也忘了

1.使用CDN

CSS引入：

<link href="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

JavaScript引入：

<script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>

属性说明：

href 和 src 很明显嘛，html里常用的，用以资源指向定位
rel 也很常见，定义链接资源和当前文档关系
剩下这俩可能就比较少见了，一般都是在用CDN引入第三方库的时候碰到，intergrity 用以开启浏览器对获取的资源进行检验(借助hash值查验文件是否经过篡改)，比如此处就是使用sha384算法对下载的文件进行计算并和intergrtiy提供的摘要签名比对；crossorigin定义元素如何处理跨源请求，实现对该元素获取数据的CORS(跨源资源共享，一种基于HTTP头的机制)请求配置。（此处其实两者实现机制和逻辑都比较复杂）

2.直接下载

这个就比较简单粗暴了，当然，官方为了让开发者自定义功能，也提供了生产文件和源码两种模式，后者稍麻烦，一般来讲Bootstrap已经把功能实现的可以了，拿来用就行

下载解压文件夹后，选出bootstrap.min.css和bootstrap.bundle.min.js就行，涵盖绝大部分需要了

一些使用tips

趁还记得，先写上（笑）

网格and列布局

这个相当好用，很容易作出简介整齐的布局

响应断点：xs、sm、md、lg、xl、xxl ，对应尺寸：576px、768px、960px、1200px、1400px
一行12格，各列分配，放不下就跑下一行
.row-cols-可以直接指定一行的列数，不用在各个.col上写

卡片

其实我觉得卡片只是把元素边框明显化了的块区域，用div(一把梭选手~~就是我~~)也能实现差不多的效果
和列结合，设计出水平变化的卡片
.card-group实现卡片群组，自动对齐（这个也有点儿列表的意思）
.h-设置高度，用以同行卡片对齐美观

位置

这玩意儿有时候特别容易出bug

.align-items-和.align-self-指定垂直对齐，控制水平排布;.justify-content-指定水平对齐，控制垂直排布
.flex弹性盒子结合上者可以特殊设置元素位置，排版方便
.start-、.end-、.top-、.bottom-、.translate-middle可以强制指定位置

其他

常使用.d–none 和 .d–block结合控制特定尺寸下元素的显示方式
轮播结合长宽比比较好看
模态弹框、滑动导航可以把大量文本隐藏，点击后显示，方便布局
工具提示可以放在链接、按钮上增加交互

貌似就这些我觉得比较好用的（当然，前端菜狗~~后端也是~~）

小结

反正给我带的感觉吧，Bootstrap适合做一些比较小型或者页面简单的静态站，做起来真挺方便，而且部署直接一丢就行（当然，别的框架打包也是相当方便的）

鱼摸完了，溜~~

聊聊Bootstrap(BS)