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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...