bulma 相关问题

Bulma是一个使用Flexbox和SASS在GitHub上开发的开源CSS框架。

如何通过 bulma css 使我的表单在移动设备中为全角并在桌面上使我的表单为特定宽度？

这是我当前使用 bulma 显示表单字段的 HTML。这是我当前的 HTML，用于显示带有 bulma 的表单字段。 <body> <div id="root"> <nav class="navbar is-primary is-navbar-sticky"> </nav> <section class="section"> <div class="container"> <form> <div class="field"> <label class="label is-medium"> "Title" <div class="control"> <input type="text" class="input is-medium is-danger" placeholder="Put the title of item here" required="" value=""> <p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p> </div> </label> </div> </form> </div> </section> </div> </body> 到目前为止一切顺利。一个问题是 input 将在每个断点上占据全宽，这对于桌面分辨率来说太大了。如何使input仅在移动断点处占据全宽度，而在移动断点之后可以占据一定宽度。有没有bulma的方法可以做到这一点？而不是编写我自己的 css 规则？您使用的 bulma 框架因此，指定 bulma 框架的网格系统，您可以在输入元素中使用类列，并且您可以使用要设置输入字段宽度的列数 <div class="control"> <input type="text" class="input column-12 is-medium is-danger" placeholder="Put the title of item here" required="" value=""> <p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p> </div>

css bulma

回答 2 投票 0

如何在布尔玛中切换选项卡

我尝试实现一个导航选项卡面板来切换选项卡。我浏览了 Bulma 文档但找不到任何内容。这是示例代码 &l... 我尝试实现一个导航选项卡面板来切换选项卡。我浏览了 Bulma 文档但找不到任何内容。这是示例代码 <div class="tabs is-toggle is-fullwidth"> <ul> <li class="is-active"> <a> <span class="icon is-small"><i class="fa fa-image"></i></span> <span>Pictures</span> </a> <p> Here goes pictures </p> </li> <li> <a> <span class="icon is-small"><i class="fa fa-music"></i></span> <span>Music</span> </a> <p> Here goes music </p> </li> <li> <a> <span class="icon is-small"><i class="fa fa-film"></i></span> <span>Videos</span> </a> <p> Here goes music </p> </li> <li> <a> <span class="icon is-small"><i class="fa fa-file-text-o"></i></span> <span>Documents</span> </a> <p> Here goes music </p> </li> </ul> </div> 这里是我正在尝试的JSfiddle。我希望“这里是图片”仅在图片选项卡处于活动状态时显示，反之亦然您应该将选项卡和选项卡内容分离到单独的容器中。您可以使用 data 属性将选项卡与正确的内容匹配。将选项卡内容设置为默认隐藏，除非它具有类 active。当您点击某个选项卡时，相应的选项卡内容会收到 active。您可以根据需要使用更合适的元素和类/ID 名称更新下面的小提琴/片段。小提琴 $(document).ready(function() { $('#tabs li').on('click', function() { var tab = $(this).data('tab'); $('#tabs li').removeClass('is-active'); $(this).addClass('is-active'); $('#tab-content p').removeClass('is-active'); $('p[data-content="' + tab + '"]').addClass('is-active'); }); }); #tab-content p { display: none; } #tab-content p.is-active { display: block; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs is-toggle is-fullwidth" id="tabs"> <ul> <li class="is-active" data-tab="1"> <a> <span class="icon is-small"><i class="fa fa-image"></i></span> <span>Pictures</span> </a> </li> <li data-tab="2"> <a> <span class="icon is-small"><i class="fa fa-music"></i></span> <span>Music</span> </a> </li> <li data-tab="3"> <a> <span class="icon is-small"><i class="fa fa-film"></i></span> <span>Videos</span> </a> </li> <li data-tab="4"> <a> <span class="icon is-small"><i class="fa fa-file-text-o"></i></span> <span>Documents</span> </a> </li> </ul> </div> <div id="tab-content"> <p class="is-active" data-content="1"> Pictures </p> <p data-content="2"> Music </p> <p data-content="3"> Videos </p> <p data-content="4"> Documents </p> </div> 没有 jQuery 的示例 const TABS = [...document.querySelectorAll('#tabs li')]; const CONTENT = [...document.querySelectorAll('#tab-content p')]; const ACTIVE_CLASS = 'is-active'; function initTabs() { TABS.forEach((tab) => { tab.addEventListener('click', (e) => { let selected = tab.getAttribute('data-tab'); updateActiveTab(tab); updateActiveContent(selected); }) }) } function updateActiveTab(selected) { TABS.forEach((tab) => { if (tab && tab.classList.contains(ACTIVE_CLASS)) { tab.classList.remove(ACTIVE_CLASS); } }); selected.classList.add(ACTIVE_CLASS); } function updateActiveContent(selected) { CONTENT.forEach((item) => { if (item && item.classList.contains(ACTIVE_CLASS)) { item.classList.remove(ACTIVE_CLASS); } let data = item.getAttribute('data-content'); if (data === selected) { item.classList.add(ACTIVE_CLASS); } }); } initTabs(); #tab-content p { display: none; } #tab-content p.is-active { display: block; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet" /> <div class="tabs is-toggle is-fullwidth" id="tabs"> <ul> <li class="is-active" data-tab="1"> <a> <span class="icon is-small"><i class="fa fa-image"></i></span> <span>Pictures</span> </a> </li> <li data-tab="2"> <a> <span class="icon is-small"><i class="fa fa-music"></i></span> <span>Music</span> </a> </li> <li data-tab="3"> <a> <span class="icon is-small"><i class="fa fa-film"></i></span> <span>Videos</span> </a> </li> <li data-tab="4"> <a> <span class="icon is-small"><i class="fa fa-file-text-o"></i></span> <span>Documents</span> </a> </li> </ul> </div> <div id="tab-content"> <p class="is-active" data-content="1"> Pictures </p> <p data-content="2"> Music </p> <p data-content="3"> Videos </p> <p data-content="4"> Documents </p> </div> 另一种不需要数据属性的解决方案（使用索引）。 HTML： <div class="column is-12 tabs is-medium"> <ul> <li class="is-active"><a>Tab 1</a></li> <li><a>Tab 2</a></li> </ul> </div> <div class="column is-12 tabs-content"> <div class="tab-content is-active"> <p>Content 1</p> </div> <div class="tab-content"> <p>Content 2</p> </div> </div> JS (jQuery): $('.tabs').each(function(index) { var $tabParent = $(this); var $tabs = $tabParent.find('li'); var $contents = $tabParent.next('.tabs-content').find('.tab-content'); $tabs.click(function() { var curIndex = $(this).index(); // toggle tabs $tabs.removeClass('is-active'); $tabs.eq(curIndex).addClass('is-active'); // toggle contents $contents.removeClass('is-active'); $contents.eq(curIndex).addClass('is-active'); }); }); SCSS： .tab-content { display: none; &.is-active { display: block; } } 这里是 Angular CLI 的代码，以防有人需要，复制粘贴就可以了。（没有检查html）这是html： <div class="container"> <section class="box" > <section class="hero is-dark"> <div class="hero-body"> <div class="container has-text-centered"> <h1 class="title"> head title here </h1> </div> </div> <div class="hero-foot"> <nav class="tabs is-boxed is-fullwidth is-medium"> <div class="container"> <ul> <li class="tab is-active" (click)="openTab($event, 'id_tab_1')"><a >tab 1 title</a></li> <li class="tab" (click)="openTab($event, 'id_tab_2')"><a >tab 2 title</a></li> <li class="tab" (click)="openTab($event, 'id_tab_3')"><a >tab 3 title</a></li> </ul> </div> </nav> </div> </section> <div class="container section"> <div id="id_tab_1" class="content-tab"> <div> content here </div> </div> <div id="id_tab_2" class="content-tab" style="display:none"> <div> content here </div> </div> <div id="id_tab_3" class="content-tab" style="display:none"> <div> content here </div> </div> </div> </section> </div> 这是您的组件的打字稿，无需使用此版本创建变量，它基本上就像您在 javascript 中所做的那样。使用 viewchild 等可以更好地适应 Angular。 openTab(event: any, tabName) { var i, x, tablinks; x = document.getElementsByClassName("content-tab"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tab"); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" is-active", ""); } document.getElementById(tabName).style.display = "block"; event.currentTarget.className += " is-active"; } import React, { useState } from 'react'; import styled from 'styled-components'; const TabWrapper = styled.div``; const allTypes = ['New Arrivals', 'Best Sellers', 'On Sale']; const ArrivalType = () => { const [active, setActive] = useState(allTypes[0]); return ( <TabWrapper className="tabs is-centered"> <ul> {allTypes.map((type) => ( <li className={active === type && 'is-active'} key={type} aria-hidden onClick={() => setActive(type)}> <a>{type}</a> </li> ))} </ul> </TabWrapper> ); }; export default ArrivalType; 如果您使用 alpine.js，您可以通过以下方式完成： <div class="tabs is-toggle" x-data="{ one: true, two: false, three: false, }"> <ul> <li x-bind:class="one ? 'is-active' : ''" > <a x-on:click="one = true; two = false; three = false" > <p>FIRST</p> </a> </li> <li x-bind:class="two ? 'is-active' : ''" > <a x-on:click="two = true; one = false; three = false"> <p>SECOND</p> </a> </li> <li x-bind:class="three ? 'is-active' : ''" > <a x-on:click="three = true; one = false; two = false"> <p>THIRD</p> </a> </li> </ul> </div> 最简单的解决方案！

html bulma

回答 5 投票 0

Bulma CSS，输入搜索文本字段中的清除按钮

我有一个像这样的搜索文本字段：我有一个像这样的搜索文本字段： <div class="field"> <p class="control has-icons-left has-icons-right"> <input class="input is-normal is-rounded" type="text" placeholder="Search..."> <span class="icon is-small is-left"> <i class="fa-solid fa-filter"></i> </span> </p> </div> 我想在上面添加一个清除按钮，如果上面写了一些东西，就会清除字段中的文本。如果它仅在字段中有一些文本时才出现，那就太好了。感谢您的帮助。您可以将 bulma css 类 is-hidden 添加到图标，然后添加输入元素的 onInput，删除该类以使其可见。或者，如果用户删除所有输入，add类会再次隐藏它。 const inputElement = document.querySelector('input'); const inputIcon = document.querySelector('i'); inputElement.addEventListener('input', (e) => { if (e.target.value.length > 0) { inputIcon.classList.remove('is-hidden'); } else { inputIcon.classList.add('is-hidden'); } }); html, body { height: 100vh; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> <div class="field"> <p class="control has-icons-left has-icons-right"> <input class="input is-normal is-rounded" type="text" placeholder="Search..."> <span class="icon is-small is-left"> <i class="fa-solid fa-filter is-hidden">:D</i> </span> </p> </div>

javascript css bulma

回答 1 投票 0

如何缩短bulma输入？

可以缩短Bulma输入宽度吗？正如我在他们的文档中看到的那样，有一个 is-small 参数，但它只会使字体和高度变小。可以缩短布尔玛输入宽度吗？正如我在他们的文档中看到的，有一个 is-small 参数，但它只会使字体和高度变小。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" integrity="sha256-8BrtNNtStED9syS9F+xXeP815KGv6ELiCfJFQmGi1Bg=" crossorigin="anonymous" /> <div class="container"> <div class="control has-icons-left has-icons-right"> <input class="input is-small m-r-5" type="text" placeholder="Exxxxx"> <span class="icon is-small is-left"> <i class="fa fa-envelope"></i> </span> <span class="icon is-small is-right"> <i class="fa fa-check"></i> </span> </div> </div> 正如我们在下面的屏幕截图中看到的，它通过容器传播：我想将其宽度从 100% 缩短到约 33% 小解决方法：使用列 <div class="container"> <div class="columns"> <div class="column is-one-fifth"> <div class="control has-icons-left has-icons-right"> <input class="input" type="text" placeholder="Exxxxx"> <span class="icon is-small is-left"> <i class="fa fa-envelope"></i> </span> <span class="icon is-small is-right"> <i class="fa fa-check"></i> </span> </div> </div> </div> </div> 结果：如果输入的类型为文本、搜索、电话、网址、电子邮件和密码，则可以使用 size 属性。（例如不适用于类型编号）。 <input class="input is-small" size="5" type="text"> 您可以添加style="width: 33%;"作为输入 <input class="input is-small m-r-5" type="text" style="width: 33%;" placeholder="Exxxxx"> 您可以为容器类添加style="width: 33%" <div class="container" style="width:33%"> <div class="control has-icons-left has-icons-right" style="width:33%"> <input class="input is-small m-r-5" type="text" placeholder="Exxxxx"> <span class="icon is-small is-left"> <i class="fa fa-envelope"></i> </span> <span class="icon is-small is-right"> <i class="fa fa-check"></i> </span> </div> </div>

css bulma

回答 4 投票 0

当闪现消息处于活动状态时，汉堡按钮无法按预期工作

我正在学习 Bulma，我有一个带有设计身份验证的简单应用程序。这是我的标题部分：我正在学习 Bulma，我有一个带有设计身份验证的简单应用程序。这是我的标题部分： <nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation"> <div class="navbar-brand "> <%= link_to image_tag("bear.png", class: " logo navbar-start"), root_path %> <div class="navbar-item logo"> Vamos: Your Gaming Calendar </div> <div class="navbar-item notice"><%= notice %></div> <div class="navbar-item alert"><%= alert %></div> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-end"> <% if user_signed_in?%> <div class="navbar-item"> Ciao!, <%=current_user.email%></div> <%= link_to "Vuoi fare logout?", destroy_user_session_path, data: { "turbo-method": :delete} , class: "navbar-item"%> <%# <% link_to "Vuoi cancellarti?", cancel_user_registration, data: { "turbo-method": :delete} %><br> <% else %> <%= link_to "Want to sign_up?", new_user_registration_path, class: "navbar-item" %> <%= link_to "Want to login?", new_user_session_path, class: "navbar-item" %> <% end %> </div> </div> </nav> 这是我从 bulma 文档中复制的用于激活汉堡按钮的普通 js： document.addEventListener('DOMContentLoaded', () => { // Get all "navbar-burger" elements const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Add a click event on each of them $navbarBurgers.forEach( el => { el.addEventListener('click', () => { // Get the target from the "data-target" attribute const target = el.dataset.target; const $target = document.getElementById(target); // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); }); 确实是标准的东西。通常它会运行，除非有一些活动的闪存消息，或者有一些输入要插入（如在登录/登录阶段）。另外，如果我单击我的徽标（并遵循 root_path），汉堡按钮不会运行。我必须重新加载才能重新激活 .js。看起来很奇怪。为什么？我认为你的问题不在于向按钮添加功能的代码，而在于你如何导入你的javascript。如果您编辑了帖子并评论了如何添加该 JS，那就太好了。通过开发者工具，您可以检查文件是否正在上传。如果正在加载但菜单不起作用，那么这可能是一个实现问题，但现在我敢说这是一个导入问题。

ruby-on-rails bulma

回答 1 投票 0

Oruga UI 无法正常工作。我无法使用任何元素，我做错了什么吗？（图3）

每当我使用 oruga UI 组件时，即使它是一个非常简单的东西，它也会在我的 vue 应用程序中导致错误。例如，以下代码： ` 每当我使用 oruga UI 组件时，即使它是一个非常简单的东西，它也会在我的 vue 应用程序中导致错误。例如以下代码： `<template> <o-field label="Name"> <o-input v-model="name" /> </o-field> </template> <script> export default { data() { return { name: '' }; } }; </script>` 导致此错误： useComputedClass-T7fME1R-.mjs:43 Uncaught (in promise) Error: useComputedClass must be called within a component setup function. at useComputedClass (useComputedClass-T7fME1R-.mjs:43:18) at eval (Field.vue_vue_type_script_setup_true_lang-01NbaSBk.mjs:267:143) at ReactiveEffect.eval [as fn] (reactivity.esm-bundler.js:946:44) at ReactiveEffect.run (reactivity.esm-bundler.js:210:19) at get value [as value] (reactivity.esm-bundler.js:955:106) at triggerComputed (reactivity.esm-bundler.js:229:19) at get dirty [as dirty] (reactivity.esm-bundler.js:184:11) at instance.update (runtime-core.esm-bundler.js:5415:18) at callWithErrorHandling (runtime-core.esm-bundler.js:321:32) at flushJobs (runtime-core.esm-bundler.js:512:9) 不知道为什么。这就是我的 main.js 文件的样子： import { createApp } from 'vue'; import App from './App.vue'; import Oruga from '@oruga-ui/oruga-next'; import VueTelInput from 'vue-tel-input'; import 'vue-tel-input/vue-tel-input.css'; import axios from 'axios'; import 'bulma/css/bulma.css'; const globalOptions = { mode: 'auto', }; const app = createApp(App); // Set axios to $http for global use app.config.globalProperties.$http = axios; // Enable Vue Devtools if (process.env.NODE_ENV === 'development') { app.config.devtools = true; } app.use(VueTelInput, globalOptions); app.use(Oruga); app.mount("#app"); 当我将应用程序升级到 vue.js 版本 3.4 时，我也看到此错误，而使用版本 3.3.13 时，不会发生该错误。我在 GitHub 中打开了一个问题：https://github.com/vuejs/core/issues/10001 您可以密切关注该问题，以便了解何时可以解决该问题。同时，我建议使用 vue 3.3.13 npm install --save [email protected]

vue.js vuejs3 bulma

回答 1 投票 0

布尔玛框架的下拉 JavaScript

我有以下问题，我正在尝试使用 javascript 和 bulma 框架来使用两个下拉菜单但问题是，当我点击它时，只显示一个下拉菜单，但如果我点击 s...

javascript jquery bulma

回答 2 投票 0

buefy表获取点击行的数据

下面是我的代码： &...

vue.js bulma buefy

回答 2 投票 0

我可以在 Bulma 中使用 div 元素而不是 nav 来使用关卡类吗？

我想知道使用类级别（class =“level”）与元素而不是布尔玛文档使用的是否正确。提前致谢！布尔玛文档对此进行了非常详细的解释我想知道使用类级别（class="level"）和<div>元素而不是布尔玛文档使用的<nav>是否正确。提前致谢！布尔玛文档对此进行了很好的解释，但示例仅包含 <nav> 元素。是的，我一直这样做，就像这里： <div class="level is-mobile">  <div class="level-left">  <div class="level-item"> <div class="field has-addons"> <p class="control"> 效果很好。

html css web bulma

回答 1 投票 0

Bulma 导航栏示例，菜单切换未达到所需结果

我无法让导航栏按我想要的方式工作。我正在使用最新的 bulma.io css 文件。一般来说，我发现 bulma 页面本身显示的内容与我的 Chrome 有点不同

html css bulma

回答 1 投票 0

在哪里可以找到所有布尔玛图标名称？

我浏览了Bulma文档页面，但找不到图标名称列表。哪里可以找到？

bulma

回答 2 投票 0

我的网站 P 标签文本末尾出现一条恼人的小灰线

... <div class="column">  <div class="media"> <div class="media-left"> <figure class="image is-128x128"> <img src="img/group-513793.png" alt="Enter PIN icon"> </figure> </div> <div class="media-content"> <p class="title is-4">Enter PIN</p> </div> </div>  </div> 这就是我面临的问题。我使用 Bulma CSS 进行样式设置。在笔记本电脑中打开网站时，我在桌面视图或移动视图中没有看到任何问题。仅当我在手机中打开该网站时，我才会看到那条灰线。请帮我去掉文字后面的灰线。通过设置margin-bottom:0，它将有效地删除元素的下边距，从而消除灰线。

html css frontend web-development-server bulma

回答 1 投票 0

有没有办法仅在 bulma css 框架中更改移动设备的填充值？

所以我使用Bulma css框架构建了一个网站。我将每个元素的 padding-left 和 padding-right 设置为 10%。在移动设备上，填充需要更小。也许 5% 或更少它不会...

html css bulma

回答 4 投票 0

bulma 示例未达到预期结果

我无法让导航栏按我想要的方式工作。我正在使用最新的 bulma.io css 文件。一般来说，我发现 bulma 页面本身显示的内容与我的 Chrome 有点不同

html css bulma

回答 1 投票 0

打印时阻止布尔玛丝带覆盖内容

我正在编写一份研究报告。当我想将报告另存为 pdf 时，导航功能区会覆盖内容。我怎样才能避免这种情况？我不想用印刷来隐藏丝带，...