Bulma限制？
Bulma限制是指Bulma这个CSS框架在使用过程中的一些限制和注意事项。Bulma是一个基于Flexbox的现代化CSS框架，用于快速构建响应式网页和Web应用程序。以下是关于Bulma限制的一些详细信息：
- 兼容性：Bulma在大多数现代浏览器上都能正常工作，但在一些旧版本的浏览器上可能存在兼容性问题。因此，在使用Bulma时，建议使用最新版本的浏览器以获得最佳的兼容性和体验。
- 自定义主题：Bulma提供了一些默认的主题样式，但如果需要自定义主题，可能需要进行一些额外的CSS编码工作。可以通过覆盖Bulma的默认样式或使用Sass进行自定义主题开发。
- JavaScript依赖：Bulma本身是一个纯CSS框架，不包含任何JavaScript组件。如果需要使用一些交互功能，如下拉菜单、模态框等，需要额外引入Bulma提供的JavaScript插件或自行编写JavaScript代码。
- 响应式设计：Bulma是一个响应式框架，可以轻松地构建适应不同屏幕尺寸的网页和应用程序。但在使用过程中，需要注意不同屏幕尺寸下的布局和样式调整，以确保页面在各种设备上都能正常显示和使用。
- 浏览器缩放：由于Bulma使用了Flexbox布局，当浏览器窗口缩放时，页面中的元素可能会发生一些布局变化。在设计和开发过程中，需要进行充分的测试和调整，以确保页面在不同缩放级别下的布局和样式都能正常展示。
总结起来，Bulma是一个功能强大且易于使用的CSS框架，但在使用过程中需要注意兼容性、自定义主题、JavaScript依赖、响应式设计和浏览器缩放等方面的限制和注意事项。对于想要使用Bulma构建网页和应用程序的开发者，可以参考腾讯云的云开发平台SCF（Serverless Cloud Function）来进行部署和托管，以实现更高效的开发和部署流程。详情请参考腾讯云SCF产品介绍：腾讯云SCF。
相关·内容
我正在尝试使用bulma css作为我的角度项目。在用npm i --save bulma安装bulma之后，我尝试将bulma包含在我的styles.css文件中
@import "@bulma/css/bulma.css";
我收到一个错误，说明“bulma.css”文件找不到。
我该怎么解决呢？顺便说一下，我检查了"nodex_modules“文件夹，看看是否正确地安装了bulma，并且它就在那里。
浏览 3提问于2020-05-26得票数 0
回答已采纳
3回答
我收到一个错误，安装Bulma后，通过浏览器检查器可以看到。
我有角-10。
我所采取的步骤是
npm -i bulma.bulma目录位于node_modules/bulma中。
@creativebulma/bulma-collapsible npm i -D
在angular.json中加载javascript
"styles"：“src/styes.css”，"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"，“./node_node/bulma/css/bulm
浏览 11提问于2020-07-23得票数 1
回答已采纳
1回答
我这样导入了我想要的元素
@import "../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../node_modules/bulma/sass/base/_all.sass";
@import "../../node_modules/bulma/sass/elements/button.sass";
@import "../../node_modules/bulma/sass/elements/container.sass";
@import
浏览 4提问于2022-01-02得票数 2
我想添加'bulma-helpers‘到我的HTML没有npm和纱线，所以我下载了文件( css /bulma-helpers.css，bulma-helpers.css.map，bulma-helpers.min.css)并放在我的css文件夹中。 我使用了链接标签。 <link rel="stylesheet" href="css/bulma-helpers.min.css"> 但是，我不能在bulma-helpers中使用任何类。 如何在没有npm和纱线的情况下添加它？ (链接：https://github.com/jmaczan/b
浏览 17提问于2019-09-28得票数 0
回答已采纳
我在一个Angular 8项目中使用了Bulma.io，并使用以下命令安装了Bulma：npm install bulma。之后，我在我的angular.json文件中包含了这些样式：
"styles": [
"src/styles.css",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths":
"node_modules",
浏览 21提问于2019-08-13得票数 3
我已经本地化了Bulma主题，这些说明非常简单，比如在主目录(httpdocs)下创建一个名为“库”的新目录，并将源文件放入其中。这没问题。
我一直试图创造一个子主题，我命名为"bulma_sub“。
bulma_sub位于themes的文件夹下(在该文件夹中，基本主题为bulma )。
bulma_sub文件夹中有三个文件，设置如下。
bulma_sub.info.
name: bulma_sub
description: 'subtheme based on bulma'
type: theme
base theme: bulma
core_version_requ
浏览 0提问于2020-11-22得票数 0
我有这样的代码：
// My Theme Colors
$green: #45CB85;
// Bulma Overrides
$primary: $green;
$navbar-item-hover-background-color: $primary-light;
$navbar-item-hover-color: $primary-dark;
// Import Bulma
@import "bulma/utilities/_all"; // includes the functions file
@import "bulma/base/_all";
浏览 12提问于2022-01-27得票数 0
4回答
我想定制Bulma。我读了文档，但我无法理解。
npm安装浮筒
cd节点模块/bulma
mv bulma.sass bulma.sass.org
vi bulma.sass
粘贴设置变量代码并保存命名为bulma.sass
npm运行构建程序
和构建错误。
请教我怎么做？
浏览 8提问于2017-11-15得票数 3
3回答
styles.scss
@import 'packages/bulma.sass';
bulma.sass
@charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/components/_all"
@im
浏览 1提问于2018-07-10得票数 6
回答已采纳
2回答
我是Bulma Framework的新手。我已经开始在我的HTML文件中执行以下操作。我还没有安装任何软件包。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<section cl
浏览 0提问于2018-07-26得票数 1
1回答
当我的代码被编译时，变量($tooltip-背景颜色，$tooltip-color)不会改变。这些值仍然是默认值。
HTML代码：
<div class="has-tooltip-multiline has-tooltip-top"
[ngClass]="{'dark-theme': darkTheme === true, 'light-theme': darkTheme !== true}"
[attr.data-tooltip]="tooltipText">
{{Title}
浏览 4提问于2020-10-30得票数 1
回答已采纳
我试图在我的角项目中安装，但没有成功。
以下是我所做的步骤：
用npm i bulma-tagsinput安装软件包
在我的bulma-tagsinput.min.js中声明angular.json
"scripts": ["./node_modules/bulma-tagsinput/dist/js/bulma-tagsinput.min.js"]
在我的main.ts中，导入扩展并运行附加命令
import * as bulmaTagsinput from 'bulma-tagsinput';
bulmaTags
浏览 2提问于2019-05-06得票数 0
回答已采纳
1回答
我有一个运行bulma框架的rails 6应用程序。
Bulma随yarn一起安装，并随app/assets/stylesheets/application.scss导入
工作正常！
我用纱线安装了bulma-extensions，并尝试了不同的方法，但都无济于事……
按照文档导入：
@import 'bulma/bulma';
@import '~bulma-extensions/bulma-switch';
或
@import 'bulma/bulma';
@import '~bulma-switch';
两者都给出了一个来自
浏览 1提问于2020-12-16得票数 0
<div class="column">
<button class="button is-primary has-tooltip-multiline" data-tooltip="Tooltip with a long Text. So we use has-tooltip-multiline modifier to force multiline display.">Multiline Tooltip</button>
</div>
Under _sass/main.scss:
@impor
浏览 3提问于2020-03-25得票数 1
1回答
我在vue cli 3项目中使用bulma，并且在index.js下包含了bulma导入，如下所示 import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
require('@/assets/main.scss');<< This contains a single line @import '~bulma'; 然后，我在各个组件的style标记中指定了css。加载页面时，可以看
浏览 54提问于2021-04-24得票数 0
回答已采纳
我有一个Vus.js项目，我想添加bulma框架和/或buefy。
我运行了npm install bulma和npm install buefy
在main.js中，我有：
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
在App.vue中，我还尝试使用以下命令加载bulma：
<style lang="css">
@import '../node_modules/bulma/css/bulma.css';
在assets
浏览 0提问于2018-12-23得票数 0
这个问题可能非常愚蠢和重复，但我找不到一个有效的解决方案。如果这个问题已经在其他地方得到了回答，我很抱歉。
我想要做的是在一个项目中使用2个css框架。
我必须使用语义作为我的主要css框架-这必须是全球可访问的。例如，具有"ui grid“类的元素应该使用semanticUI的"ui grid”行为。
但是，我想使用Bulma作为我的辅助框架。为了避免冲突，我想给所有Bulma类加上一个静态前缀。例如，bulma的"modal“类将可以作为"bulma-modal”访问。如下所示：
.&bulma {
@import '~bulma
浏览 0提问于2016-10-18得票数 8
我希望有人能给我一个提示，如何调查这个问题。 在Vue项目中，buefy包含在main.js中，如下所示： import Vue from 'vue'
import Buefy from 'buefy'
import './style.scss'
Vue.use(Buefy)
import Client from './client.vue'
let vm = new Vue({
el: '#app',
render: h => h(Client)
}) ，其中style.css导
浏览 20提问于2020-09-28得票数 0
2回答
在使用Nuxt和Buefy时，如何自定义Bulma变量？
看起来Nuxt在加载我的Sass vars之前正在加载Bulma/Buefy，在那里我设置了我的自定义值。
nuxt.config.js
export default {
target: 'static',
head: {},
css: [
'~/assets/bulma-vars.sass'
],
plugins: [],
components: true,
buildModules: [
'@nuxt/typescript-build',
浏览 2提问于2021-07-16得票数 1
1回答
我有非常简单的webpack项目，我现在也想使用，一个css框架。
我通过npm i bulma安装了这个包，并试图将它包含在我的app.js-file中，但没有成功：
import bulma from '~bulma/bulma.sass';
我还尝试使用一个特定的sass部件，但它也不起作用：
import bulma from '~bulma/sass/base/_all';
你能帮我把这件事做好吗?或者给我指明正确的方向？
浏览 4提问于2017-08-16得票数 3
回答已采纳
我正在尝试将导入到我的GatsbyJS项目中，但我在使其正常工作方面遇到了很多困难。我正在使用同样带有Helmet的。在头盔组件中，我插入脚本和样式标记，如下所示：
<link href="bulma-carousel/dist/css/bulma-carousel.min.css" rel="stylesheet" />
<script src="bulma-carousel/dist/js/bulma-carousel.min.js"></script>
当运行yarn add bulma-carousel
浏览 1提问于2019-07-13得票数 1
我正在使用bulma-calendar，我想让日历水平居中。我想我几乎尝试了所有以.has-text为中心、.is为中心、空列为辅助的组合……不知何故，我做不到这一点。如果能给点提示我会很感激的。谢谢 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0&
浏览 3提问于2020-11-10得票数 0
回答已采纳
我使用bulma作为我的主页的CSS框架。然而，有一个插件是使用引导和引导可编辑的，所以我正在寻找一个解决方案，我可以添加bootstrap.css和引导编辑. can而不破坏我的布局。
<html>
<body>
<!-- header designed with bulma -->
<!-- left column menu designed with bulma -->
<div class="column>
<table class="table-responsive">
...
</
浏览 4提问于2021-01-30得票数 0
我使用的是带有reactjs的webpack，我确实设置了sass加载程序，但我想知道我导入文件的方式是否正确(它可以工作，但我只是想知道这样做是否是最好的做法)
import hamburger from "../../node_modules/hamburgers/dist/hamburgers.css";
import bulma from "../../node_modules/bulma/bulma";
module: {
rules: [
{
test: /\.js$/,
exclude: /
浏览 1提问于2018-06-08得票数 1
3回答
最近我尝试使用nuxt很长一段时间了，我发现nuxt不允许在项目的制作过程中安装bulma，但是我正在尝试手动导入，用npm安装bulma，并在nuxt.config调用它。
modules: [
'@nuxtjs/axios',
'@nuxtjs/style-resources'
],
axios: {},
build: {},
styleResources:{
scss: ['./assets/main.scss']
}
但是这个发送错误屏幕：
我试图为这个问题找到一
浏览 5提问于2021-02-13得票数 0
我正在尝试使用ng serve命令启动角。
我立刻遇到了下面的问题
在多个./src/penes.scss./node_ Module /bulma/css/bulma.css模块中未找到错误:错误:无法解析C：\client\ngpop中的“C：\client\node_modules\bulma\css\bulma.css”
我可以确认bulma.css存在于该位置。
任何想法
浏览 2提问于2019-02-07得票数 3
回答已采纳
1回答
我用Bulma做造型
下面是我尝试让我的桌面响应的代码(all.sass)，但都失败了：
@import "~bulma"
.post-letter
transform: translate(0,-110%)
@include tablet
transform: translate(0,-180%)
或
.post-letter
transform: translate(0,-110%)
@import "~bulma"
+tablet-only
transform: tran
浏览 5提问于2020-04-12得票数 2
嘿，大家都希望一切都好。我似乎无法让Bulma正确地导入NextJS，并允许我在导入任何实用程序时修改变量。不过，我肯定我做错了什么。以下是我在我的globals.sass中拥有的内容：
@import "~bulma/sass/utilities/_all"
$sand: #efb396
$info: $sand
@import "~bulma/bulma.sass"
因此，使用这段代码，就不会有任何变量变化。但如果我去掉第一行：
$sand: #efb396
$info: $sand
@import "~bulma/bulma.sass"
浏览 5提问于2021-03-06得票数 2
回答已采纳
3回答
在一个新的laravel项目中，我使用npm install bulma-calendar --save-dev安装了bulma-calendar。在我的app.scss文件中，我导入bulma和bulma-calendar，如下所示：
@import "~bulma";
@import "~bulma-calendar";
在文件顶部的bootstrap.js文件中，我导入了缩小的js文件：
import bulmaCalendar from 'bulma-calendar/dist/bulma-calendar.min.js'
在它的底部，我
浏览 5提问于2018-02-20得票数 2
当我在VSCode中使用bulma时，它没有给出任何有关bulma类名的建议(自动完成)。当我还是一个新手的时候，我发现很难记住一些bulma类的名字。
我正在使用Vue-CLI3，并导入bulma css框架，就像main.js中的flow代码：
import 'bulma/css/bulma.min.css'
那么，如何配置VSCode来给出聪明的类名建议(或者像Bootstrap这样的其他CSS框架)呢？
谢谢。
浏览 14提问于2018-12-13得票数 1
回答已采纳
我刚刚开始使用Bulma ()，并希望这个调整到导航条的高度，默认情况下它的大小是3.25rem (16 it基本字体大小)，但它不是。
我试着调整图像大小到600 px140 it没有运气，我搜索了很多，但仍然无法修复它。然而，如果我使用这个例子，即600 it x 140 it，它能工作吗？下面是使用bulma图像的代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<nav cla
浏览 0提问于2018-10-11得票数 5
回答已采纳
1回答
当鼠标指针在项目上时，我试图更改Bulma变量$ navbar - item -悬浮背景色，以更改我的Bulma导航栏中某项的背景色，但它不起作用，颜色仍然相同--这是我的scss文件。
@charset "utf-8"
$blue1: #0070c0;
$blue2: #00259e;
$blue3: #285aff;
//custom Bulma color
$info: $blue2;
$primary: $blue3;
$lime: #05F554;
$navbar-item-hover-background-color: $lime;
@import "
浏览 1提问于2021-12-23得票数 1
这是我的密码：
<template>
<div class="pageloader is-active">
<span class="title">Pageloader</span>
</div>
</template>
<script>
import 'bulma-extensions/bulma-pageloader/dist/css/bulma-pageloader.min.css';
export default{
浏览 1提问于2019-05-07得票数 0
回答已采纳
1回答
我正在尝试更新Bulma中的主字体系列的变量，但是似乎什么都没有发生。到目前为止，我做的是：
导入初始变量和函数文件。
用谷歌字体导入我想要的字体
设置一个名为$family-serif: "Grandstander", serif;的新变量
更新$family-primary以等于$family-serif的值；
用@import "../assets/bulma/bulma.sass";导入Bulma
源代码可以在：上找到，我在下面包含了代码片段：
@charset "utf-8";
@import url(
浏览 2提问于2020-10-24得票数 6
我用的是Nuxt.js和Bulma。我正在使用Bulma标签()进行导航。
我想插入Bulma dropdown()。但是它不能在Tabs中间工作。
我知道谁想使用Bulma dropdown需要使用javascript，所以我使用它。但它不起作用。
我怎么才能修复它？
浏览 2提问于2018-08-17得票数 0
我正在开发Rails6和Bulma carousel扩展，在返回包含js代码的页面时遇到问题。
我的app/javascripts/packs/application.js
require("turbolinks").start();
window.BulmaCarousel = require('bulma-extensions/bulma-carousel/dist/js/bulma-carousel');
我的html
<div class="hero-carousel" id="carousel-photo">
浏览 21提问于2019-07-19得票数 0
1回答
我正在学习Sass并尝试自定义Bulma CSS框架。我正试着把它弄成紫色，但它不管用。
我已经运行npm并安装了Bulma和节点-sass。
我的sass文件：-
@import "node_modules/bulma/bulma";
$purple: #8A4D76;
$primary: $purple;
body {
background: aquamarine;
margin: 0;
}
package.json文件的脚本部分：-
"scripts": {
"test": "echo \"Error:
浏览 2提问于2021-08-12得票数 1
回答已采纳
我的assets文件夹中有一个main.scss文件，我用它来覆盖bulma变量。我通过nuxt-config文件使这个文件全局可用。
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
//override some variables
$primary: #FF5B5B;
$light: #f1f1f1;
@import '~bulma';
$section-height: calc(100vh - #
浏览 0提问于2018-06-09得票数 2
Bulma select dropdown不会在Safari浏览器上显示下拉菜单；甚至在反复点击select dropdown时会导致Safari冻结。我可以在macOS版本13.0.1的Safari版本10.14.6上重现这个问题。这个问题出现在任何使用Bulma select的网站上，甚至在Bulma官方网站上也是如此：https://bulma.io/documentation/form/select/这是Bulma/Safari吗？有任何解决方法/解决方案吗？
浏览 23提问于2019-10-03得票数 0
1回答
我需要一个Bulma类的参考，其中列出了每个类，并简要解释了它的使用，也许是一个指向Bulma文档的指针。
有一个吗？还是有一种有效的方法来搜索Bulma网站？
我尝试过使用block class site:bulma.io/进行“站点搜索”，它只带我到响应页面，但没有详细解释。
参考列表将是非常有用的！
浏览 3提问于2017-09-08得票数 0
回答已采纳
我刚刚开始学习reactjs和bulma.css。我正试图使用bulma的柔性盒制作一个<footer>，以将其固定在页面底部，因为我希望避免编写自己的css规则。
我已经使用npm安装了bulma，并在bulma.css中导入了index.js，如下所示
import "bulma/css/bulma.css";
但是我下面的代码仍然让<footer>卡在标题下面。
<div className='container'>
<header className='has-text-centered'&g
浏览 1提问于2022-03-17得票数 0
回答已采纳
我试图简单地改变中的“is-主”类的颜色。我试图编写一个scss文件来更改值，而不通过npm安装bulma。我试图通过使用cloudfare链接导入，这可能吗？
这是我的scss文件：
@import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4./css/bulma.cssbulma/sass/utilities/initial-variables";
$tech-blue : #2c3e50;
$primary : $tech-blue;
@import "https://cdnjs.cloudflare.c
浏览 0提问于2017-08-10得票数 0
1回答
我不能在Heroku上运行bulma，npm不是Heroku命令。
我应该在Heroku上输入什么来做npm install bulma呢？我需要用纱线吗？
brew install yarn，yarn add bulma在Heroku上也不工作。
下面是我看到的错误：
SyntaxError:要导入、找不到或不可读的文件:bulma/sass/实用程序/_all.sass。
浏览 0提问于2018-09-24得票数 0
3回答
我尝试通过Nuxt组件中的一个挂载函数来更改$navbar-height的值。到目前为止，除了覆盖Bulma变量之外，一切都正常
我在Nuxt配置中添加了Bulma：
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios',
// Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
'@nuxtjs/bulma',
浏览 8提问于2018-12-11得票数 1
我在Angular assets文件夹中安装了Bulma scss，然后将其导入到我的styles.scss中 @import "./assets/bulma-scss/bulma.scss";
@import "./assets/bulma-scss/utilities/initial-variables.scss";
@import "./assets/bulma-scss/utilities/functions.scss";
$primary: red !default;
body {
padding: 50px;
} 然后我从
浏览 12提问于2021-08-18得票数 0
回答已采纳
目前，我导入scss文件的方式如下：
@import './node_modules/bulma/bulma';
然而，在Laravel Mix中，我了解到我可以像这样导入文件，而不需要指定./node_modules
@import '~bulma/bulma';
不管怎样，我可以在ParcelJS中做这件事吗？
浏览 8提问于2017-12-28得票数 8
1回答
是否有一种“纯Bulma方式”(没有自定义css)来对齐桌面上遗留的元素，但将其集中在小于iPad的设备上呢？我想避免任何自定义css，以学习正确使用Bulma。
我尝试过使用级别，它很好地集中在较小的设备上，但在桌面上不对齐，奇怪的是，它在页脚的右侧按预期工作：
<footer class="section footer is-widescreen">
<div class="container">
<div class="columns">
<div class=&#
浏览 2提问于2021-03-20得票数 1
回答已采纳
我试图在我的终端上运行gulp，但是我得到了这个断言错误。我已经卸载了node和NPM，并使用brew重新安装。npm版本为6.13.4节点版本v12.14.1 我的系统是MacOS Catalina 10.15.2 终端错误 gulp build
assert.js:374
throw err;
^
AssertionError [ERR_ASSERTION]: Task never defined: build
at getFunction (/Users/Designernaruka/Punchh/Practise-Task/bulma/bulma-npm/n
浏览 198提问于2020-01-28得票数 0
回答已采纳
2回答
我尝试自定义bulma的默认颜色。我已经安装了node-sass，它看起来正在工作，并且在我的根scss文件中，我编写了脚本
@import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
@import '../node_modules/bulma/sass
浏览 0提问于2017-09-28得票数 3
我知道我可以通过以下方式获得我的直接依赖项的列表
npm ls --depth=0 --only=production
它会产生如下所示的结果
my-app@1.1.0 /code/my-app
├── autosize@4.0.1
├── bluebird@3.5.1
├── blueimp-md5@2.10.0
├── buefy@0.6.5
├── bulma@0.6.2
├── bulma-badge@1.0.1
├── bulma-switch@0.1.12
├── d3-scale-chromatic@1.2.0
├── date-fns@1.29.0
... etc ...
有
浏览 0提问于2018-04-03得票数 8
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
