Bulma教程

2020-09-18obama阅读(1043)评论(0)赞(1)

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

2020-09-17obama阅读(720)评论(0)赞(2)

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

2020-09-17obama阅读(1339)评论(0)赞(2)

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

2020-09-17obama阅读(1028)评论(0)赞(1)

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

2020-09-17obama阅读(897)评论(0)赞(1)

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

2020-09-10obama阅读(729)评论(0)赞(1)

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

2020-09-10obama阅读(1385)评论(0)赞(1)

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

2020-09-09obama阅读(1360)评论(0)赞(1)

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