Bootstrap系列一

安裝和試用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
    佈局容器
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章