線上書籍

Home

網站程式設計-PHP

一、響應式(RWD)網頁介紹
  1. 響應式網頁設計(Responsive Web Design)，網站會自動針對不同瀏覽媒介(桌上型電腦、筆記型電腦、平板、手機)的螢幕尺寸，進行內容調整而以最佳瀏覽(排版)的方式呈現。
  2. 需求，Internet Explorer 9 以上，Chrome、Firefox、Opera、Safari則使用最新版本即可
  3. 開發成本與時間比網頁APP低
  4. 不需要下載APP就能使用
  5. 維護成本比APP低
  6. 利於SEO(搜尋引擎最佳化)
  7. 但小尺寸螢幕不適合複雜的功能或介面
二、Bootstrap安裝
  1. 由Twitter所開發
  2. 採模組化設計
  3. 官網：http://getbootstrap.com/
    中文：https://kkbruce.tw/bs3/
  4. Bootstrap範本：https://kkbruce.tw/bs3/GettingStarted#examples
三、佈局規則 Grid System
  1. Grid System 使用一系列包含內容的行和列來創建頁面佈局，使用方式如下
  2. row 必須放在 .container (固定寬度) 或 .container-fluid (100%寬度) 容器中，以便適當的進行對齊和內距(padding)調整。
  3. 使用 row 來建立水平群組的 column。
  4. 內容應該放置在column之內，並且僅只有column能作為row的直接子元素 。
  5. 定義好的格線類別，像是 .row 和 .col-xs-4 等，可用來快速建立格線布局。
  6. 每個row中允許的column，加總之數值最大為 12 。舉例來說，四個相等的column 應使用 四個 col-xs-3 來設置。
  7. 如果超過12個 column 放在單一個 row 中，每個群組額外的 column 將作為一個單元包裝到新的一行。
  8. 格線類別的套用，會使用設備螢幕寬度大於或等於來當判斷點，而且針對較小螢幕設備進行了格線類別的重寫。因此，套用 .col-md- 到元素上時，不僅僅是影響中螢幕設備的樣式，也會影響大螢幕設備的樣式(如果沒有套用 .col-lg- )。
  9. 格線選項
      超小螢幕設備 手機（<768px） 小螢幕設備 平板（≥768px） 中螢幕設備 桌面（≥992px） 大螢幕設備 大桌面（≥1200px） 格線行為 容器寬度 類別前綴 column 數 column 寬度 中縫寬度 可巢狀套用 位移（Offsets） column 排序
    總是水平怖局 開始是折疊的，當超過判斷點時回復水平怖局
    無（自動） 750px 970px 1170px
    .col-xs- .col-sm- .col-md- .col-lg-
    12
    自動 ~62px ~81px ~97px
    30px（column 左右邊各 15px）
    是
    是
    是
四、Bootstrap 元件
  1. Bootstrap：超過數十個可重覆使用的元件建置，元件有符號圖示(Glyphicons)、下拉選單、輸入框(Input)群組、導覽、警告視窗等等許多功能。
  2. JavaScript：內含13個JQuery外掛，外掛有提示(tooltip)、彈出視窗(popover)、對話視窗(modal)等具互動性的元件。

  3. 巡覽列：https://kkbruce.tw/bs3/Components#navbar

五、HTML5 與 CSS3 
  1. HTML是描述網頁內容與結構的語言，而CSS則是負責編排的工作，可說是一種控制網頁內容外觀的格式規則集合。
  2. HTML決定標題、段落、超連結等基礎的項目，而CSS則是負責美化與定義這些項目的內容樣式。
  3. CSS樣式表的全名為 Cascading Style Sheet，它可定義 HTML標籤，將許多文字、圖片、表格、圖層、表單等設計加以格式化。
  4. CSS可以自定 CLASS(.) 與 ID(#) 兩種選擇器。
  5. CLASS 可以重複 ， ID則是唯一