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

来源:http://www.cnblogs.com/deshun/archive/2017/04/30/6789788.html
-Advertisement-
Play Games

關於Bootstrap打包的文件分別代表什麼意思,官網也沒有給出一個明確的解釋,在網上查了一些資料,總價歸納瞭如下: *bootstrap.css 是完整的bootstrap樣式表,未經壓縮過的,可供開發的時候進行調試用*bootstrap.min.css 是經過壓縮後的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)兩種字體作為自定義字體。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • LZ最近離職,閑著也是閑著,打算梳理下 公司做的是電商,CTO打算把2.0系統用java 語言開發,LZ目前不打算做java,所以 選擇離職。離職前,在公司負責的最後一個項目 供應鏈系統。 系統分為 3套子系統: 1 供應鏈工作平臺(即用戶操作平臺):採用CS架構,Sqlite做緩存。 2 消息中心 ...
  • AngularJs自帶有很多過濾器,現在Insus.NET演示一個自定義的過濾器,如實現一個數據的平方。本演示是在ASP.NET MVC環境中進行。創建一個app: 創建一個控制器: 接下來是重點,創建一個過濾器,例子中的過濾器是實現一個數值的平方。 以上的所指的App,控制器和過濾器均是依Angu ...
  • 一、過濾器(Filter) ASP.NET MVC中的每一個請求,都會分配給對應Controller(以下簡稱“控制器”)下的特定Action(以下簡稱“方法”)處理,正常情況下直接在方法里寫代碼就可以了,但是如果想在方法執行之前或者之後處理一些邏輯,這裡就需要用到過濾器。 常用的過濾器有三個:Au ...
  • 在ASP.NET MVC使用切片腳本,實在是很溜。在使用layout之後,只是視圖套用_Layout之後,在視圖中任一位置任一時候均可以使用切片腳本。首先在_Layout.cshtml定一些規則: 上圖中#2標記中,引用jquery庫。#3標記是定義渲染切片。OK,在視圖中就可以寫javascrip ...
  • 今天接到客戶的反饋,說他們的系統無法查詢2017年2月份的賬單,原因是沒辦法選擇2017年2月份,沒辦法選擇2月份???,馬上開啟vs,運行系統,應為是去年的系統,測試數據也是去年的,就查詢了2016年2月份的數據,一切OK啊。 就讓客戶遠程,操作給我看,我就不信邪了,一遠程還真是的,一月份和三月份 ...
  • (一)認識JQuery JQuery是一個JavaScript庫,它通過封裝原生的JavaScript函數得到一套定義好的方法 JQuery的主旨:以更少的代碼,實現更多的功能 (二)JQuery的優勢 1)可以像CSS一樣訪問和操作DOM 2)修改CSS控制頁面外觀 3)簡化JS代碼操作 4)事件 ...
  • 作為一個學生黨,一開始使用atom時候並沒有意識到atom一些小功能的巨大作用。直到自己實習參與了項目,才知道這些功能在一個項目中就是能極大地提高工作效率的開發利器,這篇文章就來總結一下這些有用的功能 ...
  • 新版本 新版本的flex佈局模型是2012年9月提出的工作草案,這個草案是由W3C推出的最新語法,這個版本立志於指定標準,讓新式的瀏覽器全面相容,在未來的瀏覽器更新換代中實現統一。 目前幾乎大部分的瀏覽器都支持了。瀏覽器支持情況可以點擊這裡查看,下圖為支持flex的情況 屬性詳解 首先和之前一樣,先 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...