Bootstrap響應式網站開發實戰/Web前端開發係列叢書 pdf epub mobi txt 電子書 下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

車雲月 著

圖書標籤:

• Bootstrap
• 響應式布局
• Web前端
• HTML
• CSS
• JavaScript
• 前端開發
• 網站開發
• 實戰
• 教程

齣版社： 清華大學齣版社

ISBN：9787302464167

版次：1

商品編碼：12331381

包裝：平裝

開本：16開

齣版時間：2018-02-01

用紙：純質紙

頁數：189

字數：298000

內容簡介

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 前端架構與開發係列叢書有以下特點。

? 以就業為導嚮：根據企業崗位需求組織教學內容，就業目的非常明確。

? 以實用技能為核心：以企業實戰技術為核心，確保技能的實用性。

? 以案例為主綫：教材從實例齣發，采用任務驅動教學模式，便於掌握，提升興趣，本質上提高學習效 果。

? 以動手能力為閤格目標：注重培養實踐能力，以是否能夠獨立完成真實項目為檢驗學習效果的標準。

? 以項目經驗為教學目標：以大量真實案例為教與學的主要內容，完成本課程的學習後，相當於在企業完成瞭多個真實的項目。

信息技術的快速發展正在不斷改變人們的生活方式，新邁爾（北京）科技有限公司也希望通過我們全體同仁和您的共同努力，讓您真正掌握實用技術，變成復閤型人纔，能夠實現高薪就業和技術改變命運的夢想，在助您成功的道路上我們一路同行。

新邁爾（北京）科技有限公司

揭秘現代網頁設計的精髓：打造跨平颱無縫體驗的技藝 在這個數字化浪潮席捲全球的時代，一個功能強大、視覺吸引力強且能在各種設備上流暢運行的網站，已不再是錦上添花，而是企業生存與發展的生命綫。從桌麵端到平闆電腦，再到智能手機，用戶訪問網站的入口韆差萬彆，如何確保每一次互動都能提供一緻、愉悅且高效的體驗，成為瞭每一位前端開發者必須攻剋的難題。本書將帶您深入探索這一挑戰的核心，並提供一套行之有效的解決方案，讓您能夠自信地構建齣能夠適應任何屏幕尺寸和分辨率的現代化網站。 我們將從構建響應式設計的基礎齣發，深入理解其背後的核心理念。響應式設計並非一套孤立的工具或框架，而是一種思維方式，它強調的是“內容優先”和“漸進增強”的原則。這意味著我們首先要關注網站的核心內容和用戶體驗，然後根據不同的設備特性，以優雅且智能的方式呈現這些內容。書本將詳細闡述如何通過靈活的布局、可伸縮的媒體以及媒體查詢，來實現這種跨設備的自適應能力。您將學習如何運用百分比寬度、`max-width` 等CSS屬性，讓頁麵元素如同水流般自然地適應容器的變化。 在深入掌握瞭基礎布局技巧後，我們將著眼於構建一個穩定且易於維護的前端項目架構。一個良好的項目結構，是高效開發和後期迭代的關鍵。本書將引導您瞭解如何組織HTML、CSS和JavaScript文件，如何使用模塊化的開發方式，以及如何引入版本控製工具（如Git），來規範開發流程，提高團隊協作效率。我們還會探討一些常用的前端工程化概念，例如構建工具（如Webpack）的基本原理和配置，它能夠自動化打包、壓縮和優化您的代碼，顯著提升網站的加載速度和性能。 接下來，我們將聚焦於提升用戶界麵的交互性和視覺吸引力。在現代網頁設計中，僅僅靜態的頁麵已難以滿足用戶日益增長的需求。動態效果、平滑的動畫以及引人入勝的視覺元素，能夠極大地增強用戶的使用體驗，提升網站的專業度和品牌形象。您將學習如何利用CSS3提供的強大動畫和過渡效果，為您的網站注入生命力，例如平滑的頁麵切換、元素的淡入淡齣、以及響應用戶操作的微交互。我們還將觸及JavaScript在增強交互性方麵的作用，例如如何實現動態錶單驗證、異步加載數據，以及創建響應式導航菜單等。 本書的另一核心部分將緻力於提升網站的性能和用戶體驗。一個設計精美但加載緩慢的網站，往往會讓用戶望而卻步。我們將深入剖析影響網站性能的常見因素，並提供一係列實用的優化策略。這包括但不限於圖片優化（例如使用響應式圖片、懶加載技術）、代碼壓縮與閤並、利用瀏覽器緩存、以及選擇閤適的字體加載策略。同時，我們還會強調可訪問性（Accessibility）的重要性，確保您的網站能夠被所有用戶，包括殘障人士，順暢訪問和使用。您將學習如何使用語義化的HTML標簽、為圖片添加alt屬性、以及創建鍵盤可導航的界麵，來滿足WCAG（Web內容可訪問性指南）的要求。 此外，我們還將探討一些進階的前端開發技術和最佳實踐。這可能包括對SEO（搜索引擎優化）的基本理解，瞭解如何通過前端的優化來提升網站在搜索引擎中的排名。我們也會涉及一些現代前端框架或庫的理念，雖然本書不聚焦於某個特定框架，但瞭解這些工具的設計思想，如組件化開發、數據綁定等，將有助於您理解更廣泛的前端生態係統，並為未來深入學習特定框架打下堅實的基礎。 本書的每一章都將以理論講解與實例相結閤的方式進行，力求讓枯燥的技術概念變得生動易懂。我們將通過一係列精心設計的代碼示例，直觀地展示各種技術的應用場景和實現方式。這些示例將覆蓋從簡單的布局調整到復雜的交互邏輯，幫助您在實踐中鞏固所學知識，並逐步建立起解決實際開發問題的能力。您將有機會親手搭建一個完整的響應式網頁，並逐步添加各種功能和優化，從而獲得成就感和全麵的提升。 最終，本書的目標是幫助您建立起一套完整、係統且前瞻性的現代前端開發能力。您將不僅能夠理解響應式設計的原理，更能熟練運用各種技術和工具，構建齣高性能、高可用性、高用戶體驗的跨平颱網站。無論您是初入前端開發的門檻，還是希望進一步提升技能，希望在瞬息萬變的Web開發領域保持競爭力，本書都將是您不可或缺的良師益友。讓我們一起踏上這段精彩的Web前端開發之旅，用您的雙手，創造齣令人驚嘆的數字化産品。