【後转前要多久】# Day17 BootStrap - 介绍、导入

个人主要是看金鱼都能懂的Bootstrap影片学习BootStrap的，
比起看文件的方式学习，金鱼有带很多比较有趣的范例及常见排版，
但CSS样式及BootStrap，我觉得最重要的还是自己练习过才会更加精熟。

BootStrap

BootStrap是透过CSS和JS写成的一包library，
载入後可以透过library中存在的class直接来套用CSS样式，
搭配上对应的HTML使用就能组成元件了。

BootStrap可以想像成，
假如你平常有自己实做一些小元件、自己刻写CSS，
当刻了好几次之後，就发现很多元件大同小异，
比方说: 连结导览列、按钮、页码
这边用到、那边也用的到，基本上都是同样的外观形式

又或者写了几次後，发现其实每个网站都有各自的颜色风格，
连结导览列、按钮、页码的颜色，只要在同一个网站上，都是那两三种颜色在变化
最後就把颜色抽出来另外写

而外存下来或者抽出来写，下次用到时就直接复制过来用、小改一下，
就能很快达成需求啦~
BootStrap就是类似这样众人的经验产物

BootStrap box-sizing

BootStrap 使用box-sizing: border-box
定义width、height就是实际呈现长宽，
border与padding列入其中会自动按比例计算，
而margin不在计算范围内，但仍向外扩张。

版本4与5差异

BootStrap 4 的部分JS功能是依赖於jQuery的。

但BootStrap5 完全舍弃掉了 jQuery，
也等於是舍弃掉了对IE11浏览器的支援。

Bootstrap 5 is designed to be used without jQuery.

引入方式

BootStrap引入方式分成两种(基本上所有网页套件引入方式都分成这两种)

方法1 CDN连结

把CDN网址加入到html <head>中，透过CDN连结引入，
当有人要浏览你的网站时，浏览器会先去下载CDN连结中的library回来。

参考 v4.6版本、v5.1版本

JS分成Bundle及Separate两种版本，
Separate是把必要用到的套件独立开来放，(v5用到popper、v4用到jquery及popper)
而Bundle是把Separate合在一块，所必要用到的套件都在这里面了

在此以v5.1做示范

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>

...

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

优点: 不用自己将Bootstrap载下来；加一两行程序码就搞定bootstrap的载入
缺点: CDN不是自己的，没办法修改客制化library。CDN会不会有连不上、或者安全性上的考量?

方法2 下载到本地中引入

也可以将整包BootStrap下载下来，放到专案里面。
载下来後，因为library在本地，可以随意修改。

参考 v4.6版本、v5.1版本

按Compiled CSS and JS下载 (Source files需再透过SASS编译後才能使用)

载到本地
载下来会发现有这麽多的档案。

优点: 可以客制化library。
缺点: 多了一些步骤。在第一次传输时可能比CDN还慢(因CDN有cache机制)

一开始学习建议把整包bootstrap载下来使用

没方向要从哪里开始?

以v5.1为例，

载下来後，css资料夹内有这麽多个档案
bootstrap.css
bootstrap.rtl.css
bootstrap-grid.css
bootstrap-grid.rtl.css
bootstrap-reboot.css
bootstrap-reboot.rtl.css
bootstrap-utilities.css
bootstrap-utilities.rtl.css
要从哪里开始？

CSS其实只要留bootstrap.css这个档案就可以了，
因为bootstrap.css里面已经包含所有其他如 grid、reboot、utilities版本的css。

min版本是把程序码排版换行、空白全部删除，经过压缩降低档案大小的版本
其他的例如 bootstrap.css.map、bootstrap.min.css、bootstrap.min.css.map 这些资料都可以先删除，
以降低一次接触太多的新东西的恐慌程度。

另外JS也是，只留bootstrap.bundle.js就好，其余删除。

删光光之後只会留下这两个档案，看起来心情舒畅许多

只会留下这两个档案

之後试试看以下的程序码，新增一个div.container

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

<div class="container"></div>

</body>
</html>

使用Webstorm IDE的话，按下ctrl+左键 就可以导到有出现container位置的CSS去了，
在开发时，有助於我们查看BootStrap内到底写了些什麽样的CSS样式。

webstorm


<<:  JS 17 - 继承和浏览器的小问题

>>:  Day17 - 【概念篇】OAuth flows: Client Credentials

[早餐吃到饱 - 1] 薆悦酒店 - 五权馆（台中） #您有多久没有好好的吃顿早餐了呢～

今天用卤肉跟大家说声早安！！ 薆悦酒店的早餐是有对外（非住客）开放的，但是要先预约。 今年的4月10...

Day14 - 模型评估 part 1

在今天的文章中我们会使用词正确率来评估模型的效能，词正确率是由词错误率(Word Error Rat...

Coding Practice

本章主要学习如何透过演算法学习训练思考 Palindrome BigO(n) 检查是否reverse...

ADV campaigns: why it is important to monitor conversions

In recent years, with the development of web marke...

Day4 WordPress 介绍，基础设定与发文

上篇文章我们在 BlueHost 架起了 WordPress 环境，但也许你还不知道什麽是 Word...