bootstrap是非常優秀的前端開發框架,利用bootstrap可以很快的製作出各種優秀的前端網頁,學會bootstrap一天的時間足夠了,只要掌握其中的幾個要點,其他的不需要記憶。bootstrap是移動優先的前端開發框架,最初是為了滿足各種移動設備上自適應而誕生的。
bootstrap
bootstrap版本選擇
現在主要有兩個版本,v3.x和4.x版本。這兩個版本的主要差別是3x為舊版,支持IE8瀏覽器,兼容更多的老舊版瀏覽器,目前官方已經不再升級和維護,而4x版是最新的版本,支持IE10及以上版本的瀏覽器。隨着微軟對win7系統的淘汰,更多人會選擇win10系統,那麼低版本的IE瀏覽器也就勢必會淘汰,所以我們現在最好直接使用4x版本,v3和v4兩個版本之間的語法也不一樣,需要單獨學習,不過不是變化特大的那種,是屬於有好多寫法不一樣了。
我們就直接選擇bootstrap4.4最新版,v4.4版本相關的設備支持如下:
去官網提供的GitHub上下載最新的版本,在解壓後的文件夾裏面找到dist裏面的js和css文件夾,分別將「bootstrap.min.css」和「bootstrap.min.js」拷貝到你的前端項目的js和css文件夾內,然後在HTML頁面裏面引入即可。
注意:js和css帶有min的是經過壓縮後,文件相對要小一些,不可修改;如果需要直接修改其源碼則使用不帶min的,比如bootstrap.css
支持的瀏覽器
支持的設備
去官網提供的GitHub上下載最新的版本,在解壓後的文件夾裏面找到dist裏面的js和css文件夾,分別將「bootstrap.min.css」和「bootstrap.min.js」拷貝到你的前端項目的js和css文件夾內,然後在HTML頁面裏面引入即可。
注意:js和css帶有min的是經過壓縮後,文件相對要小一些,不可修改;如果需要直接修改其源碼則使用不帶min的,比如bootstrap.css
在HTML中引用bootstrap源碼
在HTML裏面必須使用HTML5語法,最開始部分需要聲明語言和編碼,下圖所示,head標籤裏面的viewport是自適應設備代碼,要放在最前面。bootstrap的css文件和js文件可以按照下圖中的位置存放,不過有些開源cms識別不了,可以將js文件放在head標籤裏面預先加載就可以了。
完整網頁案例代碼
注意:js文件還需要單獨引入jQuery和popper這兩個js,並且順序是jQuery.js、popper.js、bootstrap.js,jQuery.js一定要放在第一,bootstrap.js放在最後,這三個js是一起出現的缺一不可。
編寫bootstrap自適應網頁源碼
這個部分大家要重點關注幫助文檔裏面的grid部分,我們在各種div容器實現自適應的過程中時刻都離不開格子(grid),可以稍微記憶一下。其次是在不同設備上的顯示與隱藏,我的建議是先看一遍在線文檔,也就是花個1~2小時的時間就能看完,然後就開始着手寫代碼。
bootstrap設備區分
bootstrap4使用col-*的方式區分不同的屏幕寬度,上圖中科院看出只有5中形式的寬度,很容易記憶。另外導航類、圖片、輪播等都有現成的代碼科院直接使用,相當方便。
利用bootstrap來製作自適應網頁速度快,兼容好,我們只要選好版本即可,在做兼容這方面我一般都不去花時間單獨再看,因為bootstrap已經做好了IE、Chrome、Firefox等主流瀏覽器的兼容,對於國產的瀏覽器也不需要去考慮,因為內核都是Chrome或IE,所以相當方便。喜歡就關注一下啦。