Bulma必知必会

Bulma是基于Flexbox的现代CSS框架，具有响应式、模块化、可定制等诸多亮点，而且语法简单，轻量易用。作为广受赞誉的开源杰作，Bulma还拥有丰富的组件和文档，对初学者十分友好，即便不会编写CSS，也能轻松上手。Bulma的目标就是帮助前端开发者用更少的CSS代码实现更多功能。 1.本书由Bulma之父执笔，通过生动的示例一步步讲解如何用Bulma构建Web应用、设计页面布局、创建自定义UI元素和组件，以及与JavaScript框架集成。 2.示例所创建的系统包含了所有网站或内容管理系统基本都具备的CRUD功能，极具指导性。对于想开发优美界面和华丽网站的前端开发者和设计师来说，本书不容错过！

Bulma是一个流行的开源CSS框架，轻量而易用。借助它，即使接近不会编写CSS，也能轻松创建出美观的网页。本书通过生动实例细致讲解如何使用Bulma框架从头创建Web应用。主要内容包括：Bulma的基本概念与特性，如何用Bulma创建页面布局，Bulma组件如何工作，如何设计具体的UI元素，如何将Bulma嵌入JavaScript，如何将Bulma与流行的前端框架React、Angular和Vue集成，等等。

版权声明
序
前言
第1章 理解Bulma及其术语和概念 1
1.1 Bulma有何独特之处 1
1.2 简易的栅格系统 2
1.3 可读性 3
1.4 可定制 3
1.5 模块化 5
1.6 列 5
1.7 修饰符 6
1.8 组件 7
1.9 辅助类 8
1.10 小结 8
第2章 Bulma表单开发 9
2.1 模板要求 9
2.2 居中布局 11
2.3 实现表单内容 13
2.3.1 logo 14
2.3.2 邮箱输入框 15
2.3.3 密码输入框 17
2.3.4 复选框 17
2.3.5 登录按钮 18
2.4 小结 18
第3章 站点导航和侧边栏菜单 20
3.1 创建导航栏 21
3.1.1 导航品牌标志 21
3.1.2 导航菜单 23
3.1.3 下拉菜单 24
3.2 页面主区域 26
3.3 侧边栏菜单 27
3.4 小结 30
第4章 实现响应式栅格 31
4.1 工具栏 32
4.1.1 level组件和navbar组件的相似性 32
4.1.2 创建工具栏 32
4.2 图书栅格 34
4.3 图书项 36
4.4 分页 39
4.5 小结 40
第5章 创建面包屑导航和文件上传功能 41
5.1 图书详情页模板 41
5.1.1 面包屑 42
5.1.2 图书录入表单 42
5.2 编辑页面模板 46
5.3 小结 48
第6章 创建表格和下拉菜单 49
6.1 客户列表 49
6.1.1 更新工具栏 50
6.1.2 实现客户表格 51
6.2 新建客户页面 53
6.3 小结 58
第7章 创建更多表格及下拉菜单 59
7.1 订单列表 60
7.2 订单编辑页面 62
7.2.1 订单信息 64
7.2.2 图书列表 65
7.2.3 行内表单 67
7.3 小结 69
第8章 创建通知和卡片功能 70
8.1 标题、时间范围 71
8.2 核心指标 72
8.3 近期新订单列表 74
8.4 使用card组件展示热门图书 76
8.5 忠实客户 78
8.6 小结 81
第9章 在原生JavaScript中应用Bulma 82
9.1 问题报告模态框 82
9.2 移动端toggle菜单 85
9.3 通知 86
9.4 下拉菜单 86
9.5 删除图书功能 87
9.6 删除客户功能 88
9.7 小结 88
第10章 在Angular中使用Bulma 89
10.1 准备 90
10.2 应用 91
10.3 组件 91
10.4 小结 106
第11章 在Vue.js中使用Bulma 107
11.1 安装vue-cli 107
11.2 创建Vue应用程序 108
11.2.1 创建页面 109
11.2.2 vue-router 109
11.3 安装Bulma 111
11.3.1 方法一：CDN引入 111
11.3.2 方法二：npm包引入（推荐） 111
11.3.3 使用Font-Awesome字体 113
11.4 Vue组件 114
11.5 管理页面骨架 114
11.6 实现Dashboard 117
11.7 登录页面 121
11.8 创建问题报告组件 124
11.8.1 创建组件 125
11.8.2 将模态框添加到App模板 129
11.9 图书页面 130
11.9.1 图书排序 131
11.9.2 过滤图书 132
11.9.3 创建和编辑图书 133
11.10 小结 136
第12章 在React中使用Bulma 137
12.1 本章目标 137
12.2 安装create-react-app 138
12.3 create-react-app速览 138
12.4 安装Bulma 139
12.4.1 选项1：通过CDN添加Bulma 139
12.4.2 选项2：通过npm添加Bulma 140
12.5 使用React Router 4编写路由 140
12.5.1  141
12.5.2  141
12.5.3 带有路由的最终版App.js 142
12.6 创建登录组件 142
12.6.1 Login.jsx 143
12.6.2 创建登录表单 145
12.7 创建收藏 149
12.7.1 页眉 150
12.7.2 Header.jsx 150
12.7.3 HeaderBrand.jsx 152
12.7.4 HeaderUserControls.jsx 154
12.7.5 整合页眉 156
12.8 Footer.jsx 157
12.9 图书收藏主体 158
12.9.1 Collection.jsx 159
12.9.2 CollectionSingleBook.jsx 161
12.9.3 CollectionSingleBookDetail.jsx 162
12.9.4 整合收藏组件 164
12.10 运行应用 166
12.11 小结 166
第13章 自定义Bulma 167
13.1 安装node-sass 168
13.1.1 创建package.json 168
13.1.2 创建sass/custom.scss文件 169
13.2 导入Bulma 171
13.3 导入谷歌字体 172
13.4 导入自己的变量 172
13.5 理解Bulma变量 173
13.6 覆盖Bulma的初始变量 174
13.7 覆盖Bulma的组件变量 175
13.8 修改HTML 179
13.9 自定义规则 180
13.9.1 第二字体 180
13.9.3 使用Rubik字体 183
13.9.4 修改侧边栏菜单 184
13.9.5 修补导航栏 186
13.9.6 优化表格 187
13.9.7 标题加粗 187
13.10 使用Bulma混入实现响应式 188
13.11 小结 190