這篇文章主要介紹了如何在pycharm中安裝Bootstarp,創(chuàng)新互聯(lián)小編覺得不錯,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨創(chuàng)新互聯(lián)小編來看看吧!
創(chuàng)新互聯(lián)于2013年開始,先為孝義等服務(wù)建站,孝義等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為孝義企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。一.安裝
首先打開Bootstarp的官網(wǎng): https://v3.bootcss.com
下載完成后,解壓壓縮包,把解壓后的文件導(dǎo)入pycham中
在HTML頁面中的style中導(dǎo)入bootstrap的css文件和js文件,建議導(dǎo)入min.css,體積更小
以我的文件路徑為例:
安裝完成
二.更改pycharm的默認(rèn)HTML頁面(可跳過)
在pycharm中創(chuàng)建一個新的HTML頁面,如果還想使用Bootstarp,只能重新導(dǎo)入上述路徑
為了避免重復(fù)的工作,可以更改默認(rèn)的HTML模板
1.打開setting,找到下面選項(xiàng)
2.找到HTML文件
3.更改右邊的代碼
更改模板完成
三.Bootstarp的使用:
1.柵格系統(tǒng)
Bootstarp的重要特性:柵格系統(tǒng)
官方的解釋可以看官網(wǎng): https://v3.bootcss.com/css/#grid
個人理解就是:在一個container的容器內(nèi),被行分隔,每一行分為12個單位的長度
//簡單的模型
簡單的測試一下:
//c1中沒有設(shè)置寬度,只設(shè)置了div的高度12345678910111213
.c1{ height: 50px; background-color: red; border: 1px black solid }
可以看到一個container容器被分為12份,這是因?yàn)樵O(shè)置了col-lg-1的原因,該類可以從col-lg-1設(shè)置到col-lg-12,
1234
效果如下:
還有重要的一點(diǎn):
每一行的每一個列還可以繼續(xù)切分
效果如下:
做的比較丑,勿怪。。
代碼:
//在這個div里面進(jìn)行切分//結(jié)束234
2.組件和各種控件的獲取:
1.通過官網(wǎng)的復(fù)制粘貼獲?。? ?´ω`? )
直接復(fù)制代碼,粘貼到你需要的地方
2.開發(fā)者模式:
F12進(jìn)入開發(fā)者模式(每個瀏覽器可能不一樣)
以上就是創(chuàng)新互聯(lián)小編為大家收集整理的如何在pycharm中安裝Bootstarp,如何覺得創(chuàng)新互聯(lián)網(wǎng)站的內(nèi)容還不錯,歡迎將創(chuàng)新互聯(lián)網(wǎng)站推薦給身邊好友。