寫這篇文章的原因###
之前總是遇到調用CSS文件或者JavaScript文件出錯的問題,個人覺得很大一部分問題是因為幾個bootstrap的版本不熟悉捅彻,調用才會出錯,所以總結一下挺身!
預編譯版本###
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
上面展示的就是 Bootstrap 的基本文件結構:預編譯文件可以直接使用到任何 web 項目中爵卒。我們提供了編譯好的 CSS 和 JS (bootstrap.) 文件导帝,還有經(jīng)過壓縮的 CSS 和 JS (bootstrap.min.) 文件守谓。同時還提供了 CSS 源碼映射表 (bootstrap.*.map) ,可以在某些瀏覽器的開發(fā)工具中使用您单。同時還包含了來自 Glyphicons 的圖標字體斋荞,在附帶的 Bootstrap 主題中使用到了這些圖標。
bootstrap源碼###
Bootstrap 源碼包含了預先編譯的 CSS虐秦、JavaScript 和圖標字體文件平酿,并且還有 LESS、JavaScript 和文檔的源碼悦陋。具體來說蜈彼,主要文件組織結構如下:
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/、js/ 和 fonts/ 目錄分別包含了 CSS俺驶、JS 和字體圖標的源碼幸逆。dist/ 目錄包含了上面所說的預編譯 Bootstrap 包內的所有文件。docs/ 包含了所有文檔的源碼文件暮现,examples/ 目錄是 Bootstrap 官方提供的實例工程还绘。除了這些,其他文件還包含 Bootstrap 安裝包的定義文件栖袋、許可證文件和編譯腳本等拍顷。
編譯 CSS 和 JavaScript 文件###
Bootstrap 使用 Grunt 作為編譯系統(tǒng),并且對外提供了一些方便的方法用于編譯整個框架塘幅。下面講解的就是如何編譯源碼昔案、運行測試用例等內容尿贫。
- 這里自己不是很懂,請教大神
基本模板###
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面爱沟,任何其他內容都*必須*跟隨其后帅霜! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界呼伸!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>