bootstrap怎麼用

來源:酷知科普網 1.83W

bootstrap用來寫html非常快,因為它封裝了很多類,我們只需要呼叫類就可以了。今天咪咪我就來教教大家怎樣使用bootstrap。

操作方法

(01)開啟搜狗瀏覽器,使用搜狗搜尋bootstrap。搜尋之後,點選第一個bootstrap選項。

bootstrap怎麼用

(02)然後就會進入到這個介面,因為bootstrap是一個外掛,所以我們需要把它下載下來。在這裡有兩個版本,我就選擇下載3版本的。

bootstrap怎麼用 第2張

(03)選擇版本之後,點選“下載”按鈕就可以了。

bootstrap怎麼用 第3張

(04)如圖,接著會自動跳轉到bootstrap下載介面,這裡就點選第一個,至於原始碼,暫時不用管。

bootstrap怎麼用 第4張

(05)下載之後,就會得到一個壓縮包,我們先要把它解壓出來,這樣才可以使用bootstrap哦。

bootstrap怎麼用 第5張

(06)如圖,這就是解壓後的資料夾,需要特別注意,不要隨意更改資料夾裡面的檔案,這點很重要,不然bootstrap可能會失效。我們只需要複製這個資料夾就可以了。

bootstrap怎麼用 第6張

(07)之後,我們在Hbuilder裡面新建一個專案,然後把複製好的資料夾放到JS資料夾下面,或者其他資料夾也可以。然後再把jQuery放到JS資料夾。

bootstrap怎麼用 第7張

(08)之後,我們來看看bootstrap3.3.7資料夾,可以看到裡面有很多css檔案以及JS檔案。

bootstrap怎麼用 第8張

(09)接著我們引用bootstrap資料夾裡面的一個css檔案,一般都是引用,這個檔案包含有很多類,待會我們可以呼叫它裡面的類名。還需要特別注意的是,如果使用了bootstrap裡面的JS檔案,必須引入jQuery,因為bootstrap依賴於jQuery外掛。

bootstrap怎麼用 第9張

(10)接著我們設定三個按鈕標籤,然後給class新增一些類名,如圖,class引號後面的類名就是檔案裡面的類。

bootstrap怎麼用 第10張

(11)之後,開啟瀏覽器,可以看到每個按鈕都有不同的顏色,這樣我們就不用自己去寫css樣式,直接呼叫類名就可以了哦。

bootstrap怎麼用 第11張

特別提示

最後總結一下,bootstrap裡面有很多的類,呼叫就可以得到相應的樣式,而且再次強調,不要隨便修改bootstrap資料夾裡面的檔案以及檔案路徑!並且如果用到了bootstrap裡面的JS檔案,一定要引入jQuery哦。當然,在這裡我只引用到了css檔案。

熱門標籤