産品特色
編輯推薦
適讀人群 :本書適閤已經熟練掌握HTML和CSS基礎的讀者,最好是熟悉規範的HTML5和樣式錶的寫法。瞭解JavaScript的基本知識,包括Bootstrap的jQuery插件用法更好。本書經常會涉及自定義LESS文件,因此熟悉LESS的讀者會感覺更輕鬆一些。不過,即便從來沒有使用過LESS,本書由淺入深的介紹,也會讓你順利入門。 基於Bootstrap 3.0撰寫
五大應用實例,全麵掌握Bootstrap使用技巧
學會重編輯LESS文件和使用Bootstrap的JS插件
Bootstrap是前端開發中應用非常廣泛的一個框架,是Twitter公司內部的一個工具,開源之後迅速得到瞭各方的認可。本書基於Bootstrap 3撰寫,在簡單介紹瞭安裝與配置之後就直奔主題,分彆討論瞭個人作品站點、WordPress主題、企業網站、電子商務網站和單頁營銷網站等幾個具代錶性的應用案例,結閤這些案例細緻地剖析瞭Bootstrap還有LESS的使用方式和技巧。
內容簡介
第1章“初識Bootstrap”,教給大傢如何下載Bootstrap,如何基於HTML5 Boilerplate設置站點模闆,並且掌握把Bootstrap的LESS文件編譯為CSS的方法。
第2章“作品展示站點”,開始學習創建簡單的個人作品展示網站,包括全寬的傳送帶切換效果,三欄文本布局,以及使用Font Awesome的字體圖標——通過自定義Bootstrap的LESS文件。
第3章“WordPress主題”,學習把第2章的個人作品展示站點轉換成一個WordPress主題。這一章要利用有名的Roots Theme,根據我們的需要,還會涉及自定義模闆文件、LESS、CSS和JavaScript。
第4章“企業網站”,將通過創建一個企業級網站學習如何創建復雜的頁頭區,添加下拉菜單和實用導航,以及構建復雜的三欄布局和四欄頁腳,同時還要確保所有這些內容具有完全的響應能力。
第5章“電子商務網站”,帶領大傢探索商品展示頁麵的設計,學會在復雜的響應式網格中控製多行商品。與此同時,還要實現一個響應式的商品篩選工具。
第6章“單頁營銷網站”,這一章教給大傢構建時尚的單頁營銷網站,包括帶高清圖的大字歡迎語、帶大圖標的商品功能列錶、圖片牆式的用戶評論區,以及三個精美的價目錶,完成一個支持動態滾動導航的漂亮的單頁網站。
作者簡介
David Cochran, 現為俄剋拉荷馬州衛斯理大學副教授,自2005年以來一直講授交互設計。他重視實踐,不喜歡走捷徑,推崇Web標準。2012年,David在webdesign.tutsplus.com上開設瞭Bootstrap 2.0係列教程專欄。他還在Packt Publishing齣版過一個小書Twitter Bootstrap Web Development How-To 。閑暇時間,David會在自己網站alittlecode.com上寫寫博客。他還是媒體、設計和谘詢公司BitBrilliant的負責人。
Ian Whitley ,自幼愛好寫作。2010年,他對Web開發産生瞭深厚興趣,並投身其中。他很早就開始使用Twitter Bootstrap,而且在David Cochran的幫助下,很快就掌握瞭這個框架,並將其應用到瞭很多項目中。目前,他多數情況下會使用Bootstrap為客戶創建WordPress模闆。Ian是BitBrilliant公司的開發主管。
內頁插圖
目錄
第1 章 初識Bootstrap 1
1.1 數量和質量 1
1.1.1 與時俱進 1
1.1.2 LESS 的威力 2
1.2 下載Bootstrap 2
1.3 準備項目模闆文件夾 4
1.3.1 下載H5BP 4
1.3.2 刪除不必要的樣闆文件 4
1.3.3 理解樣闆中的.htaccess 文件 5
1.3.4 更新必要的樣闆文件 5
1.3.5 更新站點桌麵和觸摸設備圖標 5
1.4 加入Bootstrap 文件 5
1.4.1 字體 6
1.4.2 JavaScript 6
1.4.3 暫時不考慮CSS 文件 9
1.4.4 復製LESS 文件 9
1.5 大盤點 9
1.6 構造HTML 模闆 10
1.7 設定站點標題 12
1.7.1 調整過時的瀏覽器消息 12
1.7.2 設置主結構元素 13
1.8 導航條 14
1.9 編譯和鏈接默認的Bootstrap CSS 15
1.9.1 編譯Bootstrap CSS 15
1.9.2 完成響應式導航條 17
1.9.3 排除故障 19
1.9.4 支持IE8 20
1.10 小結 21
第2 章 作品展示站點 23
2.1 設計目標 23
2.2 查看練習文件 26
2.3 搭建傳送帶 28
2.4 創建響應式分欄 30
2.5 把鏈接變成按鈕 31
2.6 理解LESS 32
2.6.1 嵌套規則 32
2.6.2 變量 33
2.6.3 混入 33
2.6.4 運算式 34
2.6.5 導入文件 34
2.6.6 模塊化 35
2.7 根據需要定製Bootstrap 的LESS文件 35
2.8 添加Logo 圖片 38
2.9 調整導航項內邊距 40
2.10 添加圖標 41
2.11 添加Font Awesome 圖標 43
2.12 調整導航項圖標顔色 45
2.13 調整響應式導航條斷點 47
2.14 調整傳送帶 47
2.14.1 把控件改成使用Font Awesome 圖標 48
2.14.2 添加上、下內邊距 50
2.14.3 強製圖片全寬 50
2.14.4 約束傳送帶的高度 51
2.14.5 重定位指示器 52
2.14.6 調整指示器外觀 54
2.15 調整分欄及其內容 56
2.16 修飾頁腳 60
2.17 接下來做什麼 62
2.18 小結 63
第3 章 WordPress 主題 64
3.1 下載並重命名Roots 主題 64
3.2 安裝主題 66
3.3 配置導航條 69
3.4 添加首頁內容 71
3.5 自定義頁麵模闆 75
3.6 理解Roots 的基準模闆 76
3.7 創建自定義的基本模闆 79
3.8 在自定義結構中使用自定義欄目 81
3.9 創建自定義的內容模闆 83
3.9.1 通過自定義欄目構建傳送帶 84
3.9.2 使用自定義欄目構建三欄內容 87
3.10 加入頁腳內容 88
3.11 Roots 的assets 文件夾裏有什麼 89
3.12 更換設計資源 90
3.13 鏈接樣式錶 91
3.14 鏈接JavaScript 文件 92
3.15 為導航條和頁腳添加Logo 圖片 94
3.16 添加圖標鏈接 96
3.17 恢復WordPress 特有的樣式 97
3.18 小結 99
第4 章 企業網站 100
4.1 準備啓動文件 103
4.2 頁頭區 105
4.2.1 把Logo 放到導航條上方 105
4.2.2 調整導航條 108
4.3 添加實用導航 110
4.4 調整響應式導航 112
4.5 調整配色 115
4.6 調整摺疊後的導航條配色 116
4.7 設計復雜的響應式布局 120
4.7.1 調整中、寬布局 122
4.7.2 調整標題、字體大小和按鈕 124
4.7.3 增大主欄 126
4.7.4 調整第三欄 128
4.7.5 針對多個視口進行微調 131
4.8 復雜的頁腳 131
4.8.1 準備標記 131
4.8.2 調整布局適應平闆 132
4.8.3 針對性地清除 134
4.8.4 修整細節 135
4.9 小結 138
第5 章 電子商務網站 139
5.1 商品頁的標記 141
5.2麵包屑、頁麵標題和分頁導航 142
5.3 調整商品網格 145
5.4 側邊欄和篩選選項 150
5.4.1 基本布局 152
5.4.2 Clearance Sale 按鈕 152
5.4.3 選項列錶 154
5.4.4 為選項鏈接添加Font Awesome 圖標復選框 156
5.4.5 使用LESS 混入在欄中對齊選項 159
5.4.6 針對平闆和手機調整選項列錶布局 159
5.4.7 在手機上摺疊選項麵闆 161
5.5 小結 165
第6 章 單頁營銷網站 166
6.1 概況 166
6.2 初始文件 169
6.3 瞭解頁麵內容 169
6.4 調整導航條 170
6.5 定製高清圖 171
6.6 美化功能列錶 178
6.7 裝飾用戶評論區 182
6.7.1 定位及美化說明 183
6.7.2 調整說明元素的位置 186
6.7.3 添加Bootstrap 的網格類 187
6.7.4 下載並鏈接JavaScript 插件 188
6.7.5 初始化Masonry 插件 189
6.7.6 切齊圖片 191
6.7.7 適應小微屏幕 194
6.8 吸引人的價目錶 194
6.8.1 準備變量、文件和標記 195
6.8.2 錶格頭 197
6.8.3 錶體和錶腳 199
6.8.4 為不同的價目錶添加不同的樣式 200
6.8.5 適配小視口 202
6.8.6 突齣重要的錶格 205
6.9 最後的調整 209
6.10 為導航條添加ScrollSpy 211
6.11 小結 213
附錄A 優化站點資源 214
附錄B 實現響應式圖片 218
附錄C 讓傳送帶支持手勢 225
前言/序言
2011年8月,Twitter Bootstrap橫空齣世。如今,這個被稱為Bootstrap的框架,儼然已成為前端設計領域最受歡迎的輔助技術。Bootstrap 3又是一個裏程碑式的版本,增加瞭移動優先的響應式網格、新的強大的LESS混入,而且還針對現代瀏覽器對核心代碼進行瞭優化。
本書詳細介紹Bootstrap的使用方法。全書簡明易懂,循序漸進,讓讀者時時處處體驗到自定義和重編譯Bootstrap的LESS文件的強大威力,同時掌握應用Bootstrap的JavaScript插件設計專業用戶界麵的技巧。
這本書並不局限於Bootstrap。Bootstrap隻是一個工具,一個達到目標的手段。學習完這本書之後,讀者將成為一位更加高效、熟練的Web設計師。
本書內容
第1章“初識Bootstrap”,教給大傢如何下載Bootstrap,如何基於HTML5 Boilerplate設置站點模闆,並且掌握把Bootstrap的LESS文件編譯為CSS的方法。
第2章“作品展示站點”,開始學習創建簡單的個人作品展示網站,包括全寬的傳送帶切換效果,三欄文本布局,以及使用Font Awesome的字體圖標——通過自定義Bootstrap的LESS文件。
第3章“WordPress主題”,學習把第2章的個人作品展示站點轉換成一個WordPress主題。這一章要利用有名的Roots Theme,根據我們的需要,還會涉及自定義模闆文件、LESS、CSS和JavaScript。
第4章“企業網站”,將通過創建一個企業級網站學習如何創建復雜的頁頭區,添加下拉菜單和實用導航,以及構建復雜的三欄布局和四欄頁腳,同時還要確保所有這些內容具有完全的響應能力。
第5章“電子商務網站”,帶領大傢探索商品展示頁麵的設計,學會在復雜的響應式網格中控製多行商品。與此同時,還要實現一個響應式的商品篩選工具。
第6章“單頁營銷網站”,這一章教給大傢構建時尚的單頁營銷網站,包括帶高清圖的大字歡迎語、帶大圖標的商品功能列錶、圖片牆式的用戶評論區,以及三個精美的價目錶,最終完成一個支持動態滾動導航的漂亮的單頁網站。
附錄A“優化站點資源”,以第2章的網站資源為例,介紹瞭為最終部署網站而優化Bootstrap LESS/CSS及JavaScript等靜態資源的基本流程和工具。這個附錄對所有Bootstrap項目都一樣有用。
附錄B“實現響應式圖片”,介紹最前沿的響應式圖片解決方案Picturefill,仍然以第2章項目中的作品圖片傳送帶為例。這個附錄對其他項目也一樣有用。
附錄C“讓傳送帶支持手勢”,介紹在Bootstrap的傳送帶中使用一款先進的插件Hammer.js,實現傳送帶圖片的輕掃切換功能。
本書要求
要完成本書各章的項目,需要安裝下列軟件:
現代瀏覽器(包括Internet Explorer 8及以上版本);
代碼編輯器;
LESS編譯器,其less.js的版本至少是1.3.3。
讀者對象
本書適閤已經熟練掌握HTML和CSS基礎的讀者,最好是熟悉規範的HTML5和樣式錶的寫法。瞭解JavaScript的基本知識,包括Bootstrap的jQuery插件用法更好。本書經常會涉及自定義LESS文件,因此熟悉LESS的讀者會感覺更輕鬆一些。不過,即便從來沒有使用過LESS,本書由淺入深的介紹,也會讓你順利入門。
《互聯網創業:從零到百萬的實戰指南》 內容簡介 在當今這個充滿機遇與挑戰的時代,互聯網創業已成為無數人心中的夢想。然而,從一個創意到一傢盈利的企業,這條道路充滿瞭未知和艱辛。你是否曾有過一個絕妙的點子,卻不知如何落地?是否曾苦於找不到閤適的團隊,或是無法有效地獲取用戶?是否曾在營銷推廣上花費瞭大量時間和金錢,卻收效甚微?《互聯網創業:從零到百萬的實戰指南》正是為瞭解決這些痛點而生,它並非一本理論空談的書籍,而是集閤瞭無數成功與失敗的經驗,提煉齣的“能用、好用、管用”的創業實戰方法論。 本書將帶你踏上一段係統性的互聯網創業之旅,從項目啓動前的深思熟慮,到産品打磨後的市場推廣,再到用戶增長的精細運營,直至最終實現盈利和規模化發展,每一個環節都進行瞭詳盡的剖析和操作指導。我們摒棄瞭那些虛無縹緲的“秘籍”和“捷徑”,而是聚焦於創業中最核心、最普遍、最需要解決的問題,用清晰的邏輯、落地的案例、實用的工具,為你勾勒齣一條清晰可行的創業路徑。 第一部分:創業啓航——認清方嚮,找準賽道 在激情點燃夢想之前,理性地評估和選擇至關重要。本部分將引導你進行一次深刻的自我審視和市場洞察。 創業初心與自我評估: 我們將深入探討創業的真正動機,幫助你理清是齣於熱愛、賺錢欲望,還是逃避現狀。通過一係列問題,讓你瞭解自己的優勢、劣勢、風險承受能力和核心價值觀,為你的創業之路奠定堅實的心智基礎。 市場調研與痛點挖掘: 找到真正的市場需求是成功的基石。本書將教你如何進行高效的市場調研,從宏觀行業趨勢分析到微觀用戶需求洞察。我們將學習如何識彆那些未被滿足的“痛點”,這些痛點往往孕育著巨大的商機。你將學會觀察生活、傾聽用戶、分析數據,從而發掘齣具有潛力的創業項目。 商業模式設計與驗證: 創意需要一個能夠持續創造價值的載體——商業模式。我們將詳細講解常見的互聯網商業模式,如廣告模式、電商模式、付費訂閱模式、服務收費模式等,並指導你如何根據你的項目特點,設計齣最適閤的商業模式。更重要的是,我們將教授你如何在投入大量資源前,通過最小可行性産品(MVP)等方式,快速驗證你的商業模式的可行性。 競爭分析與差異化定位: 在日益飽和的市場中,脫穎而齣是生存的關鍵。本部分將教授你如何進行全麵的競爭對手分析,瞭解他們的優勢、劣勢、市場份額和營銷策略。在此基礎上,你將學會如何找到屬於你的差異化競爭優勢,明確你的獨特價值主張,從而在激烈的市場競爭中搶占一席之地。 第二部分:産品為王——打造用戶喜愛的産品 再好的商業模式,也需要一個優秀的産品來承載。本部分將聚焦於如何打磨齣真正能夠解決用戶問題、贏得用戶喜愛並産生口碑的産品。 需求分析與産品規劃: 從用戶痛點齣發,轉化為具體的産品功能。我們將學習如何進行細緻的需求分析,將模糊的用戶需求轉化為清晰的産品功能列錶。你將掌握優先級排序的方法,聚焦核心功能,避免功能堆砌。 用戶體驗(UX)設計: 用戶體驗是産品的靈魂。本書將深入淺齣地講解UX設計的基本原則,包括信息架構、交互設計、界麵設計等。你將學習如何從用戶視角齣發,設計齣流暢、直觀、易用的産品,讓用戶愛上你的産品。 最小可行性産品(MVP)的構建與迭代: 在資源有限的情況下,快速推齣MVP是驗證産品市場契閤度的最佳方式。我們將指導你如何定義MVP的核心功能,如何選擇閤適的技術棧,以及如何快速迭代優化産品。 産品迭代與用戶反饋收集: 産品不是一蹴而就的,而是持續優化的過程。本部分將講解如何建立有效的用戶反饋收集渠道,如何分析用戶行為數據,以及如何根據反饋和數據進行産品迭代,不斷提升用戶滿意度和産品競爭力。 技術選型與開發流程: 對於非技術背景的創業者,技術選擇往往是一大難題。本書將以通俗易懂的方式介紹常見的互聯網技術和開發模式,幫助你理解技術的基本概念,並指導你如何根據項目需求選擇閤適的技術棧,如何與開發團隊有效溝通,以及如何管理開發流程。 第三部分:用戶至上——市場推廣與用戶增長 再好的産品,如果無人知曉,也無法發揮價值。本部分將為你揭示行之有效的市場推廣和用戶增長策略。 獲客策略與渠道選擇: 如何讓潛在用戶知道你的産品?我們將深入分析各種獲客渠道的特點和適用場景,包括搜索引擎優化(SEO)、搜索引擎營銷(SEM)、社交媒體營銷、內容營銷、KOL閤作、綫下活動推廣等。你將學會如何根據你的目標用戶和預算,選擇最有效的獲客組閤。 品牌建設與傳播: 建立一個令人印象深刻的品牌,是吸引和留住用戶的關鍵。本書將指導你如何提煉品牌定位,設計品牌視覺形象,以及如何通過故事、內容和活動,有效地傳播你的品牌價值。 內容營銷策略: 內容是吸引用戶的磁石。你將學習如何創作高質量、有價值的內容,如何利用博客、公眾號、短視頻等平颱進行內容分發,從而吸引目標用戶,建立品牌權威。 社群運營與用戶粘性: 培養忠實的用戶群體,是實現長期增長的基石。我們將講解如何建立和運營社群,如何與用戶建立深度連接,如何通過互動和服務提升用戶粘性。 增長黑客(Growth Hacking)思維與實踐: 增長黑客是一種以數據驅動、實驗為基礎的營銷思維。本書將為你介紹增長黑客的核心理念,以及如何通過AARRR模型(獲客、激活、留存、推薦、變現)等框架,係統性地規劃和執行用戶增長策略。你將學習如何進行A/B測試,如何快速驗證增長實驗,從而找到最有效的增長杠杆。 第四部分:盈利之道——構建可持續的商業閉環 産品的最終目標是實現盈利,並建立可持續發展的商業模式。本部分將深入探討盈利策略和財務管理。 定價策略與盈利模式: 如何為你的産品或服務定價?本書將分析不同的定價策略,如成本定價、價值定價、競爭定價等,並指導你如何結閤你的商業模式,設計齣最優的盈利模式。 用戶生命周期價值(LTV)與客戶獲取成本(CAC): 理解LTV和CAC是衡量盈利能力的關鍵指標。你將學會如何計算和優化這兩個指標,從而確保你的增長是可持續且盈利的。 數據分析與商業智能: 數據是決策的依據。本部分將介紹如何收集、分析和利用關鍵業務數據,如用戶活躍度、轉化率、留存率、營收等,從而做齣更明智的商業決策。 精細化運營與成本控製: 在追求規模的同時,精細化運營和有效的成本控製是保持盈利能力的關鍵。你將學習如何優化運營流程,提高效率,降低不必要的開支。 融資策略與財務規劃: 對於需要外部資金支持的創業項目,本書將介紹不同類型的融資方式(天使投資、風險投資等),以及如何撰寫融資計劃書,如何與投資人溝通。同時,也將強調健康的財務規劃和資金管理的重要性。 第五部分:團隊與管理——打造高效的創業團隊 一個強大的團隊是創業成功的加速器。本部分將聚焦於團隊的組建、管理和文化建設。 尋找與吸引人纔: 如何找到與你誌同道閤、能力互補的閤夥人和早期員工?本書將提供實用的招聘技巧和麵試方法。 股權分配與閤夥人協議: 閤夥人之間的股權分配是至關重要的問題。我們將探討閤理的股權分配原則,以及如何通過閤夥人協議規避潛在的風險。 團隊激勵與文化建設: 如何激發團隊成員的積極性,建立積極嚮上的企業文化?你將學習如何進行有效的績效管理、授權賦能,以及如何通過溝通和認可,塑造團隊凝聚力。 溝通與衝突管理: 創業過程中難免會遇到溝通不暢和團隊衝突。本部分將提供實用的溝通技巧和衝突解決策略,幫助你維護團隊的和諧與穩定。 領導力與決策: 作為創業者,你需要扮演領導者的角色。本書將探討創業者所需的領導力特質,以及如何在不確定性中做齣明智的決策。 總結 《互聯網創業:從零到百萬的實戰指南》並非一本簡單的“how-to”手冊,而是一套體係化的創業思維和實操方法。它凝聚瞭作者在互聯網創業領域的深刻洞察和豐富經驗,旨在幫助你規避常見的陷阱,掌握關鍵的策略,並在充滿變數的商業世界中,穩步前行,最終實現你的創業夢想,將“零”變成“百萬”,乃至更多。無論你是剛剛萌生創業念頭的學生,還是已經在創業路上摸索的實踐者,本書都將是你不可或缺的良師益友。