Bulma
Bulma
程序员·小李
不知道要干什么的时候,停一停,想一想;知道想要什么的时候,努努力,拼一拼。
展开
-
Bulma概述
开始使用Bulma1.使用npmnpm install bulma//或者cnpm install bulma2.使用CDN https://cdnjs.com/libraries/bulma3.下载源文件 https://github.com/jgthms/bulma/tree/master/css4.如果使用图标,请附加Font Awesome...原创 2018-12-26 11:23:40 · 1560 阅读 · 0 评论 -
Bulma 表单
1. 准备工作将遵循html5规范预定加载js及css文件。2. 在body中添加标签在body中添加了一个section,section是带有一个hero类的,设置了颜色is-primart,设置了高度,is-fullheight中间的div就是hero的主体了,hero-body,他可以让内容垂直居中, 效果如图:3. 让登录部分水平...原创 2019-05-12 13:43:37 · 734 阅读 · 0 评论 -
Bulma修饰符
大多数元素都有可选的样式,添加修饰即可使用1. 变成Button样式:<a class="button"> Button</a>2. 修改颜色:<a class="button is-primary"> Button</a><a class="button is-link"> Button...原创 2018-12-26 11:55:15 · 567 阅读 · 0 评论 -
Bulma 图标
基本用法<span class="icon"> <i class="fas fa-home"></i></span>不同颜色的图标<span class="icon has-text-info"> <i class="fas fa-info-circle"></i>&...原创 2019-05-18 22:55:14 · 886 阅读 · 0 评论 -
Bulma表单
所有的表单应该在control类里包裹,表单有多个控件使用field作为容器.label .input .textarea .select .checkbox .radio .button .help<div class="field"> <label class="label">Name</label> <div cla...原创 2018-12-26 17:57:15 · 1052 阅读 · 0 评论 -
Bulma简介
1. 列排布<div class="columns"> <div class="column"> </div> ` ` `</div>columns代表一行的列布局,每个column代表一列,对100%进行平均划分。以上将会均分为三列2. 阅读起来也是很方...原创 2019-05-12 12:52:28 · 437 阅读 · 0 评论 -
Bulma列
简单创建响应式多列(均分)增加一个 columns 作为容器 根据你的需要在其中添加更多的 column 元素<div class="columns"> <div class="column"> 第一列 </div> <div class="column"> 第二列 </div> <...原创 2018-12-26 14:21:04 · 456 阅读 · 0 评论 -
Bulma布局
容器使用container类将内容居中显示,一般用于:.navbar .hero .section .footer<div class="container"> <div class="notification"> This container is <strong>centered</strong> on desk...原创 2018-12-26 15:11:03 · 1561 阅读 · 0 评论 -
Bulma元素
Box(包裹其他元素)是一个类似于盒子的容器,带有阴影、边框、圆角等特点。<div class="box"> <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <img src="...原创 2018-12-26 22:42:06 · 579 阅读 · 0 评论 -
Bulma组件
面包屑导航(breadcrumb)使用breadcrumb标记nav,组成ul列表。当前页使用is-active标记<nav class="breadcrumb" aria-label="breadcrumbs"> <ul> <li><a href="#">Bulma</a></li> ...原创 2018-12-27 10:27:44 · 1082 阅读 · 0 评论