快捷導(dǎo)航

Bootstrap入門書籍之（零）Bootstrap簡(jiǎn)介

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

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

什么是Bootstrap？

Bootstrap是一個(gè)用于快速開發(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）移動(dòng)設(shè)備優(yōu)先；

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

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

（4）卓越的兼容性；

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

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

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

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

Bootstrap下載

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

如果您恰好看了我寫的sublime Text的博客的話，肯定知道我們是可以直接通過插件進(jìn)行安裝的。只需要在 ctrl + shift + P 時(shí),輸入 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)該可以看到主要包括三個(gè)文件夾 css ， fonts 和 js ，如下：

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

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

在實(shí)際情況中，如果你還想使用更多的圖標(biāo)，還可以在 Iconfont-阿里巴巴矢量圖標(biāo)庫(kù) ，自行查找設(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">
<!-- 初始化移動(dòng)瀏覽顯示 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)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">
<!-- 以下兩個(gè)插件用于在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庫(kù)，且必須在bootstrap庫(kù)之前 -->
<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ǔ)代碼庫(kù)，他并沒有一味的重置樣式，而是注重各瀏覽器基礎(chǔ)表現(xiàn)，降低開發(fā)難度。

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

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

移除body的margin聲明

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

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

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

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

Bootstrap的世界吧！

您可能感興趣的文章: