安裝和試用bootstrap
首先,在bootstrap官網下載預編譯好的bootstrap。如果下載源代碼,就需要使用Recess來編譯LESS文件,生成可重用的CSS文件。我直接下載的bootstrap3的預編譯版本。
解壓後bootstrap3中有三個文件夾:css, js , fonts
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── 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.*) 文件,還有經過壓縮的 CSS 和 JS (bootstrap.min.*) 文件。同時還提供了 CSS 源碼映射表 (bootstrap.*.map) ,可以在某些瀏覽器的開發工具中使用。同時還包含了來自 Glyphicons 的圖標字體,在附帶的 Bootstrap 主題中使用到了這些圖標。
其實如果可以熟練使用bootstrap了,也可以不用下載,直接使用bootstrap爲自己搭建的CDN家屬服務就好。
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- 可選的Bootstrap主題文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
下面我們使用bootstrap CDN服務嘗試實現hello world的實例看看:
<!DOCTYPE html>
<html>
<head>
<title>bootstrap實例</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
全局CSS樣式
詳細內容見:bootstrap3官方文檔-全局CSS樣式
概覽:
HTML5文檔類型
移動設備優先
排版和鏈接
Normalize.css
佈局容器