Bulma教程

Bulma是一个轻量级、可配置的CSS框架,完全基于Flexbox。Flexbox是一个相对较新的CSS规范,它得到了浏览器的良好支持。

JavaScript中应用Bulma

obama阅读(837)评论(0)赞(1)

JavaScript中应用Bulma,Bulma框架的实现没有用到JavaScript。本文介绍如何使用原生JavaScript控制之前开发的管理页面的不同组件,内容涵盖管理页面中以下组件的使用: 问题报告模态框; 移动端toggle菜单组...

Bulma表格|酷客网

Bulma表格

obama阅读(1069)评论(0)赞(1)

Bulma表格,实现客户表格,为了保证页面简洁,每位客户将包含如下字段: 姓名; 邮箱地址; 联系地址,包含街道名称、邮编、城市和国家(地区)信息; 客户订单。 因为不涉及图片展示,所以这里使用Bulma的<table>来更好地...

Bulma面包屑导航|酷客网

Bulma面包屑导航

obama阅读(744)评论(0)赞(2)

Bulma面包屑导航,点击coolcou.html的“Books”按钮,就会跳转到books.html页面,因此可以把后者看作前者的一个子页面。要想向用户强调该层次结构,可以显示一个Bulma面包屑,如图所示。 <nav class=...

Bulma 分页|酷客网

Bulma 分页

obama阅读(1367)评论(0)赞(2)

Bulma 分页,因为图书数目是不固定的,所以很有可能最后超过6本(或12本,若想每页展示12本书)。对于一页展示不全的情况,可以使用分页组件来显示任意多本书。 在包含is-multiline类的元素后面添加如下代码,效果如图: <n...

Bulma media组件|酷客网

Bulma media组件

obama阅读(1054)评论(0)赞(1)

Bulma 媒体(media)组件,box类具有边框和阴影效果,可从视觉上区分各项,适用于重复列表项。 <article class="box"> <div class="media"> <aside clas...

Bulma图书栅格|酷客网

Bulma图书栅格

obama阅读(920)评论(0)赞(1)

Bulma图书栅格,要显示出版商出售的所有图书,需要定义一个包含6个图书条目的二维栅格。每个栅格将包括: 图书封面; 书名; 价格; 数据元数据(页码、ISBN等); 编辑和删除图书的链接。 要创建这6本书的栅格,先要创建标准的column...

Bulma工具栏|酷客网

Bulma工具栏

obama阅读(757)评论(0)赞(1)

Bulma工具栏,水平工具栏可以为用户提供更多操作,为了让组件在同一行中渲染,可以使用level组件。 在布局的第2列中创建主体内容,添加<h1>标签并加上is-title类,该类会使得<h1>标签的文本加粗,字号增...

Bulma侧边栏菜单|酷客网

Bulma侧边栏菜单

obama阅读(1408)评论(0)赞(1)

Bulma侧边栏菜单,菜单组件和导航栏组件的用法非常类似,包含menu容器、menu-list(菜单子项)等。 Bulma的菜单组件可用于编写任何类型的垂直导航。下面编写包含Dashboard、Books、Customers和Orders的...

Bulma页面主区域

obama阅读(920)评论(0)赞(1)

Bulma页面主区域,所有管理页面都会采用两列布局,左边展示所有页面共用的侧边栏菜单,右边是当前页面的内容区域。 在导航栏之后添加Bulma的section标签作为主内容区域的容器。 <section class="section"&...

Bulma创建导航栏|酷客网

Bulma创建导航栏

obama阅读(1383)评论(0)赞(1)

Bulma创建导航栏,Bulma提供了灵活的响应式导航组件,可用于展示如下内容: 公司logo,也是可跳转到首页的超链接; 导航的移动端图标; 品牌理念; 用户名; 下拉菜单,包含用户信息、报告问题的按钮和退出登录的按钮。 <nav ...

Bulma教程