bootstrap怎麼用
- IT技術
- 關注:1.73W次
bootstrap用來寫html非常快,因為它封裝了很多類,我們只需要調用類就可以了。今天咪咪我就來教教大家怎樣使用bootstrap。
操作方法
(01)打開搜狗瀏覽器,使用搜狗搜索bootstrap。搜索之後,點擊第一個bootstrap選項。
(02)然後就會進入到這個界面,因為bootstrap是一個插件,所以我們需要把它下載下來。在這裏有兩個版本,我就選擇下載3版本的。
(03)選擇版本之後,點擊“下載”按鈕就可以了。
(04)如圖,接着會自動跳轉到bootstrap下載界面,這裏就點擊第一個,至於源碼,暫時不用管。
(05)下載之後,就會得到一個壓縮包,我們先要把它解壓出來,這樣才可以使用bootstrap哦。
(06)如圖,這就是解壓後的文件夾,需要特別注意,不要隨意更改文件夾裏面的文件,這點很重要,不然bootstrap可能會失效。我們只需要複製這個文件夾就可以了。
(07)之後,我們在Hbuilder裏面新建一個項目,然後把複製好的文件夾放到JS文件夾下面,或者其他文件夾也可以。然後再把jQuery放到JS文件夾。
(08)之後,我們來看看bootstrap3.3.7文件夾,可以看到裏面有很多css文件以及JS文件。
(09)接着我們引用bootstrap文件夾裏面的一個css文件,一般都是引用,這個文件包含有很多類,待會我們可以調用它裏面的類名。還需要特別注意的是,如果使用了bootstrap裏面的JS文件,必須引入jQuery,因為bootstrap依賴於jQuery插件。
(10)接着我們設置三個按鈕標籤,然後給class添加一些類名,如圖,class引號後面的類名就是文件裏面的類。
(11)之後,打開瀏覽器,可以看到每個按鈕都有不同的顏色,這樣我們就不用自己去寫css樣式,直接調用類名就可以了哦。
特別提示
最後總結一下,bootstrap裏面有很多的類,調用就可以得到相應的樣式,而且再次強調,不要隨便修改bootstrap文件夾裏面的文件以及文件路徑!並且如果用到了bootstrap裏面的JS文件,一定要引入jQuery哦。當然,在這裏我只引用到了css文件。
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/v25ze.html