bulma 相关问题

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

我正在研究我的网站的渲染性能问题，我发现只需移动鼠标指针就可以进行大量重新绘制。示例：输入字段下方的 HTML 框和

css performance hover bulma

回答 1 投票 0

使用 Bulma 构建网页我想以这种方式显示几个事件：使用 Bulma 构建网页我想以这种方式显示多个事件： <div class="card" style="background: lightgreen;"> <div class="card-header p-4"> <div class="is-flex is-flex-direction-row "> <div class="has-text-right pr-4 is-one-quarter" style="white-space: nowrap;"> <strong>[1st column]</strong><br/> 参见 https://codepen.io/baschtl/pen/PobXamm 但我希望每个“行/行”的第一列始终具有相同的宽度。但也许这只能通过使用良好的旧 TABLE 元素 [https://bulma.io/documentation/elements/table/] 而不是列或其他东西来实现？非常感谢！温度您可以使用 is-x 类来固定第一列的宽度，可以是 is-1 到 is-12。 <div class="columns"> <div class="column is-1"></div> <div class="column"></div> </div> 我不熟悉这个框架，但这在 CSS 中非常简单。您可以向每个第一个元素添加一个具有宽度的类，如下所示 .width-fix{ width:10rem; } 您的 html（减去空白：nowrap 并添加宽度固定类）： <div class="card" style="background: lightgreen;"> <div class="card-header p-4"> <div class="is-flex is-flex-direction-row "> <div class="width-fix has-text-right pr-4 is-one-quarter"> <strong>[1st column]</strong><br/> Saturday<br /><strong>27th May 2022</strong> </div> <div class="pr-4" style="min-width: 80px;"> <strong>[2nd column]</strong><br/> <a href="#" target="_blank"> <figure class="image is-128x128"> <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png"> </figure> </a> </div> 还要记住，如果您确实需要一张桌子，那么使用桌子也不错，所以您也可以考虑这一点。聚会有点晚了，但仍然：最近我有类似的需求，并设法使用column is-narrow（而不是column is-3或column is-one-quarter）+为每行中的<div>设置固定宽度的东西来使其工作。幸运的是，我能够计算出适用于我所有行中所有此类单元格的 width 值。如果您的数据更加动态，那么您可能需要在运行时计算它。请注意，is-narrow 设计为与至少一个其他 <div className="column"> without 类名称中的 is-... 结合使用，然后它会自动调整大小以填充剩余宽度。示例： const rows = ... // array of row data const width = 320; // calculated during development or at runtime return rows.map(row => <div key={row.id} className="columns"> <div className="column is-narrow" style={{ width }}> {row.text1} </div> <div className="column is-4"> {row.text2} </div> <div className="column"> {row.text3} </div> </div> );

css flexbox grid multiple-columns bulma

回答 3 投票 0

如何在 Bulma 中进行折叠多选？

Bulma 有多项选择，但似乎总是扩展的。我需要的是这样的：有什么办法吗

css bulma

回答 1 投票 0

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

我有一个像这样的搜索文本字段：我有一个像这样的搜索文本字段： <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> 我想在上面添加一个清除按钮，如果上面写了一些东西，就会清除字段中的文本。如果它仅在字段中有一些文本时才出现，那就太好了。您可以使用 CSS 伪类 :placeholder-shown 根据输入条件设置要隐藏的元素的样式。 https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown 因此，在这个演示中，我添加了一些 css 规则，当占位符仍显示时（因此当输入仍未填充文本时），这些规则将隐藏按钮。在这个演示中，我付出了一些努力，以尽可能最好的方式设计它，但有一些警告。主要问题是使用 span 来模拟实际上应该是 button 的内容，而不是出于可访问性问题！但我想遵循 https://bulma.io/documentation/form/general/ 上显示的指南，该指南使用 icons 的布局。我尝试过使用按钮，但它们看起来很丑。因此，请考虑到这个细节，并花时间解决这个问题。在此处查看有关该主题的更多信息：https://www.boia.org/blog/accessibility-tips-using-the-div-and-span-elements#:~:text=In%20general%2C% 20你%20应该%20避免，带有%20%20HTML%20tabindex%20属性。旁注：我知道 SO 不是帮助台，但有时我认为值得花时间看看是否可以为自己的目的解决某些问题，如果不共享就会浪费 //when page was loaded document.addEventListener('DOMContentLoaded', ()=>{ //add a click event handler to the #clearButton, document.getElementById('clearButton') .addEventListener('click', ()=>{ //that will clear the value of the #search text input document.getElementById('search').value = ''; }); //add a click event handler to the #filterButton document.getElementById('filterButton') .addEventListener('click', ()=>{ //that will just log something on console console.log('filter occurred!'); }); }); .field{ margin: 2em; } #search:placeholder-shown + #filterButton { display: none; } #search:placeholder-shown ~ #clearButton { display: none; } #clearButton, #filterButton { pointer-events: auto; cursor: pointer; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="field"> <div class="control has-icons-left has-icons-right"> <input id="search" class="input is-normal is-rounded" type="text" placeholder="Search..."> <span id="filterButton" class="icon is-small is-right"> <i class="fa-solid fa-filter"></i> </span> <span id="clearButton" class="icon is-small is-left"> <i class="fas fa-times"></i> </span> </div> </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

回答 2 投票 0

如何设置列高等于Bulma（flexbox）中最长的列？

我正在使用 Bulma 0.4.0，尽管答案可能与 Bulma 本身无关。如何将列高设置为与其他列相同？（见下面的截图）编辑：codepen 包含更多文本，呈现...

css flexbox bulma

回答 6 投票 0

致命：gpu_data_manager_impl_private.cc(448)] GPU 进程不可用。再见

尝试在我的计算机上设置 Electron，为我的 HTML/CSS/JS 项目设置 .exe 文件我目前正在 Windows 上进行开发并得到了这个： [3088：0525/235414.074：错误：gpu_process_host.cc（991）]GPU

javascript html electron bulma

回答 1 投票 0

底部有小空白

我正在使用 html 和 bulma 创建网站，但我注意到页面底部有小空白。我正在使用 html 和 bulma 创建网站，但我注意到页面底部有小空白。 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css" rel="stylesheet" /> <div class="columns"> <aside class="menu has-background-primary is-fullheight"> <p class="menu-label has-text-white is-size-1 ">LOGO</p> <ul class="menu-list"> <li> <p class="menu-item has-background-primary mb-6 "><i class="fa-regular fa-circle-user fa-4x icon is-large mr-4 has-text-white"></i><span class="text has-text-white is-size-1">Amiel</span></p> </li> <li><a href="./adminDash.php" class="menu-item has-background-primary mt-6"><i class="fa-solid fa-chart-line fa-2x icon is-large mr-4 has-text-white"></i><span class="text has-text-white is-size-4">Dashboard</span></a></li> <li><a href="./adminStudents.php" class="menu-item has-background-primary mt-6"><i class="fa-solid fa-graduation-cap fa-2x icon is-large mr-4 has-text-white"></i><span class="text has-text-white is-size-4">Students</span></a></li> <li><a href="./adminTeachers.php" class="menu-item has-background-primary mt-6"><i class="fa-solid fa-chalkboard-user fa-2x icon is-large mr-4 has-text-white"></i><span class="text has-text-white is-size-4">Teachers</span></a></li> <li><a href="#" class="menu-item has-background-primary mt-6"><i class="fa-solid fa-arrow-right-from-bracket fa-2x icon is-large mr-4 has-text-white"></i><span class="text has-text-white is-size-4">Logout</span></a></li> </ul> </aside> </div> 我已经在列、div 和旁白上尝试过 100vh。在我的 body 标签中添加了 padding:0 和 margin: 0 但没有任何反应请帮忙这个空白区域的来源是bulma.css。对于 CSS 选择器 .columns:not(:last-child)，它设置 margin-bottom: calc(var(--bulma-block-spacing) - var(--bulma-column-gap)) 样式。只需将此选择器的 margin-bottom 值设置为您希望使用的值（可能是 0） - 就是这样。

html css bulma

回答 1 投票 0

如何为 Bulma CSS 创建条件样式，类似于 Pico CSS，而又不丢失 Bulma 的设计？

我正在尝试为 Bulma CSS 实现条件样式，类似于 Pico CSS 处理它的方式（https://picocss.com/docs/conditional）。我的目标是将 Bulma 样式范围限定为具有特定属性的元素...

css sass bulma

回答 1 投票 0

Bulma/Svelte 字体很棒的图标不会重新渲染

我的可排序表格中出现了字体很棒的图标。它们渲染得很好，但是当我对表的行重新排序时，图标仍保留在原来的位置，并且不会与其他表一起排序（重新渲染？）

icons bulma font-awesome-5 svelte-3

回答 3 投票 0

使用 CSS 自定义 BulmaCSS 颜色

读完文档后，我还是不明白为什么我不能像这样用CSS设置原色：读完文档后，我还是不明白为什么不能像这样用CSS设置原色： <!DOCTYPE html>  <html data-theme="light"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> <style> :root { --bulma-primary: red; --bulma-size-medium: 0.5rem; } </style> </head> <body> <button class="button is-primary is-medium">Button</button> </body> </html> 尺寸修改器有效，但颜色保持默认值。 .button的背景颜色不是这样设置的。 Bulma 将 .button 背景颜色设置为 hsl 颜色： background-color: hsl(171deg, 100%,calc(41% + 0%)); 它又来自样式表： background-color: hsl(var(--bulma-button-h),var(--bulma-button-s),calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta))); 如果您不想费心将这些变量设置为您自己的选择，您可以自己设置背景颜色： <!DOCTYPE html>  <html data-theme="light"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> <style> :root { --bulma-primary: red; --bulma-size-medium: 0.5rem; } .button { background-color: red; } </style> </head> <body> <button class="button is-primary is-medium">Button</button> </body> </html> 虽然在 :root 中设置 hsl 变量可能更正确（例如，Bulma 可能在其他地方使用它们？）。

css bulma

回答 1 投票 0

列中大小相同的卡片

我面临类似的问题，如下所述：我想将 3-6 张卡片彼此相邻放置，并且希望它们具有相同的宽度和高度。我将 is-flex 选项添加到列中，但是这个...

css bulma

回答 1 投票 0

Bulma 中卡片标题中的文本居中

使用 bulma 可以轻松定位文本 - 通常。我无法将卡头属性居中。我的尝试：通常使用 bulma 可以轻松定位文本。我无法将 card-header 属性居中。我的尝试： <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <div class="columns mt-3"> <div class="column is-3 ml-3" style="display: flex;"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="has-text-right is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div>  </div> <div class="card-content"> <div class="media">  <div class="media-content"> <p class="title is-3" style="display: flex;"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> 为什么我的has-text-centered没有应用在card-header而是其他地方？ Upsidown 先生的评论很有帮助。在 Bulma 中，您可以使用内置实用程序类将元素居中。使用 .is-centered 类将容器内的文本或元素居中。对于您的卡头： <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="stylesheet"> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="card-header-title is-centered">Centered Header</p> </div> </div> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bulma Card Header Centered</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <style> .card-header { justify-content: center; } </style> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div> </div> <div class="card-content"> <div class="media"> <div class="media-content"> <p class="title is-3"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> </div> </body> </html>

css bulma

回答 2 投票 0

Bulma 中卡片标题中的居中文本

使用 bulma 可以轻松定位文本 - 通常。我无法将卡头属性居中。我的尝试：通常使用 bulma 可以轻松定位文本。我无法将 card-header 属性居中。我的尝试： <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <div class="columns mt-3"> <div class="column is-3 ml-3" style="display: flex;"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="has-text-right is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div>  </div> <div class="card-content"> <div class="media">  <div class="media-content"> <p class="title is-3" style="display: flex;"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> 为什么我的has-text-centered没有应用在card-header而是其他地方？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bulma Card Header Centered</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <style> .card-header { justify-content: center; } </style> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div> </div> <div class="card-content"> <div class="media"> <div class="media-content"> <p class="title is-3"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> </div> </body> </html> Upsidown 先生的评论很有帮助。在 Bulma 中，您可以使用内置实用程序类将元素居中。使用 .is-centered 类将容器内的文本或元素居中。对于您的卡头： <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="stylesheet"> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="card-header-title is-centered">Centered Header</p> </div> </div> </div> </div> </body> </html>

css bulma

回答 2 投票 0

卡片标题中的居中文本

使用 bulma 可以轻松定位文本 - 通常。我无法将卡头属性居中。我的尝试：通常使用 bulma 可以轻松定位文本。我无法将 card-header 属性居中。我的尝试： <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <div class="columns mt-3"> <div class="column is-3 ml-3" style="display: flex;"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="has-text-right is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div>  </div> <div class="card-content"> <div class="media">  <div class="media-content"> <p class="title is-3" style="display: flex;"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> 为什么我的has-text-centered没有应用在card-header而是其他地方？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bulma Card Header Centered</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/> <style> .card-header { justify-content: center; } </style> </head> <body> <div class="columns mt-3"> <div class="column is-3 ml-3"> <div class="card has-background-warning-light"> <div class="card-header"> <p class="is-size-5 is-uppercase has-text-centered"> regular price </p> </div> <div class="card-image"> <div class="has-background-warning"> <div class="has-text-centered"> <span class="is-size-1 has-text-weight-bold"> $ 999 </span> </div> </div> </div> <div class="card-content"> <div class="media"> <div class="media-content"> <p class="title is-3"> standard price available for everyone </p> <p class="subtitle is-6 mt-1"> regular price </p> </div> </div> <div class="content has-text-centered"> <button class="button is-dark"> BUY </button> </div> </div> </div> </div> </div> </body> </html>

css bulma

回答 1 投票 0

Bulma - 为自己的组件定制 SCSS

在 BULMA 或 SCSS 中，也许更具体地说，我想使用一个组件，但有点复制它而不是覆盖它，这是通过扩展实现此目的的唯一方法，或者是否还有其他机制。

sass bulma

回答 1 投票 0

如何在Bulma框架中自定义Navbar组件？

我想要导航栏组件中元素的全宽。我怎样才能做到这一点。我也对类似的一些关键字感兴趣。这是我的错误：我想要全角

css vuejs3 bulma

回答 1 投票 0

在 bulma 1.0 中禁用深色模式

我尝试在我的base.css中禁用暗模式，就像bulma在他们的文档中描述的那样，通过添加@media行： @media（首选颜色方案：浅色）{ ：根 { } } 身体 { 显示：柔性；敏-h...