css: bootstrap

11 Mar 2019

note
front-end
css

css: bootstrap
bootstrap是基於CDN技術建構的而成，由twitter公司研發。讓我們無痛撰寫css，趕快一起來看看吧！

什麼是CDN?
使用 bootstrap
- 1. 按鈕 button
- 2. 表格 table
3. 格線系統 grid system
相關連結

什麼是CDN?

CDN: Content Delivery Network

根據Wiki介紹，CDN（內容分發網絡）是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平台的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。

A content delivery network or content distribution network (CDN) is a geographically distributed network of proxy servers and their data centers.

使用 bootstrap

使用時將bootstrap網址內的程式碼引入css檔案內。

1. 按鈕 button

顏色 btn-primary 大小 btn-lg

元素可改顏色，primary為藍色 https://getbootstrap.com/docs/4.1/utilities/colors/

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

原始

  <a href="#">回首頁</a>
  <a href="#">放到購物車</a>

回首頁放到購物車

使用bootstrap

  <a href="#" class="btn btn-success">回首頁</a>
  <a href="#" class="btn btn-danger btn-lg">放到購物車</a>

回首頁放到購物車

2. 表格 table

table-hover 滑鼠移過時閃動 table-striped 將列上色

原始

  <table>
    <thead>
      <tr>
        <td>品項</td>
        <td>頁數</td>
        <td>售價</td>
      </tr>
    </thead>  
    <tbody>
      <tr>
        <td>七龍珠</td>
        <td>100 頁</td>
        <td>80 元</td>
      </tr>
   <tbody>
  </table>

使用bootstrap

  <table class="table table-striped">
    <thead>
      <tr>
        <td>品項</td>
        <td>頁數</td>
        <td>售價</td>
      </tr>
    </thead>  
    <tbody>
      <tr>
        <td>七龍珠</td>
        <td>100 頁</td>
        <td>80 元</td>
      </tr>
   <tbody>
  </table>

3. 格線系統 grid system

bootstrap解說:
https://getbootstrap.com/docs/4.1/layout/grid/

col-+數值，(欄位的全部數值總和為12，依照比例分割)

原始

<article>
    <section class="content">內文</section>
    <aside class="promotion">廣告</aside>
</article>

使用bootstrap：隔線切出比例

  <article class="row">
      <section class="content col-5">內文</section>
      <aside class="news col-4">消息</aside>
      <aside class="promotion col-3">廣告</aside>
  </article>