課程目錄 :
(內容與授課時間) 授課總時數:
05:41:48
簡 介:
Bootstrap,來自
Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
本教程將向您講解 Bootstrap 框架的基礎,通過學習這些內容,您將可以輕鬆地創建 Web 項目。教程被分為 Bootstrap
基本結構、Bootstrap CSS、Bootstrap 佈局組件和 Bootstrap 插件幾個部分。
Bootstrap是一組用於網站和網路應用程式開發的開源前端(所謂「前端」,指的是展現給終端使用者的介面。與之對應的「後端」是在伺服器上面執行的代碼)框架,包括HTML、CSS及JavaScript的框架,提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件,旨在使動態網頁和Web應用的開發更加容易。
Bootstrap採用模組化設計,並且用LESS樣式表語言來實現各種元件和工具。一個名為bootstrap.less的檔案包括了這些元件和工具,開發者可以修改這個檔案,自行決定專案需要哪些元件。
通過一個基本設定檔可以進行有限的客製,此外也可以進行更加深入的客製。
LESS語言支援變數、函式、運算子、組合選擇器和一個叫做Mixin(混入)的功能。
從Bootstrap
2.0開始,Bootstrap文件包括一個叫做「自訂」的特別選項,開發者可以根據自己的實際需要來選擇包含的元件和效果,然後生成和下載已經編譯好的包。
網格系統和回應式設計以1170像素寬為基準。此外開發者也可以自訂基準。這兩種情況下,Bootstrap都能提供四種變體:手機豎屏、手機橫螢幕和平板電腦、PC低解析度、高解析度,每個變體都會自動調整網格寬度。
CSS
Bootstrap對一系列HTML元件的基本樣式進行了定義,並且為文字、表格和表單元素設計了一套獨特的、現代化的樣式。
可重用元件
除了基本HTML元素,Bootstrap還包括了其他常用的介面元素,例如帶有進階功能的按鈕(例如按鈕組合、帶有下拉式選單選項的按鈕、導航欄、水平和垂直標籤組、導航、分頁等等)、標籤、進階排版、縮圖、警告資訊、進度條等。
這些元件都使用CSS的類實現。在頁面中需要將其對應到特定的HTML元素上面。
JavaScript元件
通過jQuery,Bootstrap加入了一些JavaScript元件。它們提供了例如對話方塊、工具提示、輪播等功能。此外還增強了一些使用者介面元素的功能,例如輸入框的自動完成。Bootstrap
2.0支援以下JavaScript外掛模組:Modal(模態對話方塊)、Dropdown(下拉式選單)、Scrollspy(捲動監聽)、Tab(分頁)、Tooltip(工具提示)、Popover(浮動提示)、Alert(警告)、Button(按鈕)、Collapse(摺疊)、Carousel(輪播)、Typeahead(輸入提示)、Affix(附加導航)
課程大綱:
第01講 D01-1bootstrap第1講 →時長: 01:11:18
第02講 D01-2Bootstrap第2講 →時長: 00:50:18
第03講 D02-1柵格系統 →時長: 00:56:38
第04講 D02-2表單案例 →時長: 00:47:38
第05講 D03-1Bootstrap組件 →時長: 01:00:05
第06講 D03-2Bootstrap組件 →時長: 00:55:48
課程列表:(同大網列表)
|