浅学 | bootstrap

背景

理论上得先把CSS-MDN给过了，但是有点烦躁。

于是改为直接学bootstrap，自适应，组件化，命名规范，这些bootstrap一直是走得比较早的，现在虽然国产的AntD之类的花哨，但是体量相对来说也不大，不需要前置学习react/vue。

单就css的了解和学习来说，我将bootstrap作为初体验，已经算越级了。

起步

bootstrap 官网：从官网下载5.1版本的作为本地使用
fcc - bootstrap：我觉得这个题目设计还是不错的，所以还是得嫖一下咱们fcc
w3school：虽然骂的人很多了，但是我觉得这种简单一目了然的例子表，还是很适合我这种懒狗的。
tutorialrepublic 这个也不错的，感觉比w3c讲的更好一些。

视频课程

虽然对bootstrap只能说有一些了解，但怎么用心里没有逼数，决定先看看视频。

一番搜索后锁定了，这个原因很简单，只有1个半小时，要知道，我看东西都是看看停停，一个半小时很多了。

这个视频教程，这是最新的bootstrap 5 版本的，学东西，学新不学旧。

章节	要点	链接
why	- bootstrap份额一直在增加- 功能强大且自定义程度高- 市场化成熟，干活效率高	课程文件
new	- 比起3&4，最大的不同是砍掉了JQuery - icons 推荐用bootstrap自己的icons lib	icons
installation	安装方式很多，我还是选了最土的直接download	安装
Grid	- 这个部分是bootstrap最重要的部分 - breakpoint也很重要，这两是并在一起讲的。
别的	别的感觉都是随便讲讲，我主要看看别人是怎么看这些东西的，以及讲述的逻辑

要点整理

基本上是跟着视频课程来，或者我看的demo/excise/project 来搞，框架搭起来比啥都重要我觉得。看到不会的就去搜，有些一看不好搜的就先记录下来。

Grid

grid-demo.html 是下载的file ， grid-examples.html 是file

看代码就有些疑问，但是视频不可能说讲超细。code内放置的基本是class，边查边完善。

code	要点	补充
`my-5`	- m，y，5分别代表三个含义，margin上下间距都是3倍$spacer距离。 - $spacer 是个默认的变量来定义长度，默认1rem。	spacing
`text-center`	- text-alignment 的内容 - 属于可以任意在某个容器里用，子从父继承	text-alignment
`container`	- 每一个example都放在container里面，提供的是不同width尺寸的box，随着width的变化,padding也会改变。	containers
`row`	- Note: In a grid layout, content must be placed inside the columns (.col and .col-*) and only columns may be the immediate children of rows (.row). Also, rows should be placed inside a container (either fixed or fluid) for proper padding and alignment.- 内容必须放到col里，只有col可以以子级的身份放到row里，row必然是放到container里	url
`col,col-*`	- col要保证的是一个row里平均分配的row得是12份- row里的col还能接着套row再分12份col。- col-??，sm，md，lg，xl，xxl之类的主要对应breakpoint，意思是在某某宽度的区间才维持分好的设计，一旦低于这个区间就直接拉平。- 因此一个好的自适应排版布局，一个col应该是有好几个尺寸安排。- 比如这个文件内的`col-xxl-1 col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12`就是极端案例，xxl页面的时候12个分别占1列，xl-xxl中间width时候，12个分两行，6列，以此类推。	col
`d-noned-block`	- none是隐藏的意思，block是固定- 这辆经常搭配着用，只在xx尺寸下可见，和除了xx尺寸都可见	hiding-element
`.gutter`	- the padding between columns- 一般加在row后面，因为是规定的row里面的columns的间距- 默认1.5rem（24px）,可在x和y两个方向上调整大小。	gutter
`[class*="col"] {...}`	- 在`<style>...</style>`中追加当前页面新的css样式- css 属性选择器的用法，极大的增加了生产力	Attribute_selectors Class_selectors

总结：这个教程1/3的内容都在讲grid，也就是说这个确实是最重要的概念。

Buttons

buttons.html 文件地址在file

btn基本上就是复制粘贴的感觉，没啥难度。也有一些扩展阅读我觉得需要安排。

key	要点	补充
颜色自定义	- 比如btn-primary色，以及配套的actived/hover disable色。- 如果需要一个新增一个颜色的按钮怎么办？比如：`btn-newcolor1`- 当一个网站的不同页面用到的颜色不同，但又是同一套bootstrap的按钮原则怎么办？	- color- css variables- Using CSS custom properties

本文已经增加了颜色自定义的内容

Cards & Panel

这个感觉得写个卡片试试看，难点基本没啥，官网的cards已经把常见的卡片结构都写完了….

key	要点	补充
card-shadows	因为cards部分默认是没有shadow的，因此需要class内额外添加shadows class	shadow
卡片结构	- 卡片简单，也得有个body，`class = card-body`- 卡片复杂，还得多两个`class = card-header`，`class =card-footer`- 卡片	- titles/text/links
卡片自适应	- 默认是100%宽度- 也能放到col里面搞，自适应布局直接套grid系统- `w-75`这样的class也能规定该card的宽度占比	utilities
border	-卡片的border需要额外自己加- rounded radius也算在border里面的	border

Typography

typography.html文件在在：typography

这个属于一看就明白，但是要用的时候想起来就得多用，因为恍惚很容易觉得没有这个东西，但其实人家有。

key	要点	补充
font-size	- h1～h6 html标签，直接写就有bootstrap效果 - font的size & weight &line height也在这里面	font-size
font-color	- 字体的颜色也是比较重要的	text-color

image

images.html下载地址：responsive images

图片的问题主要是涉及：float（position）, align, soruce type。

key	要点	补充
iamge	- `image-fliud`	images
float	- responsive	float-responsive
clearfix	图片浮动特地强调了这个，一般用在用在flex用过后的内容	clearfix

这部分省略下面这些内容

上面的回过头看都好简单，放出来简直就像一直在写Hello world一样，有机会全删咯。

utilities spacing tables alerts toasts carousel/slider scrollspy navbar,navs,tabs offcanvas icons forms remaining componets

视频和官网都有，以后有遇到值得写会加入或者扩展成小标题讨论。

一些踩坑点

已经用bootstrap做过一些练习，有一些小心得。

用bootstrap我认为一个很重要的点是，既然已经决定引入它在项目中，那么就充分使用，如果一个效果不能用BS的class 解决，再考虑新增额外的css file会比较合适。

用bootstrap的思路

Q：设计自己的网页的时候到底应该遵循什么步骤？在已经确认一定会用bootstrap来完成的前提下。

A: 好问题，必须解决文本问题，文本结构都必须有了，再考虑做网页，如果你是设计师，务必先有个线框图或者UI设计稿。如果你没有设计稿，请网上找一个只需要替换文字和图片的作为参考。

假设一个场景，这个页面是关于自我介绍的，设计师，是否需要放置自己的头像？

外形好放真人照片：
- a. 常规尺寸头像
- b. 高清大图
有自己设计的LOGO/头像：
- a. 横图/竖图
- b. 色彩/气质

乍看这还需要想啊？但是确实是需要在开始写之前就考虑好的。

我们先考虑一下真人的情况
- 是比较传统正经像可以打印的A4一样布局？还是
- 个人形象突出面积占比是1/2甚至 1/1 ？
再来考虑一下自己设计形象的情况
- 尽可能的丰富还是内容并没有那么多？
- 整体颜色搭配，会导致css是自己写得多还是改改bootstrap就可以达到？

线框图/设计稿直接关系到你的页面布局，而布局影响自适应，自适应就需要用bootstrap解决。

一开始想好，规划好。甚至素材处理好，写bootstrap就会很快。

Bootstrap颜色自定义

官网的办法

因为我是本地文件，所以，以为按着文档把结构改了变量贴进去改改就完事，但是后续不知道怎么做。

Sass complier？让我懵了，怎么生成并引入一个index.html，尽管检索后知道vscode 扩展里搜live sas complier，但是how to make it worked in own spot？

这些细节文档是不会讲的。

有一点要强调，世界上不止你一个人在浅学，你的问题肯定前人遇到过，总有适合你的解法在网络上的不同地方！

Customizing Bootstrap 找到一个详细教程：都是使用的vscode这款编辑器，bootstrap的版本好也很接近，标题看着也像需要的内容。

但是场景又变了，人家是node安装的，是官网办法的推荐用法，因此为了能复现教程场景，还是需要用node的办法安一个bootstrap.

卡在了npm的中国特殊网络问题上，所以：cofig改连接地址解决了。这个问题其实困扰我很久了，以前稀里糊涂能运行可能是VPN的灵性。

之后就是跟着教程走，不过主题色追加没成功。

stackoverflow 也会有人问一样的问题：用这个解决了主题色的追加问题，感觉可以愉快的配色了。

我的是5.1.3 跟着改了之后就行了，不得不说还是很需要多搜搜的。

到这里就算结束了。

总结一下的话：

参考官网文档，用不用nodejs安装bootstrap确实无所谓。
sass需要搭配编译器，vscode去扩展搜live sas compiler安装重启才生效。
vscode 的setting里搜live sas format ，搜索结果直接编辑setting文件。作为新手的我不能说完全空白，但是也特别干净。编辑好了就这样：该插件教程

{
    "files.autoSave": "afterDelay",
    "workbench.colorTheme": "Quiet Light",
    "liveServer.settings.donotShowInfoMsg": true,
    "svelte.enable-ts-plugin": true,
    // 下面这个字段是我新增的
    "liveSassCompile.settings.formats":[
    

        // savePath 是相对你的custom.scss所在的上一级（scss）文件夹而言的
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/css"
        },
        //
    ]
    //新增完毕
}

然后是去按着你的custom.scss 开始写下面的内容，需要注意的是我这个是nodejs，所以路径就和本地的不一样，本地的对照本地路径改就行了。

// add your custom on top
$primary: #426579;

// add new theme colors start：
// step 1 import dependence
@import "../node_modules/bootstrap/scss/_functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_mixins";

// step 2 create your custome theme colors

$tertiary: #3fb247;

$custom-theme-colors:(
  "tertiary": $tertiary
);
//  step 3 各种map到必要的地方，
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
// 补充：下面这几个是5.1才开始要的，5.0都不用。
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// add new theme color end

//import bootstrap must
@import "../node_modules/bootstrap/scss/bootstrap";

写完就是要注意你的vscode软件最下面的那一行，右边会有个“Wath sass” 的东西，能点，点了就生成（custom.min.css 到和scss文件同级的css文件下了），如果没成功会有报错（有个OUTPUT选项卡），像个console。
这个是随改随时生效，但是文件写得有问题就白跑并不覆盖之前生成好的.min.css 文件。
原本的html引入的link，无论是cdn方式的，还是本地的bootstrp.min.css，替换成这个最新的custome.min.css的路径。
就结束了，一次干活，永久享福。