react腳手架創建幾種方式 node v16.17.0 npm 8.15.0 yarn 3.2.3 vite 3.1.3 配置less-loader npm 首先通過 npm 方式全局安裝 create-react-app npm install -g create-react-app 查看是否安 ...
Bootstrap
Bootstrap 是預編寫的 CSS 和 JavaScript 代碼段（chunk）的集合。
引入
任何 Web 應用，都可以通過添加如下代碼到 HTML 的 head 標簽中來引入 Bootstrap 。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container-fluid">
<!-- something -->
</div>
其中 rel 表示該 link 用於樣式表，href 表明 Bootstrap 的地址。
或者可以把 Bootstrap 作為 JavaScript 庫引入，在 body 標簽底部放入 script 標簽。
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
其中 src 表示 Bootstrap 的地址。
Fluid
Bootstrap 會根據屏幕大小來動態調整 HTML 元素的大小————因此稱為 Responsive Design（響應式設計）。
響應式設計 Responsive
現在通過 Bootstrap，只需要為 image 標簽上設置 class 屬性為 img-responsive ， 就可以讓它完美地適應頁面的寬度了。
<img class="img-responsive" src="">
文本
居中
只需要將元素的 class 屬性設置為 text-center 就可以實現。
<h2 class="text-center">CatPhotoApp</h2>
顏色
使用 text-XX 來表示文本顏色，其中 XX 和下列按鈕顏色，相同.
// Primary // blue
// Secondary // grey
// Success // green
// Danger // red
// Warning // yellow
// Info // skyblue
// Light // whie
// Dark // black
// Link // anchor
按鈕
Bootstrap 的 button 元素有著獨有的、比預設 HTML 按鈕更好的樣式風格。
<button class="btn btn-default">Like</button> // white color
塊級元素按鈕
通過為按鈕添加 class 屬性 btn-block 使其成為塊級元素，按鈕會伸展並填滿頁面的整個水平空間，後續的元素會流到這個塊級元素的下方，即 "另起一行"。
<button class="btn btn-default btn-block">Like</button>
按鈕不同主題
btn-primary class 的顏色是應用的主要顏色。 這樣 “突出顯示” 是引導用戶按部就班進行操作的有效辦法。primary 被稱為 modifier 修改器，因為這部分是可以改動的。
修改器改變了組件的視覺樣式。
<button class="btn btn-primary btn-block">Like</button>
// blue color
可選操作樣式
Bootstrap 有著豐富的預定義按鈕顏色。 淺藍色的 btn-info class 通常用在備選操作上。
<button class="btn btn-info btn-block">Info</button>
// 淺藍
危險
紅色 btn-danger class 用來提醒用戶此行為具有破壞性
<button class="btn btn-danger btn-block">Delete</button>
柵格系統
Bootstrap 經常使用 container 作為柵格系統的父/根元素。
Bootstrap 具有一套 12 列的響應式柵格系統，可以輕鬆的將多個元素放入一行並指定它們的相對寬度。 Bootstrap 的大部分 class 屬性都可以應用在 div 元素上。
Bootstrap 的列寬取決於用戶的屏幕寬度。 比如，手機有著窄屏幕而筆記本電腦有者更大的屏幕.
就拿 Bootstrap 的 col-md-* class 來說。 在這裡， md 表示 medium （中等的）， 而 * 是一個數字，說明瞭這個元素占有多少個列寬度。 這個例子就是指定了中等大小屏幕（例如筆記本電腦）下元素所占的列寬度。
使用 col-xs-* ， 其中 xs 是 extra small 的縮寫 (比如窄屏手機屏幕)， * 是填寫的數字，代表一行中的元素該占多少列寬。
斷點，類首碼和維度對應：
- Extra small - xs - < 576px , 該項為預設值，因為 Bootstrap 是 mobile-first 的。
- Small - sm - >= 576px
- Medium - md - >= 768px
- Large - lg - >= 992px
- Extra large - xl - >=1200px
- Extra extra large - xxl - >= 1400px
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button></div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button></div>
</div>
行內元素
使用 span 標簽來創建行內元素。 可以把不同的元素放在同一行，甚至能為一行的不同部分指定不同樣式。
<p>Top 3 things cats <span class="text-danger">hate:</span></p>
Font-Awesome
Font Awesome 是一個非常便利的圖標庫。 通過 webfont 或矢量圖的方式來使用這些圖標。 這些圖標就和字體一樣， 不僅能通過像素單位指定它們的大小，它們也同樣會繼承父級 HTML 元素的字型大小。
引入:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
i 元素原本是用來表示斜體文字內容的；不過現在，用它來表示圖標也很常見。 只需要為 i 元素添加相應的 class 就可以讓它展示圖標，比如：
<i class="fas fa-info-circle"></i>
<i class="fas fa-thumbs-up"></i>
<i class="fas fa-trash"></i></i>
表單
單選按鈕
Bootstrap 的 col-xs-* class 也可以用在 form 元素上！ 這樣就可以在不關心屏幕大小的情況下，將的單選按鈕均勻的平鋪在頁面上。
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
<div class="col-xs-6">
<label><input type="checkbox" name="personality"> Loving</label></div>
<div class="col-xs-6">
<label><input type="checkbox" name="personality"> Lazy</label></div>
<div class="col-xs-6">
<label><input type="checkbox" name="personality"> Crazy</label></div>
</div>
覆選框
Bootstrap 的 col-xs-* 可應用於所有的 form 元素上，包括覆選框！ 這樣就可以不必關註屏幕大小，均勻地把覆選框放在頁面上了。
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
輸入框
可以在 submit button 元素內加上 <i class="fa fa-paper-plane"></i>，來添加 Font Awesome 的 fa-paper-plane 圖標。
所有文本輸入類的元素如 <input>，<textarea> 和 <select> 只要設置 .form-control class 就會占滿100%的寬度。
<input class="form-control">
標題
<h3 class="text-primary text-center">jQuery Playground</h3>
行
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
Wells
Bootstrap 有一個叫作 well 的 class，作用是使界面更具層次感。
<div class="well">
</div>
記住，可以這樣給一個元素設置 id：
<div class="well" id="center-well">
給左邊的塊設置 id 為 left-well。 給右邊的塊設置 id 為 right-well。
