标签: bulma
通过NPM安装bulma后,如何在我的项目中引用它
我通过以下方式在项目中引入了bulma:
$ npm install bulma
之后,我如何在我的页面中引用它.我真的不知道如何使用npm,所以请你指导我.我是否必须在我的js中提及它:
import bulma from 'bulma'或者要求它,我不知道我的文件在哪里.这意味着我不知道他们在哪里.
推荐指数
解决办法
查看次数
布尔玛:你如何将一个按钮放在盒子中心？
<div class="box">
<button class="button">Center me</button>
</div>
<button class="is-center"> 不管用.
推荐指数
解决办法
查看次数
如何让一个bulma按钮全宽？
我使用的是bulma@0.3.0 css框架
我在表格中提交按钮如下
...
<!--Submit button-->
<div class="columns">
<div class="column is-full">
<button type="submit" class="button is-primary">
<span class="icon"><i class="fa fa-sign-in"></i></span>
<span>Login</span>
</button>
</div>
</div>
...
结果如下
如何让按钮全宽？
推荐指数
解决办法
查看次数
如何在Bulma中垂直居中元素？
如何将其垂直居中<div class="columns is-vcentered">于包围它的红色部分？
我应该在这里删除或添加一些类来改进这些代码吗？请建议我.谢谢!
我是CSS框架的新手,从未尝试过Bootstrap而是选择了Bulma.
<section id="eyes" class="section">
<div class="container">
<div class="columns is-vcentered">
<div class="column">
<h1>Eyes on what matters</h1>
<p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
</div>
<div class="column">
<img class="image" src="img/roll.jpg" alt="">
</div>
</div>
</div>
</section>
在CSS中除了着色元素,我只做了这个:
section {
height: 70vh;
}
推荐指数
解决办法
查看次数
如何使用Bulma CSS制作瓷砖包装
我正在使用带有Rails应用程序的Bulma CSS框架.我有很长的项目列表,并希望在瓷砖中显示它们.然而,瓷砖从屏幕上移开而不是包裹到下一行.
该布尔玛文件并没有解决这个问题.由于我是从可变长度列表中动态创建切片,因此在文档中描述的显式嵌套并不那么容易,我宁愿将其干净地包装到下一行.
这是我的代码基本上是这样的:
<div class="tile is-ancestor">
<div class="tile is-parent">
<% @my_list.each do |item| %>
<div class="tile is-child box">
<p><%= item %></p>
</div>
<% end %>
</div>
</div>
由于Bulma基于flexbox,我认为有一些相当于flex-wrap: wrap;,但我还没有找到这个选项.
更新:可以将其添加style flex-wrap: wrap;到父容器,但是是否有Bulma集成的类标志？
推荐指数
解决办法
查看次数
我正在尝试在bulma css上使用汉堡菜单,但它不起作用.怎么了？
我是bulma css http://bulma.io/的新手.
我正在尝试为移动用户使用汉堡包菜单.我只是按照这个页面上的说明操作:http://bulma.io/documentation/components/nav/
但它不起作用.我应该添加什么？
实际上,我可以看到汉堡包菜单,但是当我点击它时它不起作用.
谢谢.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>test</title>
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section class="hero is-fullheight is-primary is-bold">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item" href="/">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item" href="/about">
About
</a>
<a class="nav-item" href="/path">
Path
</a> …推荐指数
解决办法
查看次数
布尔玛的中心图像
有没有办法在卡片内水平居中图像？
我有以下内容
<div class='column is-one-quarter has-text-centered'>
<div class='card equal-height'>
<div class='card-content'>
<figure class='image is-64x64'><img src='...'></figure>
</div>
</div>
</div>
而我无法使图像居中.我试图is-centered将这两个添加到图和父div,但没有任何变化.
谢谢.
推荐指数
解决办法
查看次数
Bulma.io fullheight英雄背景
试图将背景图像添加到bulma.io英雄部分,但它不起作用!下面是代码:
<div>
<section class="hero is-primary is-fullheight header-image">
<!-- Hero header: will stick at the top -->
<div class="hero-head">
<header class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="http://bulma.io">
<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger" v-on:click="showNav = !showNav" v-bind:class="{ 'is-active' : showNav }">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" v-bind:class="{ 'is-active' : showNav }">
<!-- navbar start, navbar end -->
<div class="navbar-end">
<a class="navbar-item" href="/about">About</a>
<a class="navbar-item" href="/path">Path</a>
<a class="navbar-item" href="/blog">Blog</a>
</div>
</div>
</header> …推荐指数
解决办法
查看次数
如何在 Bulma CSS 中为响应式设计设置基本字体大小
通过Bulma.io 文档，我找不到如何为响应式设计设置基本字体大小。
根据这个关于设置初始变量的部分，我们可以设置类的初始值$size-1等。但是，我想为响应式设计设置非常基本的字体大小。即当屏幕尺寸为 980 像素时，基本字体大小应为 12 像素，而不是标准的 16 像素。因为上面提到的字体类 '$size-1' 是rem，它们也会自动调整大小。
所以，我的问题是，是否可以在 Bulma 中为响应式设计设置基本字体大小？或者我必须$size-1手动更改类的大小等。
谢谢
推荐指数
解决办法
查看次数
如何为布尔玛添加自定义颜色？
我找到了这段代码：
$custom-colors: null !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
如何扩展与每种颜色相关的颜色和类别列表？很明显，我需要$custom-colors在包含 Bulma 之前定义一个变量，但不清楚 $custom-colors 应该是什么格式？我没有找到一个例子或很好的描述。有什么帮助吗？
推荐指数
解决办法
查看次数