發表於2024-11-22
Bootstrap 是2011 年8 月Tiwtter 推齣的開源前端框架,現在Bootstrap 已經成為流行的前端UI 框架,本書著力於Bootstrap 的內核開發原理,通過大量案例和講解代碼的方式,讓讀者能感受Bootstrap 的LESS 文件應用於自定義樣式的強大威力,以及掌握用Bootstrap 的JavaScript 插件設計專業的用戶交互。案例由淺入深,既各自獨立,又環環相扣,豐富的代碼加上細緻的講解,讓讀者極易上手。
第1 章 認識Bootstrap
1.1 為什麼要學習Bootstrap
1.2 Bootstrap 為何如此流行
1.2.1 功能強大和樣式美觀的強強聯閤
1.2.2 高度可定製性
1.2.3 豐富的生態圈
1.2.4 布局兼容性良好
1.3 Bootstrap 的版本發展
1.3.1 Bootstrap 1
1.3.2 Bootstrap 2
1.3.3 Bootstrap 3
1.3.4 Bootstrap 4
本章總結
本章作業
第2 章 Bootstrap 框架基礎
2.1 引入Bootstrap
2.1.1 在自己的項目中引入Bootstrap ?
2.1.2 添加Bootstrap 的class 實現基本樣式
2.2 Bootstrap 的通用組件調用
2.3 添加JavaScript 動態效果
本章總結
本章作業
第3 章 Bootstrap 柵格係統
3.1 固定布局的概念
3.2 固定布局的柵格係統
3.3 流式布局的柵格係統
3.4 響應式布局的柵格係統
本章總結
本章作業
Bootstrap 響應式網站開發實戰
第4 章 Bootstrap 的基本樣式
4.1 字體版式
4.1.1 標題
4.1.2 全局設置
4.2 錶格
4.3 按鈕
4.4 錶單
4.5 圖片
本章總結
本章作業
第5 章 使用Bootstrap 的組件
5.1 下拉菜單
5.2 按鈕組
5.3 input 控件組
5.4 導航
5.5 頭部導航
5.6 列錶組
5.7 分頁
5.8 標簽與徽章
5.9 縮略圖
5.10 麵闆
5.11 進度條
5.12 多媒體對象
本章總結
本章作業
第6 章 LESS 和SASS
6.1 為什麼要用CSS 預處理程序
6.1.1 CSS 不能設置變量
6.1.2 冗餘重復的代碼
6.1.3 無法實現計算功能
6.1.4 命名空間與作用域
6.1.5 CSS 缺陷總結
6.2 LESS 的應用
6.2.1 LESS 介紹
6.2.2 LESS 使用基礎
6.2.3 使用變量
6.2.4 使用混閤
6.2.5 嵌套規則
?VII?
6.2.6 函數和運算
6.2.7 LESS 語言總結
6.3 SASS 的應用
6.3.1 SASS 介紹
6.3.2 SASS 安裝和使用
6.3.3 使用變量
6.3.4 計算
6.3.5 嵌套
6.3.6 代碼重用
6.3.7 高級用法
6.3.8 SASS 總結
6.4 使用SASS 的擴展庫Compass
6.4.1 Reset 模塊
6.4.2 CSS3 模塊
6.4.3 Utilities 模塊
6.4.4 Helpers 函數
6.4.5 Compass 總結
本章總結
第7 章 使用Bootstrap 插件
7.1 概述
7.2 過渡插件
7.3 模態對話框
7.3.1 用法
7.3.2 對話框結構
7.4 標簽頁切換
7.4.1 標簽頁用法
7.4.2 用jQuery 實現標簽頁切換
7.5 工具提示條
7.5.1 用法
7.5.2 用js 使標簽頁生效
7.6 彈齣框
7.6.1 用法
7.6.2 用js 使彈齣框生效
7.7 提示信息
7.7.1 用法
7.7.2 選項
7.8 按鈕
7.8.1 按鈕的Loading 狀態
?VIII?
Bootstrap 響應式網站開發實戰
7.8.2 按鈕組的狀態設置
7.9 摺疊
7.9.1 用法
7.9.2 選項
7.10 幻燈片
7.10.1 用法
7.10.2 選項
本章總結
本章作業
第8 章 定製及優化Bootstrap
8.1 在官方網站進行Bootstrap 定製
8.2 修改源代碼定製Bootstrap
8.3 其他Bootstrap 資源
本章總結
本章作業
第9 章 開發響應式企業網站
9.1 布局企業站首頁
9.1.1 準備SASS
9.1.2 構建頁麵框架
9.2 設計首頁
9.2.1 設計index 頁麵導航
9.2.2 設計安全展示區
9.2.3 添加搜索欄
9.2.4 主體內容區塊
9.2.5 添加另一主體內容區塊
9.2.6 添加一個兩欄圖文區塊
9.2.7 添加另一個兩欄圖文區塊
9.2.8 添加footer 區塊
9.2.9 添加頁麵樣式
9.3 設計about.html 頁麵
9.3.1 保留頁麵通用部分,添加about.html 頁麵區塊
9.3.2 添加頁麵主體區塊
9.3.3 添加團隊展示區塊
9.3.4 添加另一標題區塊
9.3.5 為about.html 頁麵添加樣式 ????
9.4 設計services.html 頁麵
9.4.1 保留頁麵通用部分,修改主體頁麵區塊
9.4.2 添加what we do 區塊
?IX?
9.4.3 添加scss 樣式
9.5 設計blog.html 頁麵
9.5.1 保留頁麵通用部分,修改主體頁麵區塊
9.5.2 添加blog.html 樣式
9.6 設計contact.html 頁麵
9.6.1 保留頁麵通用部分,添加公司地址
9.6.2 添加用戶錶單
9.7 用媒體查詢進行移動端優化設計
本章總結
本章作業
第10 章 網站後颱管理係統
10.1 項目開始
10.2 頁麵布局
10.2.1 引入Bootstrap 3 框架
10.2.2 編寫布局代碼
10.3 實現導航欄
10.3.1 構建導航的框架代碼
10.3.2 填寫標題和導航鏈接
10.3.3 添加管理員和退齣係統按鈕 ?
10.3.4 添加管理員登錄信息
10.3.5 為導航添加圖標並設置響應式導航
10.4 實現左側邊欄
10.5 實現主功能部分
10.5.1 主功能的頭部
10.5.2 內容管理的文章列錶
本章總結
本章作業
第11 章 使用Bootstrap 實現電商網站
11.1 設計電商首頁index.html
11.1.1 搭建Bootstrap 框架
11.1.2 為商城創建導航菜單
11.1.3 嚮導航添加和導航鏈接 ??
11.1.4 為頁麵添加Banner
11.1.5 添加産品
11.1.6 為網站添加底部Footer
11.1.7 添加産品列錶及産品介紹
11.2 設計購買頁麵buy.html
11.3 設計列錶頁category.html
?X?
Bootstrap 響應式網站開發實戰
11.4 設計産品詳情頁product.html
本章總結
本章作業
第12 章 Bootstrap 內核解碼
12.1 Bootstrap 設計思想
12.1.1 12 列柵格係統
12.1.2 樣式類型化
12.1.3 代碼鬆散與耦閤的處理
12.1.4 繼承可擴展性
12.2 Bootstrap 框架解析
12.2.1 源碼結構
12.2.2 類定義
12.2.3 插件定義
12.2.4 命名衝突的解決
12.2.5 數據接口
12.3 定義jQuery 插件
12.3.1 jQuery 插件形式
12.3.2 jQuery 插件規範
12.3.3 jQuery 插件封裝
本章總結
本章作業
1.1 為什麼要學習Bootstrap
隨著移動設備的普及,如何讓用戶通過移動設備瀏覽網站時獲得良好的視覺效果,已經是一個不可迴避的問題。響應式Web 設計就是實現這個功能的有效方法。在這樣的大趨勢下,Bootstrap 應運而生。Bootstrap 是現在最流行的響應式UI 框架,它以移動設備優先,能夠快速適應不同設備,如圖1.1 所示,使用它編寫響應式頁麵快捷、方便,解決瞭瀏覽器的兼容性問題。使用Bootstrap 後,很多開發者都會覺得自己再也不想迴到使用原始的CSS 編寫網頁的日子。圖1.1 響應式Web 適應不同設備Bootstrap 是Twitter 公司(www.twitter.com)於2011 年8 月開源的整體式前端框架,目的是幫助設計師和Web 前端開發人員快速有效地創建結構簡單、性能優良、頁麵精緻的Web 應用程序。經過短短幾個月的時間就紅遍全球,大量Bootstrap 風格的網站齣現在互聯網的信息浪潮之中,而應用更為廣泛的是它的後颱管理界麵。筆者近兩年接觸的所有互
聯網項目的後颱均采用瞭Bootstrap 進行構建。
近年來,移動互聯網、大數據、雲計算、物聯網、虛擬現實、機器人、無人駕駛、智能製造等新興産業發展迅速,但國內人纔培養卻相對滯後,存在“基礎人纔多、骨乾人纔缺、戰略人纔稀,人纔結構不均衡”的突齣問題,這嚴重製約著我國戰略新興産業的快速發展。同時,“重使用、輕培養”的人纔觀依然存在,可持續性培養機製缺乏。因此,建立戰略新興産業人纔培養體係,形成可持續發展的人纔生態環境刻不容緩。
中關村作為我國高科技産業中心、戰略新興産業的策源地、創新創業的高地,對全國的戰略新興産業、創新創業的發展起著引領和示範作用,基於此,新邁爾(北京)科技有限公司依托中關村優質資源,聚集高新技術企業的技術總監、架構師、資深工程師,共同開發瞭與麵嚮行業緊缺崗位相關的係列叢書,希望能緩解戰略新興産業需要快速發展與行業技術人纔匱乏之間的矛盾,能改變企業需要專業技術人纔與高校畢業生的技術水平不足之間的矛盾。
優秀的職業教育本質上是一種更直接麵嚮企業、服務産業、促進就業的教育,是高等教育體係中與社會發展聯係最密切的部分。而職業教育的核心是“教”“學”“習”的有機融閤、互相驅動,要做好“教”必須要有優質的課程和師資,要做好“學”必須要有先進的教學和學生管理模式,要做好“習”必須要以案例為核心,注重實踐和實習。新邁爾(北京)科技有限公司通過對當前國內高等教育現狀的研究,結閤國內外先進的教育教學理念,形成瞭科學的教育産品設計理念、標準化的産品研發方法、先進的教學模式和係統性的學生管理體係,在我國職業教育正在迅速發展、教學改革日益深入的今天,新邁爾(北京)科技有限公司將不斷沉澱和推廣先進的、行之有效的人纔培養經驗,以推動整個職業教育的改革嚮縱深發展。
通過大量企業調研,目前Web 前端架構與開發方嚮麵臨著人纔供不應求的局麵,很多具備該技能的工程師剛剛入職的起薪就可以達到其他行業平均工資的3~5 倍,本係列教材覆蓋UI 設計、Web 前端開發、PHP 後颱開發等模塊,教學和學習目標是讓學習者能夠獨立開發齣商業網站。
任務導嚮、案例教學和注重實戰經驗傳遞是本係列叢書的顯著特點,這改變瞭先教知識後學應用的傳統學習模式,根治瞭初學者對技術類課程感到枯燥和茫然的學習心態,激發瞭學習者的學習興趣,打造學習的成就感,建立對所學知識和技能的信心,是對傳統學習模式的一次改進。
Web 前端架構與開發係列叢書有以下特點。
? 以就業為導嚮:根據企業崗位需求組織教學內容,就業目的非常明確。
? 以實用技能為核心:以企業實戰技術為核心,確保技能的實用性。
? 以案例為主綫:教材從實例齣發,采用任務驅動教學模式,便於掌握,提升興趣,本質上提高學習效 果。
? 以動手能力為閤格目標:注重培養實踐能力,以是否能夠獨立完成真實項目為檢驗學習效果的標準。
? 以項目經驗為教學目標:以大量真實案例為教與學的主要內容,完成本課程的學習後,相當於在企業完成瞭多個真實的項目。
信息技術的快速發展正在不斷改變人們的生活方式,新邁爾(北京)科技有限公司也希望通過我們全體同仁和您的共同努力,讓您真正掌握實用技術,變成復閤型人纔,能夠實現高薪就業和技術改變命運的夢想,在助您成功的道路上我們一路同行。
新邁爾(北京)科技有限公司
Bootstrap響應式網站開發實戰/Web前端開發係列叢書 下載 mobi pdf epub txt 電子書 格式 2024
Bootstrap響應式網站開發實戰/Web前端開發係列叢書 下載 mobi epub pdf 電子書Bootstrap響應式網站開發實戰/Web前端開發係列叢書 mobi epub pdf txt 電子書 格式下載 2024