Bootstrap

Bootstrap：快速建立響應式網頁

2021-03-20 /


Bootsrap 是一種功能強大得前端網頁框架，相關介紹都可以從網路上找到許多資料，對於非科班出身，也不是從事前端相關工作，只是想要快速製作網頁又想要網頁美美的人，像我這種人XD，又或者是想要學習前端網頁技術的人而言，這是一個好選擇。
以前曾學習過一點 HTML、CSS …等前端網頁程式語言，在念碩士班時，我在實驗室也是負責網頁管理，對於網頁製作其實並不陌生，不過一直都沒好好學習網頁設計這塊，雖然知道有一些模板框架可以使用，好縮短網頁製作的時間，但都沒去深入研究，光搞研究就占了大半時間………

近期小弟我正在服兵役，剛好休假都沒啥事幹，乾脆來研究之前一直沒好好正視的 Bootstrap

Bootsrap 是什麼？

是一個由 HTML、CSS 和 JavaScript 寫成的前端框架


Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

從官網介紹可以略知一二  ──── 使用全球最流行的前端開發工具 Bootstrap，快速設計及自定義響應式網站，其擁有豐富的 Sass 變數與 mixins、響應式網格系統、大量預設元件以及強大的 JavaScript 插件。

基本上它就是已經替你設定好響應式網頁所需要的設定了，使用者只要在框架的基礎上進行網頁開發就好。

恩？所需設定是什麼呢？

基本上它已經寫好 CSS，開發者只要專心製作 HTML 網頁並上加上 Bootstrap class，就能將它整合到你的網頁之中，再加上本身的官方文件也非常完善，基本上許多指令可以直接複製貼上，不管是學習還是開發上都平易近人，這種方式肯定可以提高效率，難怪許多參考書都會提到它。

開始製作

首先，先去 Bootstrap 官網 準備下載檔案，雖然裡面說可以利用 npm 來安裝，但我這隻菜雞從來沒用過，以後找個時間再來學習吧，這次就先 Pass 了，取而代之的方式，我直接從官網下載範例來修改成自己的網頁，我是使用 4.6 版的範本來做，然後我自己習慣使用 VS Code 來編輯自己的程式，基本上準備工作就完成了。

接下來，就選擇自己喜歡的範例當成基底進行修改，這些範例都是可以直接開的，我只要把自己想要打的內容加入進去，並適當加入 Bootstrap 的屬性即可。例如 Grid 屬性 (取至官網說明文件)，你只要設定對應的 Class 名稱，就可以讓你的 HTML 具有響應式網頁的網格佈局了。

Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes 
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
其他還有許多文件等著探索，礙於時間，先對 Grid 系統有基本認識就好，其他東西用法也一樣，就是加入 Bootstrap 的屬性進去，我目前使用兩種範例：一個是 Cover 當作首頁，看起來像一頁式網頁的範本；而另一個是 Jumbotron，一個超大容器的範例。

小結

用了 Bootstrap 製作出個人網站，不過目前沒放什麼內容，其他東西像是多頁面共用導覽列及頁尾則是用引入 JavaScript 去解決，以前內容共用功能是用 PHP 來做，需要搭配後端伺服器，但這次我將製作好的網頁放在 GitHub 上，並不能靠 PHP 來完成，所以才用JS去做。之後邊學習就邊更新網站吧XD

完成的個人網頁：https://jacky10001.github.io/

Refer

522 則留言

 較舊的留言
較新的留言 

發佈回覆給「JosephSom」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *