Bootstrap里的文件分別代表什么意思及其引用方法


關於Bootstrap打包的文件分別代表什么意思,官網也沒有給出一個明確的解釋,在網上查了一些資料,總價歸納了如下:

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樣式表,未經壓縮過的,可供開發的時候進行調試用
*bootstrap.min.css 是經過壓縮后的bootstrap樣式表,內容和bootstrap.css完全一樣,但是把中間不必要的空格之類的東西都刪掉了,所以文件大小會比bootstrap.css小,可以在部署網站的時候引用,如果引用了這個文件,就沒必要引用bootstrap.css了,下面的文件同樣。

bootstrap的環境至少需要3個文件:bootstrap.min.css、jQuery.min.js、bootstrap.min.js,具體代碼如下:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件,務必在bootstrap.min.js 之前引入 -->  
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//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網頁的最底部,這么做是為了防止網頁未加載完畢而這兩個文件先加載可能產生的不必要的問題。

關於字體文件的解釋:

而由於網頁中使用的字體類型,也是各瀏覽器對字體類型有不同的支持規格。 字體格式類型主要有幾個大分類:TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

Windows和Mac系統最常用的字體格式,其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字體,這使得它們比基於矢量的字體更容易處理,保證了屏幕與打印輸出的一致性。同時,這類字體和矢量字體一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。

EOT – Embedded Open Type (.eot)

EOT是嵌入式字體,是微軟開發的技術。允許OpenType字體用@font-face嵌入到網頁並下載至瀏覽器渲染,存儲在臨時安裝文件夾下。

OpenType (.otf)

OpenType是微軟和Adobe共同開發的字體,微軟的IE瀏覽器全部采用這種字體。致力於替代TrueType字體。

WOFF – Web Open Font Format (.woff)

WOFF(Web開發字體格式)是一種專門為了Web而設計的字體格式標准,實際上是對於TrueType/OpenType等字體格式的封裝,每個字體文件中含有字體以及針對字體的元數據(Metadata),字體文件被壓縮,以便於網絡傳輸。

SVG (Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的開放標准的圖形格式。SVG字體就是使用SVG技術來呈現字體,還有一種gzip壓縮格式的SVG字體。使用方法:使用CSS3的@font-face屬性可以實現在網頁中嵌入任意字體。 但是IE只支持微軟自有的EOT格式字體,需要用字體轉換工具將其轉換為EOT格式,其他瀏覽器都不支持這一字體格式,其它瀏覽器可以設置TTF(TrueType)和OTF(OpenType)兩種字體作為自定義字體。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM