Bootstrap里的文件分別代表什么意思及其引用方法
關(guān)于Bootstrap打包的文件分別代表什么意思,官網(wǎng)也沒有給出一個明確的解釋,在網(wǎng)上查了一些資料,總價歸納了如下:
bootstrap/ <!--主目錄-->
├── css/ <!--CSS樣式文件--> │ ├── bootstrap.css <!--Bootstrap核心CSS文件--> │ ├── bootstrap.css.map <!--source map文件--> │ ├── bootstrap.min.css <!--Bootstrap核心CSS文件 壓縮版--> │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css <!--可選的Bootstrap主題文件(一般不用引入)--> │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css <!--可選的Bootstrap主題文件(一般不用引入) 壓縮版--> │ └── bootstrap-theme.min.css.map ├── js/ <!--JavaScript文件--> │ ├── bootstrap.js <!--Bootstrap核心JavaScript文件--> │ └── bootstrap.min.js <!--Bootstrap核心JavaScript文件 壓縮版--> └── fonts/ <!--字體圖標--> ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
*bootstrap.css 是完整的bootstrap樣式表,未經(jīng)壓縮過的,可供開發(fā)的時候進行調(diào)試用
*bootstrap.min.css 是經(jīng)過壓縮后的bootstrap樣式表,內(nèi)容和bootstrap.css完全一樣,但是把中間不必要的空格之類的東西都刪掉了,所以文件大小會比bootstrap.css小,可以在部署網(wǎng)站的時候引用,如果引用了這個文件,就沒必要引用bootstrap.css了,下面的文件同樣。
bootstrap的環(huán)境至少需要3個文件:bootstrap.min.css、jQuery.min.js、bootstrap.min.js,具體代碼如下:
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" rel="external nofollow" > <!-- 可選的Bootstrap主題文件(一般不用引入) --> <link rel="stylesheet" rel="external nofollow" > <!-- jQuery文件,務(wù)必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
需要注意的是:
bootstrap.min.css、jquery.min.js、bootstrap.min.js這三個文件的引入順序一定不能錯亂,一般把jquery.min.js、bootstrap.min.js這兩個文件放入HTML網(wǎng)頁的最底部,這么做是為了防止網(wǎng)頁未加載完畢而這兩個文件先加載可能產(chǎn)生的不必要的問題。
關(guān)于字體文件的解釋:
而由于網(wǎng)頁中使用的字體類型,也是各瀏覽器對字體類型有不同的支持規(guī)格。 字體格式類型主要有幾個大分類:TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
TrueType
Windows和Mac系統(tǒng)最常用的字體格式,其最大的特點就是它是由一種數(shù)學模式來進行定義的基于輪廓技術(shù)的字體,這使得它們比基于矢量的字體更容易處理,保證了屏幕與打印輸出的一致性。同時,這類字體和矢量字體一樣可以隨意縮放、旋轉(zhuǎn)而不必擔心會出現(xiàn)鋸齒。
EOT – Embedded Open Type (.eot)
EOT是嵌入式字體,是微軟開發(fā)的技術(shù)。允許OpenType字體用@font-face嵌入到網(wǎng)頁并下載至瀏覽器渲染,存儲在臨時安裝文件夾下。
OpenType (.otf)
OpenType是微軟和Adobe共同開發(fā)的字體,微軟的IE瀏覽器全部采用這種字體。致力于替代TrueType字體。
WOFF – Web Open Font Format (.woff)
WOFF(Web開發(fā)字體格式)是一種專門為了Web而設(shè)計的字體格式標準,實際上是對于TrueType/OpenType等字體格式的封裝,每個字體文件中含有字體以及針對字體的元數(shù)據(jù)(Metadata),字體文件被壓縮,以便于網(wǎng)絡(luò)傳輸。
SVG (Scalable Vector Graphics) Fonts (.svg)
SVG是由W3C制定的開放標準的圖形格式。SVG字體就是使用SVG技術(shù)來呈現(xiàn)字體,還有一種gzip壓縮格式的SVG字體。使用方法:使用CSS3的@font-face屬性可以實現(xiàn)在網(wǎng)頁中嵌入任意字體。 但是IE只支持微軟自有的EOT格式字體,需要用字體轉(zhuǎn)換工具將其轉(zhuǎn)換為EOT格式,其他瀏覽器都不支持這一字體格式,其它瀏覽器可以設(shè)置TTF(TrueType)和OTF(OpenType)兩種字體作為自定義字體。
以上所述是小編給大家介紹的Bootstrap里的文件分別代表什么意思及其引用方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的,在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
如何清除IE10+ input X 文本框的叉叉和密碼輸入框的眼睛圖標
從IE 10開始,type=”text” 的 input 在用戶輸入內(nèi)容后,會自動產(chǎn)生一個小叉叉(X),方便用戶點擊清除已經(jīng)輸入的文本,下面通過本文給大家介紹下如何清除IE10+ input X 文本框的叉叉和密碼輸入框的眼睛圖標2016-12-12
javascript設(shè)計模式 – 模板方法模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 模板方法模式原理,結(jié)合實例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JS判斷鼠標進入容器的方向與window.open新窗口被攔截的問題
這篇文章主要給大家介紹了利用Javascript判斷鼠標進入容器方向的方法,以及window.open新窗口被攔截的問題分析,文中給出了詳細圖文介紹和示例代碼,相信對大家的理解和學習具有一定的參考借鑒價值,下面來一起看看吧。2016-12-12
原生js實現(xiàn)addClass,removeClass,hasClass方法
這篇文章主要介紹了原生js實現(xiàn)addClass,removeClass,hasClass方法和使用原生JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能,需要的朋友可以參考下2016-04-04
textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果
這篇文章主要介紹了textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果,需要的朋友可以參考下2014-05-05

