导语

  

内容提要

  

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

版权声明
序
前言
第1章  理解Bulma及其术语和概念
  1.1  Bulma有何独特之处
  1.2  简易的栅格系统
  1.3  可读性
  1.4  可定制
  1.5  模块化
  1.6  列
  1.7  修饰符
  1.8  组件
  1.9  辅助类
  1.10  小结
第2章  Bulma表单开发
  2.1  模板要求
  2.2  居中布局
  2.3  实现表单内容
    2.3.1  logo
    2.3.2  邮箱输入框
    2.3.3  密码输入框
    2.3.4  复选框
    2.3.5  登录按钮
  2.4  小结
第3章  站点导航和侧边栏菜单
  3.1  创建导航栏
    3.1.1  导航品牌标志
    3.1.2  导航菜单
    3.1.3  下拉菜单
  3.2  页面主区域
  3.3  侧边栏菜单
  3.4  小结
第4章  实现响应式栅格
  4.1  工具栏
    4.1.1  level组件和navbar组件的相似性
    4.1.2  创建工具栏
  4.2  图书栅格
  4.3  图书项
  4.4  分页
  4.5  小结
第5章  创建面包屑导航和文件上传功能
  5.1  图书详情页模板
    5.1.1  面包屑
    5.1.2  图书录入表单
  5.2  编辑页面模板
  5.3  小结
第6章  创建表格和下拉菜单
  6.1  客户列表
    6.1.1  更新工具栏
    6.1.2  实现客户表格
  6.2  新建客户页面
  6.3  小结
第7章  创建更多表格及下拉菜单
  7.1  订单列表
  7.2  订单编辑页面
    7.2.1  订单信息
    7.2.2  图书列表
    7.2.3  行内表单
  7.3  小结
第8章  创建通知和卡片功能
  8.1  标题、时间范围
  8.2  核心指标
  8.3  最新订单列表
  8.4  使用card组件展示热门图书
  8.5  忠实客户
  8.6  小结
第9章  在原生JavaScript中应用Bulma
  9.1  问题报告模态框
  9.2  移动端toggle菜单
  9.3  通知
  9.4  下拉菜单
  9.5  删除图书功能
  9.6  删除客户功能
  9.7  小结
第10章  在Angular中使用Bulma
  10.1  准备
  10.2  应用
  10.3  组件
  10.4  小结
第11章  在Vue.js中使用Bulma
  11.1  安装vue-cli
  11.2  创建Vue应用程序
    11.2.1  创建页面
    11.2.2  vue-router
  11.3  安装Bulma
    11.3.1  方法一：CDN引入
    11.3.2  方法二：npm包引入（推荐）
    11.3.3  使用Font-Awesome字体
  11.4  Vue组件
  11.5  管理页面骨架
  11.6  实现Dashboard
  11.7  登录页面
  11.8  创建问题报告组件
    11.8.1  创建组件
    11.8.2  将模态框添加到App模板
  11.9  图书页面
    11.9.1  图书排序
    11.9.2  过滤图书
    11.9.3  创建和编辑图书
  11.10  小结
第12章  在React中使用Bulma
  12.1  本章目标
  12.2  安装create-react-app
  12.3  create-react-app速览
  12.4  安装Bulma
    12.4.1  选项1：通过CDN添加Bulma
    12.4.2  选项2：通过npm添加Bulma
  12.5  使用React Router 4编写路由
    12.5.3  带有路由的最终版App.js
  12.6  创建登录组件
    12.6.1  Login.jsx
    12.6.2  创建登录表单
  12.7  创建收藏
    12.7.1  页眉
    12.7.2  Header.jsx
    12.7.3  HeaderBrand.jsx
    12.7.4  HeaderUserControls.jsx
    12.7.5  整合页眉
  12.8  Footer.jsx
  12.9  图书收藏主体
    12.9.1  Collection.jsx
    12.9.2  CollectionSingleBook.jsx
    12.9.3  CollectionSingleBookDetail.jsx
    12.9.4  整合收藏组件
  12.10  运行应用
  12.11  小结
第13章  自定义Bulma
  13.1  安装node-sass
    13.1.1  创建package.json
    13.1.2  创建sass/custom.scss文件
  13.2  导入Bulma
  13.3  导入谷歌字体
  13.4  导入自己的变量
  13.5  理解Bulma变量
  13.6  覆盖Bulma的初始变量
  13.7  覆盖Bulma的组件变量
  13.8  修改HTML
  13.9  自定义规则
    13.9.1  第二字体
    13.9.3  使用Rubik字体
    13.9.4  修改侧边栏菜单
    13.9.5  修补导航栏
    13.9.6  优化表格
    13.9.7  标题加粗
  13.10  使用Bulma混入实现响应式
  13.11  小结