开源CSS框架Bulma为移动优先设计，并使用Flexbox方法构建，它提供了现成的前端组件，无需JavaScript即可构建响应式网页界面，使其成为与React一起使用的理想选择。
Bulma以拥有最简单的网格系统而闻名，它非常流畅，可以根据所使用设备的屏幕大小自动调整列的大小。
与大多数CSS框架不同，Bulma不是一个全有或全无的框架；它使你能够导入和使用特定的组件，如面包屑或表单，而无需导入整个框架。它还提供了大量已经定制好的用于设计网站的组件、元素、栏目、布局和表单，让用户可以快速上手并运行。
而且，由于Bulma不包括任何JavaScript，当与React一起使用时，你可以完全控制你的组件的功能，让你自由地以你认为合适的方式编写JavaScript代码，而不是受限于Bulma对编写JavaScript的看法。对于那些想使用自己的JavaScript实现的开发者来说，Bulma遵循严格的只用CSS的方法，这使他们能够实现这一目标。
Bulma在Chrome、Edge、Firefox、Opera、Safari和Internet Explorer（10+）上都有浏览器支持，为你提供CSS类，帮助你设计网站风格。
在本教程中，你将学习如何将Bulma CSS与React一起使用。
在React中使用Bulma CSS
虽然Bulma的创造者说使用Bulma不需要有任何CSS知识，但对CSS有基本的了解会加强你在任何CSS框架中的工作，包括Bulma。
本教程假定你具有CSS的基本知识，以及下列条件。
现在，让我们看看如何在React中使用不同的Bulma CSS元素和组件。
在React中安装Bulma
首先，让我们通过使用Create React App并运行以下命令来启动一个React应用程序。
npx create-react-app bulma-tutorial
一旦React应用成功安装在你的本地机器上，使用cd bulma-tutorial 命令切换到它的目录，并使用npm install bulma 命令将Bulma包安装到你的React项目。
安装完Bulma后，运行npm start ，通过localhost:3000 ，在你的浏览器窗口访问该应用程序。
现在，导航到src 文件夹，点击App.js ，然后粘贴下面的代码片段。
import 'bulma/css/bulma.min.css';
const App = () => {
return (
<div classname="main">
<div className="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-black">Black</button>
<button class="button is-white">White</button>
<button class="button is-dark">Dark</button>
<button class="button is-light">Light</button>
</div>
</div>
)
}
export default App;
通过将Bulma CSS导入我们的项目，我们现在可以访问Bulma的组件、元素、变量等，并在我们的项目中使用Bulma。
在React中使用Bulma进行造型
下面是创建的组件App ，并添加了父级div 。通过导出该组件，我们可以在应用程序的其他部分针对它。
const App = () => {
return (
<div classname="main">
...
</div>
)
}
export default App;
在这里，我们添加了一个包含10个buttons 的div ，并使用Bulma CSS对其进行造型。
<div className="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-black">Black</button>
<button class="button is-white">White</button>
<button class="button is-dark">Dark</button>
<button class="button is-light">Light</button>
</div>
大多数Bulma元素有替代样式，需要使用is- 或has- 来访问它们**。**例如，在上面的代码片段中，你会注意到每个按钮都包含两个值：元素的名称，button ，向Bulma表明这个元素是一个按钮；以及修改器，is-dark ，访问样式类属性。
因此，如果你想把你的应用程序的一个元素染成绿松石色，例如，你会使用is-primary 修改器的语法。
以下是可以在Bulma中使用的默认色调，以及它们各自的修改器。
is-primary是绿松石色is-link是蓝色is-info是青色is-success是绿色is-warning是黄色is-danger是红色is-white是白色is-black是黑色is-dark是深色is-white是白色的
按钮完成后，保存代码并返回到浏览器窗口，查看更新后的页面是什么样子。如果一切操作正确，它应该看起来像下面的屏幕。
请看CodePen上Didicodes(@edyasikpo) 的Pen
Colors - Bulma CSS教程
。
改变元素和组件的大小
在了解了如何在React中为元素和组件应用颜色之后，我们可以继续通过使用Bulma的修改器类（is-small,is-medium, andis-large ）来操作按钮，以调整任何元素或组件的大小。
正如每个修改器的名字所暗示的那样，元素将通过添加is-small ，变得更小，通过添加is-medium ，变得中等，通过添加is-large ，变得更大，成为该元素的属性。
让我们把这些属性添加到我们的App.js 文件的代码中，看看它是如何发挥的。
import 'bulma/css/bulma.min.css';
const App = () => {
return (
<div classname="main">
<div className="buttons">
<button class="button is-success is-small">Small</button>
<button class="button is-warning is-medium">Medium</button>
<button class="button is-danger is-large">Large</button>
</div>
</div>
)
}
export default App;
通过在代码库中添加is-small 、is-medium 、is-large ，你的React应用程序现在应该看起来像下面这样。
请看CodePen上Didicodes（@edyasikpo）的Pen
S izes - Bulma CSS教程
。
控制元素和组件的状态
控制应用程序中的元素或组件的状态的能力是非常重要的。要在React应用中做到这一点，可以使用下面三个Bulma CSS属性中的任何一个。
is-outlinedis-loadingdisabled
在下面的代码片段中，通过添加is-outlined ，第一个按钮的状态被勾勒出来，通过添加is-loading ，第二个按钮显示一个加载轮，通过添加is-disabled ，第三个按钮变成禁用。
import 'bulma/css/bulma.min.css';
const App = () => {
return (
<div classname="main">
<div className="buttons">
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-warning is-loading">Loading</button>
<button class="button is-danger" disabled>Disabled</button>
</div>
</div>
)
}
export default App;
你可以看到下面这段代码的输出。
利用Bulma的自定义代码片段
如前所述，Bulma提供了一个已经定制好的组件集合，你可以用它来快速定制你的React应用程序，而不是从头开始设计它们的样式。
例如，如果我们想旋转一个导航栏，Bulma提供了模板代码，我们可以从他们的网站上复制一个片段，粘贴到App.js 文件中，并在img 和hr 元素中添加一个关闭标签。
import 'bulma/css/bulma.min.css';
const App = () => {
return (
<div>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/>
</a>
<a role="button" class="navbar-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-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider"/>
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
)
}
export default App;
现在我们通过简单的复制和粘贴，在我的网站上有了一个导航栏，并且可以使用本教程中使用的概念进一步定制它。
请看CodePen上Didicodes(@edyasikpo) 的Pen
NavBar - Bulma CSS教程
。
总结
尽管本教程涵盖了使用Bulma与React的一些基础知识，但它们提供了一个基础，可以在造型时进行扩展。你可以通过访问他们的官方文档来了解更多关于Bulma的工作原理，获取代码片段，并进行实验。也可以自由探索我在CodePen上创建的这些Bulma教程。
如果你有任何问题，可以在下面的评论区留言。
The postHow to use Bulma CSS with Reactappeared first onLogRocket Blog.
