编辑推荐
适读人群 :初级前端开发工程师,有一定经验的专业前端开发工程师 你是否使用过智能手机浏览真正的网页?你是否因为自己作为后端程序员而不能开发出较漂亮的页面?你是否开发过能够同时适应不同分辨率的屏幕的页面?
如果你出现过上述问题并想解决这些问题,那么你可以阅读本书来了解相关的解决方案。
全书源代码免费下载:www.broadview.com.cn/27974
内容简介
Bootstrap 是一个基于HTML 5 和CSS 3 的前端开发框架,它提供了较为丰富的Web 组件,能够快速制作一个漂亮的Web 页面。
《Bootstrap 基础教程》主要围绕Bootstrap 框架,讲述了Bootstrap 布局、Bootstrap 表单元素、Bootstrap 导航、Bootstrap内置组件、Bootstrap 对JavaScript 的支持,以及HTML 5 和CSS 3 的一些基础知识等。《Bootstrap 基础教程》是为从未接触过Bootstrap 但又想了解学习Bootstrap 技术的读者而编写的,适合以下人群阅读:
熟悉JSP、PHP、ASP.NET 等后端Web 技术的开发人员;
对HTML 和CSS 有一定了解的UI 设计师;
对移动Web 开发有浓厚兴趣的开发者;
有一定JavaScript(jQuery)开发经验的前端开发人员。
作者简介
贺臣,软件开发工程师,现就职于上海某知名地产企业,曾合伙创办一家软件服务公司,对生产制造、物流仓库等领域颇有见解;在ASP.NET、jQuery、BootStrapAngularjs、SQL Server、软件架构等技术领域也多有涉及,业余喜欢户外登山,整理技术相关的博客。
目录
第一部分 Bootstrap 布局 1 Bootstrap 是什么 2 1.1 Bootstrap 简述 21.2 如何使用 Bootstrap 3 1.3 包含内容 4 1.4 简单模板 5 1.5 简单实例 6 2 网格系统 9 2.1 实现原理 9 2.2 工作原理 9 2.3 基本用法 11 2.4 列偏移 12 2.5 列排序 13 2.6 列嵌套 15 3 排版 163.1 标题 163.1.1 大标题 16 3.1.2 小标题 18 3.2 段落 193.3 mark 标签 193.4 del 和 s 标签 193.5 ins 和 u 标签 20 3.6 strong 和 b 标签 20 3.7 em 和 i 标签 213.8 文本对齐方式 213.9 字母大小写 22 3.10 abbr 标签的 title 属性 23 3.11 引用样式 23 3.12 列表 23 3.12.1 有序列表和无序列表 24 3.12.2 去点列表 24 3.12.3 内联列表 253.12.4 定义列表 253.12.5 水平列表 25 3.13 代码 273.14 表格 28 目录 VII 3.14.1 基础表格 283.14.2 斑马线 29 3.14.3 表格边框 30 3.14.4 高亮行 31 3.14.5 紧凑型表格 33 3.14.6 响应式表格 33 第二部分 Bootstrap 表单元素 4 表单 36 4.1 基础表单 36 4.1.1 基本实例 364.1.2 内联表单 37 4.1.3 水平表单 37 4.2 输入框 394.3 下拉框 394.4 文本域 404.5 多选框和单选框 41 4.6 表单焦点 42 4.7 表单禁用 42 4.8 验证样式 44 4.8.1 颜色提示 444.8.2 图标提示 45 4.8.3 文字提示 46 4.9 元素大小 47 4.9.1 高度 47 4.9.2 宽度 49 4.10 按钮 494.10.1 基本按钮 494.10.2 多标签 50 4.10.3 按钮风格 51 4.10.4 按钮大小 52 4.10.5 块状按钮 53 4.10.6 激活和禁用 53 4.11 图片 54 4.12 图标 56 4.13 输入框组 58 5 下拉菜单 625.1 基本用法 625.2 基本原理 635.3 分割线 645.4 菜单标题 64 5.5 对齐方式 65 5.6 菜单状态 68 6 按钮组 706.1 基本按钮组 70 6.2 工具栏 71 6.3 按钮组的大小 74 6.4 嵌套分组 76 6.5 垂直分组 77 6.6 等分按钮 78 6.7 按钮下拉菜单 78 第三部分 Bootstrap 导航 7 导航 847.1 导航基础样式 84 7.2 选项卡导航 86 7.3 Pills 导航 86 7.4 垂直导航 87 7.5 导航状态 88 7.6 自适应导航 88 7.7 导航二级菜单 89 7.8 面包屑导航 90 7.9 导航条 92 VIII Bootstrap 基础教程 7.10 导航条的基本用法 927.11 品牌图标 93 7.12 导航条――表单 947.13 导航条――按钮 967.14 导航条――文本和链接 977.15 导航条中的二级菜单 98 7.16 固定导航条 997.17 响应式导航条 1017.18 反色导航条 1037.19 分页导航 1047.20 标签和徽章 107 第四部分 Bootstrap 内置组件 8 内置组件 1128.1 面板 1128.1.1 基础应用 113 8.1.2 面板的标题和脚注 1148.1.3 基础样式 114 8.1.4 嵌套表格 1168.1.5 嵌套列表 118 8.2 缩略图 1198.3 巨幕 1228.4 页头 1238.5 提示框 124 8.6 进度条 127 8.6.1 基础进度条 127 8.6.2 显示进度 1278.6.3 彩色进度条 1298.6.4 条纹进度条 1308.6.5 堆叠效果 1318.7 媒体对象 132 8.7.1 基本构成 132 8.7.2 对齐方式 133 8.7.3 嵌套对象 134 8.7.4 媒体列表组 1358.8 列表组 136 8.8.1 基础列表组 136 8.8.2 带徽章的列表组 137 8.8.3 链接列表组 1388.8.4 其他元素的支持 1398.8.5 状态设置 1418.8.6 列表组主题 143 第五部分 Bootstrap 对 JavaScript 的支持 9 JavaScript 支持 1469.1 插件库说明 1469.2 编程方式 1479.2.1 data-*属性 147 9.2.2 编程方式 API 149 9.2.3 命名空间冲突 1499.2.4 事件 1499.2.5 版本 1509.3 过渡效果 150 9.4 对话框 1529.4.1 对话框结构 152 9.4.2 对话框的特点 153 9.4.3 弹出框触发方式 156 9.4.4 过渡效果 1589.4.5 触发参数 data-* 1599.4.6 JavaScript触发―― 参数 161 9.4.7 JavaScript触发―― 方法 163 目录 IX 9.4.8 JavaScript触发―― 事件 165 9.5 下拉菜单 167 9.5.1 声明式触发 167 9.5.2 JavaScript 触发 1689.5.3 事件 1699.6 监听滚动 171 9.6.1 组件说明 171 9.6.2 滚动监听实现步骤 1719.6.3 声明式触发 1739.6.4 JavaScript 触发 1759.7 Tab 选项卡 176 9.7.1 选项卡的组成 1779.7.2 声明式触发 1789.7.3 JavaScript 触发 1809.7.4 Pills 导航 181 9.7.5 过渡效果 181 9.7.6 事件 1829.8 Tip 提示 1849.8.1 结构 185 9.8.2 JavaScript 触发 185 9.8.3 data-*属性 187 9.8.4 JavaScript 触发参数 188 9.8.5 事件 189 9.9 提示框 1909.9.1 alert 结构 190 9.9.2 声明式触发 191 9.9.3 JavaScript 触发 192 9.9.4 事件 193 9.10 Popover 弹出框 1939.10.1 弹出框结构 194 9.10.2 声明式属性 194 9.10.3 JavaScript 方式触发 195 9.10.4 事件 197 9.11 按钮 1989.11.1 按钮加载状态 1989.11.2 单选按钮 1999.11.3 多选按钮 2009.11.4 方法 2019.12 折叠/手风琴 Collapse 203 9.12.1 结构 204 9.12.2 声明式触发 2059.12.3 方法 207 9.12.4 事件 2089.13 轮播图 209 9.13.1 轮播图构成 210 9.13.2 声明式触发 213 9.13.3 JavaScript 触发 2159.13.4 事件 2169.14 Affix 插件 2169.14.1 声明属性 217 9.14.2 JavaScript 方法 2179.14.3 事件 220 第六部分 HTML和CSS 3的相关知识 10 HTML 元素 22210.1 表单属性 222 10.2 Input 类型 223 10.3 HTML 5 新标签 22610.3.1 role 属性 22610.3.2 header 标签 226 10.3.3 footer 标签 227 10.3.4 nav 标签 22710.3.5 article 标签 228 10.3.6 section 标签 228 X Bootstrap基础教程 11 CSS 3 样式 230 11.1 选择器 230 11.1.1 完全匹配属性选择器 231 11.1.2 包含匹配选择器 231 11.1.3 首字符匹配选择器 23111.1.4 末字符匹配选择器 23111.2 伪类选择器 23211.3 阴影 232 11.4 背景 233 11.5 圆角边框 23511.6 响应式设计 235 11.6.1 什么是响应式设计 235 11.6.2 响应式设计优缺点 236 11.6.3 Viewport 窗口 23611.6.4 Media Queries 语法 236 12 案例 240 12.1 默认样式的不足 240 12.2 日历控件的使用 24212.3 页面显示代码内容 243 12.4 表格插件 24412.5 图表插件 246附录 A Bootstrap 4.0 以及其他 249 A.1 重大更新 249 A.2 重要链接地址 250
前言/序言
你是否使用过智能手机浏览真正的网页?
你是否因为自己作为后端程序员而不能开发出较漂亮的页面?
你是否开发过能够同时适应不同分辨率的屏幕的页面?
如果你出现过上述问题并想解决这些问题,那么你可以阅读本书来了解相关的解决方案。
Bootstrap 讨论
现今,移动互联网已经成为热门话题之一。近年来HTML 5 发展迅猛,各大浏览器都开始纷纷支持HTML 5 的标准规范。手机端的浏览器对HTML 5 以及CSS 3 有了很好的支持,使得HTML 5 强大的特性在手机端也得到了很好的应用。
Bootstrap 就是一个基于HTML 5 和CSS 3 的前端开发框架, 它提供了较为丰富的Web组件,能够快速制作一个漂亮的Web 页面,同时,在最新版本的Bootstrap 中提倡了以移动优先的响应式布局设计,我们需要编写出能适应不同分辨率的PC 端浏览器以及移动手机端浏览器的代码。也正是如此,才有越来越多的开发者加入Bootstrap 框架的开发行列中来。
为什么写这本书
2015 年绝对是移动开发火热的一年,层出不穷的前端开发框架的出现给开发者提供了很多的便利。iPhone、Android 等智能设备的快速增长,适应更多设备的响应式布局开发也成为了开发的热点之一。Bootstrap 恰恰能够很好地解决相应的问题,这让我不得不喜欢上Bootstrap 这个优秀的前端框架。
作为后端程序开发出身的我,有必要记录下Bootstrap 学习的过程,并且分享给想学习Bootstrap 的同仁。
基于以上原因,我将自己的学习思路以及过程整理成了本书书稿,希望能给初学者带来一定的指导方向,使读者了解Bootstrap,并且能够去使用它。
关于本书
本书主要围绕Bootstrap 框架,讲述如何利用Bootstrap 制作出漂亮的前端页面。本书主要分为以几部分。
第一部分主要讲解了Bootstrap 中的布局,Bootstrap 中提供了网格系统用于页面的基本布局,同时我们也可以利用HTML 元素特性结合CSS 来布局,Bootstrap 对这些元素的默认样式做了一定程度的修改。
第二部分主要讲解了Bootstrap 中的表单元素,Bootstrap 在表单上做了较大的处理,对表单输入元素以及排版上都有一定的控制,使用Bootstrap 可以快速制作一个漂亮的表单。
第三部分主要讲解了Bootstrap 中的导航,在本书中,下拉菜单、按钮、导航条等都归结为导航栏,提供一些功能性的引导作用。Bootstrap 提供了很便捷的方式来开发相应的功能组件。
第四部分主要讲解了Bootstrap 中的一些内置组件,这些组件提供了Web 开发中一些较为常见的使用效果。
第五部分主要讲解了Bootstrap 对JavaScript 的支持,Bootstrap 提供了默认的jQuery 插件去实现一些动态的效果展示。
第六部分主要补充了HTML 5 以及CSS 3 等一些相关知识,这两章主要是对本书Bootstrap 基础知识的补充。
读者对象
本书是为从未接触过Bootstrap 但又想了解学习Bootstrap 技术的读者而编写的,如果你有一定的HTML、CSS 开发经验,那么你将更加容易掌握本书内容。
如果你是以下几类人群之一,那么你非常适合阅读此书:
熟悉JSP、PHP、ASP.NET 等后端Web 技术的开发人员;
对HTML 和CSS 有一定了解的UI 设计师;
对移动Web 开发有浓厚兴趣的开发者;
有一定JavaScript(jQuery)开发经验的前端开发人员。
致谢
在本书的写作过程中,得到了很多Web 开发人员的悉心帮助,在此对给予本书帮助的同仁以及各大社区网站表示诚挚的感谢。
由于本人水平有限,因此在本书编写过程中可能存在表述不清或者认识不全面等问题,敬请读者批评指正。作者的联系邮箱为821865130@qq.com,真诚希望能与各位读者共同交流、共同进步。
《前端魔法石:解锁响应式网页设计的无限可能》 在这信息爆炸、视觉体验至上的数字时代,一个优秀的网站不仅是信息的载体,更是企业形象、品牌魅力的直接体现。然而,如何在纷繁复杂的屏幕尺寸与设备类型中,构建出既美观又实用的网页,始终是前端开发者们面临的一大挑战。传统的网页开发方式往往需要针对不同设备进行大量的适配和调整,耗时耗力,且效果难以统一。 《前端魔法石:解锁响应式网页设计的无限可能》应运而生,它不是一本枯燥的代码手册,而是一把开启响应式网页设计魔法之门的钥匙。本书将带领你深入探索现代网页开发的核心理念,掌握如何运用一系列强大而优雅的工具与技术,轻松应对各种前端布局难题,打造出在任何设备上都能完美呈现的动态网页。 本书的独特之处在于,它并非专注于某一个具体的框架或库,而是从根本上剖析响应式设计的原理,引导开发者建立起一套通用的、可迁移的知识体系。 我们将从网页布局的基石——CSS入手,但不同于市面上常见的CSS教程,《前端魔法石》将带你超越基础选择器和属性的堆砌,聚焦于那些能够真正提升开发效率和页面质量的关键技术。 第一部分:重塑画布——弹性布局的艺术 在这一部分,我们将深入剖析现代CSS布局的两位重量级选手:Flexbox(弹性盒子模型)和Grid(网格布局)。这两种技术彻底改变了我们构建网页的方式,使得复杂的响应式布局变得前所未有的简单和直观。 Flexbox:一维布局的王者。我们将从 Flexbox 的核心概念——容器(container)和项目(item)——开始,详细讲解主轴(main axis)和交叉轴(cross axis)的概念,以及如何运用 `justify-content`、`align-items`、`flex-direction` 等属性,轻松实现元素的排列、对齐和分配空间。本书会通过大量的实例,演示如何使用 Flexbox 解决导航栏自适应、卡片式列表排列、表单元素对齐等实际开发中遇到的常见问题。你将学会如何让元素在空间中“呼吸”,如何实现垂直居中,如何让列表项随着屏幕宽度变化而优雅地换行或收缩。我们将探讨 `flex-grow`、`flex-shrink` 和 `flex-basis` 的组合应用,以及如何通过 `order` 属性灵活调整元素的显示顺序。 Grid:二维布局的巨匠。当 Flexbox 专注于一维布局时,Grid 则为我们打开了二维布局的全新维度。本书将引导你理解 Grid 容器和 Grid 项目,深入讲解 `grid-template-columns`、`grid-template-rows`、`grid-gap` 等属性,让你能够轻松创建出复杂的网格结构。你将学会如何定义行和列的尺寸(无论是固定像素、百分比还是弹性单位 `fr`),如何精确地控制元素在网格中的放置,以及如何利用 `grid-area` 和 `grid-template-areas` 实现如同拖拽般直观的页面布局。我们将通过实际案例,展示如何用 Grid 构建出响应式的博客文章布局、产品展示页面,甚至复杂的仪表盘界面。你将体会到 Grid 如何让网页结构的搭建变得像搭积木一样简单而富有逻辑。 第二部分:响应的灵魂——断点的智慧与策略 响应式设计的精髓在于,让网页能够“感知”用户设备的屏幕尺寸,并做出相应的调整。这一部分的重点将是媒体查询(Media Queries),它是实现响应式设计的核心工具。 媒体查询的语法与应用:我们将从媒体查询的基本语法开始,详细讲解如何基于屏幕宽度、设备方向、分辨率等多种条件来应用不同的 CSS 样式。本书将超越简单的“手机、平板、电脑”的划分,引导你理解“内容驱动”的断点设置理念。这意味着,断点不应被随意设定,而应根据页面内容的实际表现,在内容出现“挤压”或“空隙过大”时才进行调整。我们将通过实例,演示如何为不同的断点设置不同的布局、字体大小、图片尺寸,甚至元素显示/隐藏策略,从而确保在各种屏幕尺寸下,用户都能获得最佳的阅读和交互体验。 移动优先(Mobile-First)与桌面优先(Desktop-First):我们将深入探讨两种主流的响应式设计策略。移动优先强调从最小的屏幕尺寸开始设计,逐步增加复杂度和功能,这种方法有助于开发者优先考虑核心内容和用户体验,避免在小型设备上加载不必要的资源。桌面优先则反其道而行之,先为大屏幕设计,再逐步缩小。本书将分析这两种策略的优劣,并提供实践建议,帮助你根据项目需求选择最合适的策略,并灵活运用媒体查询实现。 视口(Viewport)的理解与设置:一个正确的视口设置是响应式设计的基石。我们将详细讲解 `
` 标签的作用,以及 `width=device-width`、`initial-scale=1.0` 等重要参数的含义,确保你的网页能够在移动设备上按照预期渲染,避免出现缩放混乱的问题。 第三部分:视觉的盛宴——响应式图片的艺术与响应式排版的奥秘 除了布局,图像和文字的响应式处理同样至关重要,它们直接影响着页面的美观度和加载性能。 响应式图片的实践:大尺寸图片在小屏幕上不仅浪费带宽,还会影响加载速度。本书将介绍多种实现响应式图片的技术: CSS 媒体查询控制图片尺寸:最基础但有效的方式,通过媒体查询调整 `max-width: 100%` 和 `height: auto` 等属性。 `srcset` 和 `sizes` 属性:深入讲解 HTML5 引入的这两个属性,它们允许浏览器根据设备分辨率和屏幕尺寸,自动选择最合适的图片版本进行加载,极大地提升了性能。我们将演示如何为同一张图片提供多个尺寸和分辨率的版本,并编写 `srcset` 和 `sizes` 属性,让浏览器智能优化。 `
` 元素:对于需要根据不同断点显示完全不同图片(例如,不同构图的图片)的场景,`` 元素提供了更精细的控制。我们将演示如何使用 `` 元素,配合 `` 标签,实现更高级的响应式图片策略。 响应式排版的艺术:文字的大小、行高、字间距等都会随着屏幕尺寸的变化而影响阅读体验。我们将探讨: 相对单位的运用:`em`、`rem`、`vw`、`vh` 等相对单位在响应式排版中的优势。 可伸缩字体(Fluid Typography):介绍如何利用 CSS `clamp()` 函数或结合媒体查询,实现字体大小在一定范围内平滑过渡,使文字在不同屏幕上都能保持良好的可读性。 行宽的优化:过宽或过窄的行宽都会影响阅读效率。我们将探讨如何通过媒体查询调整容器的 `max-width`,以优化每行的字数。 字体加载策略:简要介绍字体文件的加载优化方法,确保字体在各设备上都能快速显示,避免“白屏”现象。 第四部分:工具与工作流——提升开发效率的利器 掌握了核心技术,效率的提升同样不可忽视。本书将简要介绍一些能够辅助响应式开发的高效工具和理念。 浏览器开发者工具的妙用:深入挖掘浏览器开发者工具中响应式设计模式的强大功能,包括模拟不同设备尺寸、查看媒体查询的应用情况、实时调试布局等。 CSS 预处理器(如 Sass/Less)的集成:简要说明预处理器如何在响应式开发中发挥作用,例如通过变量、混合宏(mixins)来管理断点和重复的样式,提高代码的可维护性。 版本控制(Git)的重要性:虽然不是直接的技术,但良好的版本控制习惯对于任何复杂的项目都至关重要,本书将强调其在团队协作和项目迭代中的作用。 《前端魔法石:解锁响应式网页设计的无限可能》,旨在为你构建坚实的前端基础,让你能够自信地应对未来的网页设计挑战。它不仅仅是一本技术指南,更是一种思维方式的启迪。通过本书的学习,你将能够: 从根本上理解响应式设计的原理,而不是死记硬背代码。 掌握 Flexbox 和 Grid 两种现代布局技术的精髓,轻松驾驭复杂的页面结构。 灵活运用媒体查询,实现真正意义上的内容驱动的响应式调整。 优化图片和文字的显示,为用户提供更佳的视觉和阅读体验。 提升开发效率,掌握更高效的开发流程和工具。 无论你是刚踏入前端开发的新手,还是希望提升技能的资深开发者,《前端魔法石》都将是你不可或缺的学习伙伴。它将赋予你“魔法”,让你用更少的时间,创造出更具影响力的网页作品。准备好,让我们一起踏上这段充满惊喜的响应式设计之旅吧!