最近需要做乙個簡單的web頁面。考慮到前端經驗不足,為了快速產出,同時專案只是乙個工具,對專案沒有什麼要求,所以我選擇了bootstrap這個框架作為web框架。寫從零
學習
bootstrap
的初衷:
讓我們先從bootstrap的最簡單的模板開始:
讓我們一行行的來看(我用#代表解釋):
#代表這是html5頁面
#lang是「language」的意思,是html標籤的乙個屬性,這個屬性是告訴搜尋引擎,我這個頁面是中文頁面,是方便搜尋引擎收錄的,對頁面顯示並沒有影響。"zh—cn"是iso標準的一種寫法,表示中文。"zh"是"zhongwen"的前兩個字母(如果要告訴瀏覽器是英文介面,則lang="en","en"就對應了「english」的前兩個字母),"cn"是國家**。(
#meta標籤是方便瀏覽器解析html檔案的標籤,charset屬性告訴瀏覽器,本html檔案的編碼方式是utf-8.
#http-equiv屬性告訴瀏覽器,本html規定的相容性等細節是怎樣的。(
#x-ua-compatible值是ie8及以後版本的ie(ie9,ie10,11,...)中才生效的標記,用來指定瀏覽器去模擬某個特定版本的ie瀏覽器的渲染方式。(網上有的文章居然說 x-ua-compatible是ie8的專用標記,簡直太誤導人了!比如這篇文章以及
#為什麼要這麼做?因為微軟之前的ie(ie6,ie7)是不符合w3c標準的,因此有些**的**使用的是老ie的標準,而不是w3c的標準。而從ie8開始,微軟採用了w3c標準。
#所以可以通過這個屬性值,來強制規定瀏覽器的渲染方式,當設定content="ie6"的時候,這樣使用者以ie8及以上的瀏覽器也能正常顯示ie6標準下的html網頁。
#content="ie=edge"則是強制規定了瀏覽器以當前所能支援的最新版本的ie標準進行渲染。為什麼要這樣做?因為有些使用者的瀏覽器可能設成了「相容模式」,是以老ie標準去渲染html檔案,當遇到w3c標準的html**的時候會相出現錯誤。所以,當我的**是w3c標準的,又不考慮老ie標準的支援時,強制使用瀏覽器中所能支援的最新版本ie渲染,能夠避免「相容模式」帶來的顯示錯誤。(即不需要使用者手動更改瀏覽器的渲染模式)
#viewport規定了顯示視窗的相關設定,這裡content中width規定了顯示寬度,initial-scale規定了初始縮放比例。(關於其他的功能:設定使用者能否縮放,最大縮放比例,最小縮放比例等,參考:
#這裡是條件注釋判斷,當ie版本小於ie9的時候,scrpit src採取上述cdn的資源。
#這裡是鏈結了jquery和bootstrap的js檔案,放在最後是為了加快網頁載入速度,即首先顯示出網頁內容,然後載入js檔案。如果放在前面,比如head標籤裡,則網速不好的時候,會一直卡在載入js檔案那裡,無法很快的顯示出網頁內容,影響使用者體驗。
Bootstrap基礎入門
一 bootstrap簡介 二 排版屬性 三 布局模式 四 查詢 五 柵格系統 一 bootstrap簡介 二 排版屬性 lead 使段落突出顯示 small 設定小文字為父文字的85 大小 text left 設定文字左對齊 text center 設定文字居中對齊 text reght 設定文字...
bootstrap入門使用
1.bootstrap使用簡單模板 container類用於固定寬度並支援響應式布局的容器。兩邊有留白 container fluid類用於 100 寬度,佔據全部視口 viewport 的容器。查詢 超小螢幕 手機,小於 768px 沒有任何 查詢相關的 因為這在 bootstrap 中是預設的 ...
bootstrap基礎學習
簡潔 直觀 強悍的前端開發框架,讓web開發更迅速 簡單。常用 哦,還有bootstrap是基於jquery的,所以之前要先引入jquery 1.bootstrap把螢幕分成四個狀態 1 lg 大螢幕 螢幕寬度大於1200px 2 md 中等螢幕 螢幕寬度992 1200px 3 sm 小螢幕 螢幕...