摘要: {说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 。 Bulma 的网格系统一行默认分成 12 列。 包围 进行网格布局。 被设定为,在平板+设备上采用 Flex 布局,在手机上的使用默认的布局。 提供了三个辅助类: 1. :列居中显示。 2. :列可多行显示。 3. :列垂直居 阅读全文
posted @ 2017-03-29 15:26 Hi!张宝 阅读(505) 评论(0) 推荐(0) 编辑
摘要: Bulma 的 类是这样实现的。 1. 在 桌面 设备中, 的宽度固定为“$desktop 40px”,也就是 ,然后居中显示。 2. 在 宽屏 设备中, 的宽度固定为“$widescreen 40px”,也就是 ,然后居中显示。 3. 在 大屏 设备中, 的宽度固定为“$fullhd 40px”, 阅读全文
posted @ 2017-03-29 15:08 Hi!张宝 阅读(496) 评论(0) 推荐(0) 编辑
摘要: 在 Bulma 中将设备分为 6 类:手机、平板、触屏设备、桌面、宽屏和大屏。提供了四个阈值。 这些设备及对应设备宽度的范围如下: 1. 手机:0px ~ 768px 2. 平板:769px ~ 999px 3. 触屏设备:0px ~ 999px 4. 桌面:1000px ~ 1191px 5. 宽 阅读全文
posted @ 2017-03-29 14:58 Hi!张宝 阅读(422) 评论(0) 推荐(0) 编辑
摘要: 源码基于 Bulma 0.4.0 版本。 一、入口文件 是 Bulma 使用 SASS 编译的入口文件。 内容如下: 包含了 Bulma 框架的所有 6 个子部分的入口文件( )。分别是工具、基础、元素、组件、网格、布局。 学习的顺序是这样的: 1. 工具 2. 基础 3. 布局 4. 网格 5. 阅读全文
posted @ 2017-03-24 14:04 Hi!张宝 阅读(1094) 评论(0) 推荐(1) 编辑
摘要: 一、起因 最近我在学习 "SASS" ,通过它,可以将 CSS 像编程语言一样书写。 在最近之前,我又学习了 "Flex 布局" ,用起来很方便。 所以,我学习了 "Bulma" 这个纯 CSS 框架——使用 Flex 布局(浏览器支持 IE10+),源码使用 SASS 编写。 在开始进入 Bulm 阅读全文
posted @ 2017-03-24 12:23 Hi!张宝 阅读(3001) 评论(0) 推荐(0) 编辑
摘要: 一、简介 Navbar 指导航条,它在移动设备上显示为折叠状态,在宽屏幕上水平展开。 "这里" 是一个线上例子。 {提示} 响应式导航条依赖 "collapse 插件" ,定制 Bootstrap 时务必要包含。 {设备的可访问性} 务必使用 元素,需要设置属性 。这样能让辅助设备道这是一个导航条。 阅读全文
posted @ 2017-03-21 10:35 Hi!张宝 阅读(21739) 评论(0) 推荐(3) 编辑
摘要: 一、简介 ScrollSpy 就是滚动监听。设置滚动监听方式有两种: 1. 标签 API 2. JavaScript 代码 监听区域也有两种可能: 1. 标签 2. 自定义标签元素 {注意} ScrollSpy 需要 "nav 组件的代码" 支持,才会正确高亮激活项。 二、通过标签 API 通过标签 阅读全文
posted @ 2017-03-20 16:19 Hi!张宝 阅读(1769) 评论(0) 推荐(0) 编辑
摘要: 一、简介 Carousel 就是指轮播图, "这里" 有完整的代码例子。它可以很简单的就构造出来,结构如下: 具体代码如下。 1. 将组件标记为轮播器, 设置轮播器图片切换效果是从右向左滑动。 2. 页面加载完成后, 确保轮播器自动启动。 3. 被标记为 幻灯片最开始显示的幻灯片。 二、Carous 阅读全文
posted @ 2017-03-20 16:13 Hi!张宝 阅读(481) 评论(0) 推荐(1) 编辑
摘要: 简介 Tooltip 指提示框,Popover 指弹出框。 Tooltip 默认 Tooltip 功能是关闭的,使用前要手动开启。 Tooltip 可以用在 标签上。下面是它的完整代码: 是必需的。 data original title 标签的话,显示的是 属性值。 默认提示框出现在顶部 。 自定 阅读全文
posted @ 2017-03-20 13:58 Hi!张宝 阅读(2045) 评论(0) 推荐(0) 编辑
摘要: 一、内部属性 JavaScript 没有类的概念,它的“继承”基于对象的内部属性 ,它是一个内部引用,它的值是引用类型值。 ES6 中 语法是一种误导,它只是封装在 上的一个语法糖,它的行为像类,但又不同。 JavaScript 中的原型链就是靠内部属性 关联起来的。关联的逻辑如下: 1. 当访问一 阅读全文
posted @ 2017-03-20 12:37 Hi!张宝 阅读(161) 评论(0) 推荐(0) 编辑
摘要: 一、简介 Collapse 插件为 HTML 标签提供折叠、展开行为,依赖 "transition.js" ( 文件中已包含)。 二、实现机制 实现 Collapse 效果需要: 1. 一个 标签: href 标签使用 属性。 2. 上面两种情况,都要添加 属性。 3. 被 Collapse 的目标 阅读全文
posted @ 2017-03-17 14:47 Hi!张宝 阅读(2673) 评论(0) 推荐(1) 编辑
摘要: 一、简介 Panel 指面板。 "这里" 有例子。 一个典型的面板的代码结构是这样的: 除了使用 这个默认样式,还可以使用的样式有: 1. 。 2. 。 3. 。 4. 。 5. 。 Panel 强大得还有一点,就是能搭配其它组件使用,这些组件包括:表格(tables)和列表(list groups 阅读全文
posted @ 2017-03-16 15:19 Hi!张宝 阅读(3605) 评论(0) 推荐(0) 编辑
摘要: 简介 List group 指列表。当然,Bootstrap 列表不局限于由 标签构成的。 Bootstrap 中一共三种列表的构成方式, "这里" 有一个例子: 1. 。 2. 。 3. 。 列表就是“父与子”的关系。在 Bootstrap 中,“父”要标记上 ,“子”要标记上 。 稍复杂些的: 阅读全文
posted @ 2017-03-16 14:47 Hi!张宝 阅读(828) 评论(0) 推荐(0) 编辑
摘要: 一、简介 Nav 指导航页。 "这里" 是一个线上例子。 使用了 的标签就是一个 Nav。下面举例。 {注意} 记住,下面的几种导航页都依赖 。 二、导航页 添加 。 三、胶囊式导航页 将 换为 。 四、堆叠胶囊式导航页 添加 . 五、禁用的链接 在 .disabled`。 {注意} 只改变 `` 阅读全文
posted @ 2017-03-16 13:28 Hi!张宝 阅读(1307) 评论(0) 推荐(0) 编辑
摘要: 一、classList API 是什么 1. 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 属性值。 2. 属性是一个只读的类数组对象,“实时”地代表了元素的类名集合。 3. 对象上定义了 6 个实用的操作 属性值的方法。 二、 对象上的属性和方法 属性: :返回当前类列表中类 阅读全文
posted @ 2017-03-16 12:17 Hi!张宝 阅读(882) 评论(0) 推荐(0) 编辑
摘要: 一、简介 Dropdown 就是下拉列表, "这里" 有一个例子。 Dropdown 的完整代码如下: {提示} 1. 这个类不是必须的,不过稍后讲到 Dropdown 的 JavaScript 代码调用时要使用它,所以为了方便,先在这里一并写入。 2. 表示 Dropdown 的容器,可根据具体情 阅读全文
posted @ 2017-03-15 13:17 Hi!张宝 阅读(6874) 评论(2) 推荐(2) 编辑
摘要: 一、简介 Modal 就是弹出框, "这里" 有一个例子。 Modal 的完整代码如下: 默认的 Modal 是隐藏的,让它出现有两种方式: 1. 标签 API 2. JavaScript 代码 二、通过标签 API Modal 的代码已经有了,接下来我们要为 Modal 设置 并且添加一个按钮,像 阅读全文
posted @ 2017-03-15 11:16 Hi!张宝 阅读(340) 评论(0) 推荐(0) 编辑
摘要: 介绍 使用 Bootstrap v3.3.7 时,需要引入三个脚本文件。 1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 2. http://lib.sinaapp.com/js/jquery/1.12 阅读全文
posted @ 2017-03-14 17:28 Hi!张宝 阅读(2439) 评论(0) 推荐(0) 编辑
摘要: 读《文学回忆录》时, "木心对杨潮观的评价" 很高。 "《吟风阁杂剧》" (杨潮观著,上海古籍出版社,1983 年)收录了《偷桃捉住东方朔》,173 页,竖版排版。 下面是《偷桃捉住东方朔》的节引: 《吟风阁杂剧》电子书下载地址: "http://pan.baidu.com/s/1slF8Z9r" 阅读全文
posted @ 2017-01-05 16:25 Hi!张宝 阅读(1658) 评论(1) 推荐(1) 编辑
摘要: 这份命令清单并不完善,后期会根据使用情况再进行更改。 操作分支项目 1 下载仓库的一个分支(baooab patch 1)的代码 git clone b baooab patch 1 https://github.com/baooab/docs.git 2 查看当前分支 git branch 3 修 阅读全文
posted @ 2017-01-05 16:21 Hi!张宝 阅读(205) 评论(0) 推荐(0) 编辑