一片關於Bootstarp4的文章

1、Bootstarp

Bootstrap 是全球最受歡迎的前端組件庫，用於開發響應式佈局、移動設備優先的 WEB 項目。能夠讓你快速的排版，不用在寫那些繁雜的樣式。Bootstrap是開源免費的，設計人員能夠方便的從網上下載最新的版本。Bootstrap 源碼裏包含預先編譯的CSS、JavaScript 和圖標字體文件以及LESS、JavaScript 和文檔的源碼。

2、學完Bootstarp4的一些通用工具的記錄

1.邊框的設置

添加邊框屬性，顯示指定邊框。
（注意看邊框的效果時須要加上內容）
效果圖以下：

<span class="border">這是內容</span>
<span class="border-top">這是內容</span>
<span class="border-right">這是內容</span>
<span class="border-bottom">這是內容</span>
<span class="border-left">這是內容</span>

<span class="border border-primary">這是內容</span>（設置邊框的顏色）
（"border-primary"是邊框的顏色）
使用.rounded元素能夠輕鬆的定義四個圓角的孤度及顯示效果。

2.顏色設置

效果圖以下：

代碼以下：

<p class="text-primary">.text-primary</p>淺藍色
<p class="text-secondary">.text-secondary</p>黑色
<p class="text-success">.text-success</p>綠色
<p class="text-danger">.text-danger</p>紅色
<p class="text-warning">.text-warning</p>黃色
<p class="text-info">.text-info</p>深藍色
不一一列舉

使用顏色樣式，在連接上也能正常使用（呈現）， 注意：e .text-white 、 .text-muted這兩個 class樣式不支持連接上使用（沒有連接樣式）。

3、網格系統

<1>.Bootstrap 4 網格系統有如下 5 個類:

• col- 針對全部設備
• col-sm- 平板 - 屏幕寬度等於或大於 576px
• col-md- 桌面顯示器 - 屏幕寬度等於或大於 768px
• col-lg- 大桌面顯示器 - 屏幕寬度等於或大於 992px
• col-xl- 超大桌面顯示器 - 屏幕寬度等於或大於 1200px

<2>.基本的樣式
效果圖以下

代碼以下

<div class="container-fluid">（container-fluid"是控制網頁內容和body的留白）
  <div class="row">
    <div class="col" style="background-color:lavender;">.first</div>
    <div class="col" style="background-color:orange;">.second</div>
    <div class="col" style="background-color:lavender;">.third</div>
  </div>
</div>

以上只是Bootstarp中的一點點，還有不少。