DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 第一章之初識Bootstrap
第一章之初識Bootstrap
編輯:關於JavaScript     

學習要點:

1.Bootstrap 概述

2.Bootstrap 特點

3.Bootstrap 結構

4.創建第一個頁面

5.學習的各項准備

本節課我們主要了解一下 Boostrap 歷史、特點、用途,以及為什麼選擇 Boostrap 來開發我們的 Web 項目。

一.Bootstrap 概述

Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發的一個基於HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優美,可用於快速、簡單地構建基於 PC 及移動端設備的 Web 頁面需求。

2010 年 6 月,Twitter 內部的工程師為了解決前端開發任務中的協作統一問題。經歷各種方案後,Bootstrap 最終被確定下來,並於 2011 年 8 月發布。經過很長時間的迭代升級,由最初的 CSS 驅動項目發展成為內置很多 JavaScript 插件和圖標的多功能 Web 前端的開源框架。

Bootstrap 最為重要的部分就是它的響應式布局,通過這種布局可以兼容 PC 端、PAD以及手機移動端的頁面訪問。

Bootstrap 下載及演示:

國內文檔翻譯官網:http://www.bootcss.com

瓢城 Web 俱樂部官網:http://www.ycku.com

二.Bootstrap 特點

Bootstrap 非常流行,得益於它非常實用的功能和特點。主要核心功能特點如下:

(1).跨設備、跨浏覽器

可以兼容所有現代浏覽器,包括比較诟病的 IE7、8。當然,本課程不再考慮 IE9 以下浏覽器。

(2).響應式布局

不但可以支持 PC 端的各種分辨率的顯示,還支持移動端 PAD、手機等屏幕的響應式切換顯示。

(3).提供的全面的組件

Bootstrap 提供了實用性很強的組件,包括:導航、標簽、工具條、按鈕等一系列組件,方便開發者調用。

(4).內置 jQuery 插件

Bootstrap 提供了很多實用性的 jquery 插件,這些插件方便開發者實現 Web 中各種常規特效。

(5).支持 HTML5、CSS3

HTML5 語義化標簽和 CSS3 屬性,都得到很好的支持。

(6).支持 LESS 動態樣式

LESS 使用變量、嵌套、操作混合編碼,編寫更快、更靈活的 CSS。它和 Bootstrap 能很好的配合開發。

三.Bootstrap 結構

首先,想要了解 Boostrap 的文檔結構,需要在官網先把它下載到本地。Bootstrap下載地址如下:

Bootstrap 下載地址:http://v3.bootcss.com/ (選擇生產環境即可,v3.3.4)

  解壓後,目錄呈現這樣的結構:

      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

主要分為三大核心目錄:css(樣式)、js(腳本)、fonts(字體)。

1.css 目錄中有四個 css 後綴的文件,其中包含 min 字樣的,是壓縮版本,一般使用這個;不包含的屬於沒有壓縮的,可以學習了解 css 代碼的文件;而 map 後綴的文件則是css 源碼映射表,在一些特定的浏覽器工具中使用。

2.js 目錄包含兩個文件,是未壓縮和壓縮的 js 文件。

3.fonts 目錄包含了不同後綴的字體文件。

四.創建第一個頁面

我們創建一個 HTML5 的頁面,並且將 Bootstrap 的核心文件引入,然後測試是否正常顯示。

//第一個 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 介紹</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-info">Bootstrap</button>
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html> 

五.學習的各項准備

1.開發工具, 我們使用Sublime Text3作為Bootstrap的開發工具, 並且安裝了Emmet代碼生成插件;

2.測試工具,除了常規的現代浏覽器,其次就是作為移動端的測試工具,我們這裡采用的是 Opera Mobile Emulator,和 Chrome 的移動 Web 測試工具。

3.所需基礎,至少有 HTML5 第一季課程的基礎,Bootstrap 內置了很多 jQuery 插件,雖然使用起來比 jQuery 或 JS 本身要簡單的多,但如果有 jQuery 和 JS 課程的基礎,那學習理解力就更加深入;

4.課程分辨率:基礎課程,我們使用 1024 x 768 來錄制,但某些特殊部分,比如響應式和項目課程,需要大分辨率錄制,會采用 1440 x 900 來錄制。

以上所述是小編給大家介紹的Bootstrap框架的相關知識,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved