01 | Bootstrap使用入門

An楠發表於2019-08-08

Bootstrap做一個簡單的頁面佈局 在正式去改專案程式碼之前,我們先做一個靜態頁面,根據我們之前的設計。這也是正式開發中常見的流程——有前端組/部門來做靜態頁面,後端來套頁面。

介紹 我們先來了解下Bootstrap是什麼。Bootstrap發展到現在,已經不能夠用css框架來概括了,因為它提供了很多除了頁面佈局之外的功能,封裝好了很多常用的互動的元件。因此這個框架中除了有css之外,還有javascript程式碼。這些都是我們開發是會用到的。

Bootstrap之所以能夠流行起來,最大的原因還是它的易用性和美觀,雖然不如專門的業務定製來的更好,但對於沒有設計師團隊資源的人來說,已經比自己畫的頁面好看很多了。

我們先看下這個框架能夠提供給我們什麼功能,從大的分類上來說包含以下幾個:

頁面腳手架 —— 比如:樣式重置、瀏覽器相容、格柵系統、兩個簡單的佈局 基礎的css樣式 —— 比如:程式碼高亮、排版、表單、表格和一些小的樣式效果 元件 —— 提供了很多常用元件,如:tab、pill、導航、彈窗、頂部欄等 javascript外掛 —— 主要是一些動態的功能,比如下拉選單、模態窗、進度條等 佈局和格柵系統 佈局和格柵系統需要單獨拿出來說,我們大部分需要用到的就是兩個配置/樣式。

佈局我們可以

簡單的頁面佈局 有了一個大概的瞭解之後,我們來實踐一下,

參考 http://v3.bootcss.com/ https://getbootstrap.com/ http://www.bootcdn.cn/bootstrap/ https://zh.wikipedia.org/wiki/SHA%E5%AE%B6%E6%97%8F https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes https://developer.mozilla.org/zh-CN/docs/Web/Security/%E5%AD%90%E8%B5%84%E6%BA%90%E5%AE%8C%E6%95%B4%E6%80%A7#%E5%9C%A8_script_%E6%A0%87%E7%AD%BE%E4%B8%AD%E5%A2%9E%E5%8A%A0_SRI

相關文章