bulma 相关问题

似乎无法创建反向动画来关闭菜单

我确信这个论坛上有很多人会指责我在使用 Alpine.JS 制作任何东西时不简单地使用 Tailwind.CSS，让自己的生活变得困难，但是这样做的目的

使用 Alpine.JS 的 CSS 动画

我确信这个论坛上有很多人会指责我在使用 Alpine.JS 制作任何东西时不简单地使用 Tailwind.CSS，让自己的生活变得困难，但是这样做的目的

Rails 7 importmap 与 bulma 和 jquery

我在让 Rails 7 importmaps 与 jquery 和 bulma 很好地配合时遇到了麻烦。 配置/导入映射.rb： 引脚“应用程序”，预加载：true 将“@hotwired/turbo-rails”固定到：“...

如何将 css 样式应用于 Astro 中的一个组件而不影响导入该组件的索引？

我第一次在 Astro 中开发一个测试项目，我在导入索引方面遇到了问题，基本上我想显示一个推文列表，就像 bulma 框架的这个例子一样： 前...

Bulma CSS 在移动视口上无法正常工作

发生什么事了？ 当我尝试下面的官方演示代码时，Bulma 在移动设备上显示了一个小元素： &l...

Alpine.js 中的返回顶部按钮

我一直在练习 Alpine.JS 并尝试创建一个返回顶部按钮。我被卡住了，因为按钮根本没有隐藏，我试图让 Alpine 识别用户何时向下滚动......

使用 Dart Sass 中的compileString()方法时如何导入文件？

我真的很想理解 Sass 文档，但它没有提供很好的示例，所以我需要一些帮助。由于 Dart Sass 现在允许在浏览器上执行一些功能，这就是......

如何在 Django 中与 Bulma 使用弹出通知？

我正在使用 Django 制作一个应用程序，我想实现 Bulma 警报，如下所示： 但是，我不知道如何。我需要他们通知用户是否正确填写了表格。 有谁知道吗...

如何使用 JSON 文件让 ViewButton 在 React 文件中工作？

我正在尝试使表格中的按钮在显示正确数据的位置工作。不幸的是，现在它正在我的常量表中显示数据，这是一个问题。我想让它显示

英雄背景覆盖儿童导航栏 - Bulma

我使用 Hero 全高让页脚贴在屏幕底部。我的导航栏是 Hero 中的一个孩子，突然失去了它的 is-primary 背景色。我该如何解决？看我的代码贝尔...

bulma 自定义颜色和主题

我目前正在尝试做一个以布尔玛为基础的多主题设计系统。 但我目前正在努力添加多主题系统。 我在我的 customstyle scss 文件中添加了这个但是它确实......

html：在按钮右侧垂直居中放置文本

我尝试将 successMsg 显示在按钮右侧并垂直居中对齐。 到目前为止我尝试过的所有内容都只显示在按钮的底部或右侧但没有......

如何创建视差滚动效果，其中一个 div 在第三个（倾斜的）div 中滚动到另一个 div 上？

我在 https://brio.ruhangupta.com 上有一个项目，我有一个可滚动的部分，其中有两个 div 在倾斜的 div 中。我想在滚动上做一个视差效果，第二个蓝色 div 在...上有视差

Bulma 下拉菜单不起作用

Bulma 下拉菜单似乎不会在点击时切换。以下是文档中的代码片段：https://bulma.io/documentation/components/dropdown/ Bulma 下拉菜单似乎不会在点击时切换。以下是文档中的代码片段：https://bulma.io/documentation/components/dropdown/ <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet"/> <div class="dropdown is-active"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> <span>Dropdown button</span> <span class="icon is-small"> <i class="fa fa-angle-down" aria-hidden="true"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item"> Dropdown item </a> <a class="dropdown-item"> Other dropdown item </a> <a href="#" class="dropdown-item is-active"> Active dropdown item </a> <a href="#" class="dropdown-item"> Other dropdown item </a> <hr class="dropdown-divider"> <a href="#" class="dropdown-item"> With a divider </a> </div> </div> </div> 您需要使用 JavaScript 切换类 is-active。当.dropdown有.is-active它改变display的.dropdown-menu从none到block. 这里是实现它的基本方法。 var dropdown = document.querySelector('.dropdown'); dropdown.addEventListener('click', function(event) { event.stopPropagation(); dropdown.classList.toggle('is-active'); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <div class="dropdown"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> <span>Dropdown button</span> <span class="icon is-small"> <!--fontawesome required for the icon--> <i class="fa fa-angle-down" aria-hidden="true"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item"> Dropdown item </a> <a class="dropdown-item"> Other dropdown item </a> <a href="#" class="dropdown-item is-active"> Active dropdown item </a> <a href="#" class="dropdown-item"> Other dropdown item </a> <hr class="dropdown-divider"> <a href="#" class="dropdown-item"> With a divider </a> </div> </div> </div> 这是一个完整的解决方案，对我来说效果很好，使用 vanilla JS 并确保当您单击它们或按 Esc 键时下拉菜单关闭。 // Get all dropdowns on the page that aren't hoverable. const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)'); if (dropdowns.length > 0) { // For each dropdown, add event handler to open on click. dropdowns.forEach(function(el) { el.addEventListener('click', function(e) { e.stopPropagation(); el.classList.toggle('is-active'); }); }); // If user clicks outside dropdown, close it. document.addEventListener('click', function(e) { closeDropdowns(); }); } /* * Close dropdowns by removing `is-active` class. */ function closeDropdowns() { dropdowns.forEach(function(el) { el.classList.remove('is-active'); }); } // Close dropdowns if ESC pressed document.addEventListener('keydown', function (event) { let e = event || window.event; if (e.key === 'Esc' || e.key === 'Escape') { closeDropdowns(); } }); <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"> <body style="margin: 2rem"> <div class="dropdown"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions"> <span>Actions</span> <span class="icon is-small"> <i class="fas fa-angle-down" aria-hidden="true"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-ui-actions" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item"> Option 1 </a> <a href="#" class="dropdown-item"> Option 2 </a> <a href="#" class="dropdown-item"> Option 3 </a> </div> </div> </div> </body> 更正上面的答案： 我添加了 closeDropdowns() 函数，因为当我们点击第二个菜单时，两个菜单都保持打开状态。 // Get all dropdowns on the page that aren't hoverable. const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)'); if (dropdowns.length > 0) { // For each dropdown, add event handler to open on click. dropdowns.forEach(function(el) { el.addEventListener('click', function(e) { closeDropdowns(); e.stopPropagation(); el.classList.toggle('is-active'); }); }); // If user clicks outside dropdown, close it. document.addEventListener('click', function(e) { closeDropdowns(); }); } /* * Close dropdowns by removing `is-active` class. */ function closeDropdowns() { dropdowns.forEach(function(el) { el.classList.remove('is-active'); }); } // Close dropdowns if ESC pressed document.addEventListener('keydown', function (event) { let e = event || window.event; if (e.key === 'Esc' || e.key === 'Escape') { closeDropdowns(); } }); <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"> <body style="margin: 2rem"> <div class="dropdown"> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions"> <span>Actions</span> <span class="icon is-small"> <i class="fas fa-angle-down" aria-hidden="true"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-ui-actions" role="menu"> <div class="dropdown-content"> <a href="#" class="dropdown-item"> Option 1 </a> <a href="#" class="dropdown-item"> Option 2 </a> <a href="#" class="dropdown-item"> Option 3 </a> </div> </div> </div> </body> 我嗅探了文档页面上的 javascript 源监听器（我不知道他们为什么不让这个更明显 tbh），这里是给任何可能受益的人。 请注意下面我注释掉了一个我没有定义的 cookie 方面，并且抛出了一个错误并且对我的目的来说似乎不重要。 "use strict"; document.addEventListener("DOMContentLoaded", function () { // Search var setSearchToggle = function setSearchToggle() { var icon = document.getElementById("searchIcon"); var search = document.getElementById("search"); var input = document.getElementById("algoliaSearch"); if (!icon) { return; } icon.addEventListener("click", function (event) { search.classList.toggle("bd-is-visible"); if (search.classList.contains("bd-is-visible")) { algoliaSearch.focus(); } }); window.addEventListener("keydown", function (event) { if (event.key === "Escape") { return search.classList.remove("bd-is-visible"); } }); }; setSearchToggle(); // Navbar var setNavbarVisibility = function setNavbarVisibility() { var navbar = document.getElementById("navbar"); if (!navbar) { return; } var cs = getComputedStyle(navbar); var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight); var brand = navbar.querySelector(".navbar-brand"); var end = navbar.querySelector(".navbar-end"); var search = navbar.querySelector(".bd-search"); var original = document.getElementById("navbarStartOriginal"); var clone = document.getElementById("navbarStartClone"); var rest = navbar.clientWidth - paddingX - brand.clientWidth - end.clientWidth - search.clientWidth; var space = original.clientWidth; var all = document.querySelectorAll("#navbarStartClone > .bd-navbar-item"); var base = document.querySelectorAll("#navbarStartClone > .bd-navbar-item-base"); var more = document.querySelectorAll("#navbarStartOriginal > .bd-navbar-item-more"); var dropdown = document.querySelectorAll("#navbarStartOriginal .bd-navbar-dropdown > .navbar-item"); var count = 0; var totalWidth = 0; var showMore = function showMore() {}; var hideMore = function hideMore() {}; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = all[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var item = _step.value; totalWidth += item.offsetWidth; if (totalWidth > rest) { break; } count++; } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } var howManyMore = Math.max(0, count - base.length); if (howManyMore > 0) { for (var i = 0; i < howManyMore; i++) { more[i].classList.add("bd-is-visible"); dropdown[i].classList.add("bd-is-hidden"); } } for (var j = howManyMore; j < more.length; j++) { more[j].classList.remove("bd-is-visible"); } for (var k = howManyMore; k < dropdown.length; k++) { dropdown[k].classList.remove("bd-is-hidden"); } }; setNavbarVisibility(); // Cookies // var cookieBookModalName = "bulma_closed_book_modal"; // var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false; // Dropdowns var $dropdowns = getAll(".dropdown:not(.is-hoverable)"); if ($dropdowns.length > 0) { $dropdowns.forEach(function ($el) { $el.addEventListener("click", function (event) { event.stopPropagation(); $el.classList.toggle("is-active"); }); }); document.addEventListener("click", function (event) { closeDropdowns(); }); } function closeDropdowns() { $dropdowns.forEach(function ($el) { $el.classList.remove("is-active"); }); } // Toggles var $burgers = getAll(".navbar-burger"); if ($burgers.length > 0) { $burgers.forEach(function ($el) { if (!$el.dataset.target) { return; } $el.addEventListener("click", function () { var target = $el.dataset.target; var $target = document.getElementById(target); $el.classList.toggle("is-active"); $target.classList.toggle("is-active"); }); }); } // Modals var rootEl = document.documentElement; var $modals = getAll(".modal"); var $modalButtons = getAll(".modal-button"); var $modalCloses = getAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button"); if ($modalButtons.length > 0) { $modalButtons.forEach(function ($el) { $el.addEventListener("click", function () { var target = $el.dataset.target; openModal(target); }); }); } if ($modalCloses.length > 0) { $modalCloses.forEach(function ($el) { $el.addEventListener("click", function () { closeModals(); }); }); } function openModal(target) { var $target = document.getElementById(target); rootEl.classList.add("is-clipped"); $target.classList.add("is-active"); } function closeModals() { rootEl.classList.remove("is-clipped"); $modals.forEach(function ($el) { $el.classList.remove("is-active"); }); } document.addEventListener("keydown", function (event) { var e = event || window.event; if (e.keyCode === 27) { closeModals(); closeDropdowns(); } }); // Clipboard var $highlights = getAll(".highlight"); var itemsProcessed = 0; if ($highlights.length > 0) { $highlights.forEach(function ($el) { var copyEl = '<button class="button bd-copy">Copy</button>'; var expandEl = '<button class="button is-small bd-expand">Expand</button>'; $el.insertAdjacentHTML("beforeend", copyEl); var $parent = $el.parentNode; if ($parent && $parent.classList.contains("bd-is-more")) { var showEl = '<button class="button is-small bd-show"><span class="icon"><i class="fas fa-code"></i></span><strong>Show code</strong></button>'; $parent.insertAdjacentHTML("afterbegin", showEl); } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) { $el.insertAdjacentHTML("beforeend", expandEl); } itemsProcessed++; if (itemsProcessed === $highlights.length) { addHighlightControls(); } }); } function addHighlightControls() { var $highlightButtons = getAll(".highlight .bd-copy, .highlight .bd-expand"); $highlightButtons.forEach(function ($el) { $el.addEventListener("mouseenter", function () { $el.parentNode.classList.add("bd-is-hovering"); $el.parentNode.parentNode.classList.add("bd-is-hovering"); }); $el.addEventListener("mouseleave", function () { $el.parentNode.classList.remove("bd-is-hovering"); $el.parentNode.parentNode.classList.remove("bd-is-hovering"); }); }); var $highlightExpands = getAll(".bd-snippet .bd-expand"); $highlightExpands.forEach(function ($el) { $el.addEventListener("click", function () { $el.parentNode.firstElementChild.style.maxHeight = "none"; }); }); var $highlightShows = getAll(".bd-snippet .bd-show"); $highlightShows.forEach(function ($el) { $el.addEventListener("click", function () { var text = $el.querySelector("strong").textContent; var newText = text === "Show code" ? "Hide code" : "Show code"; $el.querySelector("strong").textContent = newText; $el.parentNode.classList.toggle("bd-is-more-clipped"); }); }); } setTimeout(function () { new Clipboard(".bd-copy", { target: function target(trigger) { return trigger.previousElementSibling.firstElementChild; } }); new Clipboard(".bd-clipboard"); }, 100); // Events var resizeTimer = void 0; function handleResize() { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(function () { setNavbarVisibility(); }, 10); } window.addEventListener("resize", handleResize); // Utils function getAll(selector) { var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document; return Array.prototype.slice.call(parent.querySelectorAll(selector), 0); } }); 在按钮上添加一个onclick： <button class="button" onclick="this.parentNode.parentNode.classList.toggle('is-active')">

如何在Bulma中使文本和图标垂直居中？

我试图在一个vue.js项目中使用Bulma和flexbox将图标和文本居中，我试图按照这个问题的答案（如何在Bulma中垂直居中元素？我的图标垂直...

如何改变bulma中列间的间隙？

我想知道在bulma中如何扩展默认的列间空隙，根据官方网站是8个空隙等于2em，但我需要6em，我可以在我的css文件中覆盖$column-gap值吗？

布尔玛汉堡包菜单不显示项目

我正在使用Bulma作为我的CSS框架。我在使汉堡包菜单工作时遇到了问题。文档中对整个事情应该如何运作并不清楚。我看到菜单正确地从...

如何用Vue.js重置点击Beufy表时发生的排序事件？

我正在通过Vue.js和Buefy开发前端。我正在使用Buefy的Table来对特定字段的点击事件进行排序。当然，我的表默认是按创建顺序排序的。(后台)...

SassError: `darken($color, $amount)`的参数`$color`必须是一个颜色。

我试图在Bulma中添加一个自定义颜色图，其SCSS代码如下。/ 设置你的颜色 $primary.#5B43CC; $primary-invert: findColorInvert($primary); $twitter: $primary: #5B43CC; $primary-invert: findColorInvert($primary); $twitter: #4099FF; $twitter-invert: ...

使bulma柱占据完整的垂直空间

我使用的是Bulma columns &已经将我的列划分为列is-2和列is-10。我使用列is-2使用Bulma菜单组件来显示一个垂直导航栏。在添加背景-...