Bootstrap入門書籍之（零）Bootstrap簡介

更新時間：2016年02月17日 14:32:23 投稿：mrr

Bootstrap是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家介紹Bootstrap入門書籍之（零）Bootstrap簡介，需要的朋友參考下

什么是Bootstrap？

Bootstrap是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。

基于html5、css3的bootstrap，具有下面這些誘人特性：

（1）移動設(shè)備優(yōu)先；

（2）漂亮的設(shè)計；

（3）友好的學(xué)習(xí)曲線；

（4）卓越的兼容性；

（5）響應(yīng)式設(shè)計；

（6）12列響應(yīng)式柵格結(jié)構(gòu)；

（7）樣式向?qū)臋n。

自定義JQuery插件，完整的類庫，基于Less、Sass等

Bootstrap下載

可以在其中文官網(wǎng) 中下載，可以很明顯的看到一個大大的下載按鈕，此外還可以通過CDN，git命令，以及npm等等方式進(jìn)行下載。

如果您恰好看了我寫的sublime Text的博客的話，肯定知道我們是可以直接通過插件進(jìn)行安裝的。只需要在 ctrl + shift + P 時,輸入 fecth:manage ，進(jìn)行如下設(shè)置：

"packages":
{
"Bootstrap": "https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip"
}

之后就可以直接通過sublime Text進(jìn)行下載了，還是剛剛的步驟，但是這一次輸入的是 fetch:package 。找到 Bootstrap ，如果下載成功在您的文件夾中應(yīng)該可以看到主要包括三個文件夾 css ， fonts 和 js ，如下：

可以看到除去字體文件夾外的其他文件夾中每一分文件都有兩個不同的版本，一個完整版的文件，方便查看源碼如： bootstrap.js 和一個用于實際生產(chǎn)情況的壓縮文件如 bottstrap.min.js ；

在字體文件中可以看到有很多文件，但是它的功能很簡單，就是是用來制作 icon圖標(biāo) 的文件，使用了CSS3的@font-face技術(shù)。

在實際情況中，如果你還想使用更多的圖標(biāo)，還可以在 Iconfont-阿里巴巴矢量圖標(biāo)庫，自行查找設(shè)置。

Bootstrap標(biāo)準(zhǔn)模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 在IE運(yùn)行最新的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 初始化移動瀏覽顯示 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 標(biāo)準(zhǔn)模板</title>
<!-- 1. 加載Bootstrap層疊樣式表 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 你自己自定義的樣式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>hello,world</h1>
<!-- 2. 如果要使用Bootstrap的js插件，必須加載jquery庫，且必須在bootstrap庫之前 -->
<script src="js/jquery-min-1.11.3.js"></script>
<!-- 3. 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

全局樣式

Bootstrap框架的核心是輕量的CSS基礎(chǔ)代碼庫，他并沒有一味的重置樣式，而是注重各瀏覽器基礎(chǔ)表現(xiàn)，降低開發(fā)難度。

為了增強(qiáng)跨瀏覽器表現(xiàn)的一致性，Bootstrap使用了Normalize.css。但沒有一味全部使用該重置樣式，而是在此基礎(chǔ)之上進(jìn)行了一些改良，讓其更加符合Bootstrap的設(shè)計思想。

Bootstrap保留和堅持部分瀏覽器的基礎(chǔ)樣式，解決部分潛在的問題，提升一些細(xì)節(jié)的體驗，在排版、鏈接樣式設(shè)置了基本的全局樣式。具體說明如下：

移除body的margin聲明

設(shè)置body的背景色為白色

為排版設(shè)置了基本的字體、字號和行高

設(shè)置全局鏈接顏色，且當(dāng)鏈接處于懸浮 :hover 狀態(tài)時才會顯示下劃線樣式

Bootstrap簡介部分到此就結(jié)束了，在Bootstrap的中文官網(wǎng) 中，有著層次清晰且詳細(xì)的說明文檔，下面就和我一起走進(jìn)

Bootstrap的世界吧！

您可能感興趣的文章: