使用React介绍BulmaCSS

来自菜鸟教程
跳转至：导航、​搜索

介绍

Bulma 是一个包含助手、元素和组件的 CSS 框架。 您可以在项目中使用 Bulma 类和 HTML 结构进行可靠和可扩展的设计。

在本文中，您将使用 react-bulma-components，这是 React 中 Bulma CSS 框架更流行的实现之一。

先决条件

要完成本教程，您需要：

  • Node.js 的本地开发环境。 关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。
  • 对 React 有一定的了解。 你可以看看我们的 How To Code in React.js 系列。

本教程已使用 Node v16.2.0、npm v7.14.0、react v17.0.2 和 react-bulma-components v4.0.4 进行了验证。

设置项目

首先使用 create-react-app 生成 React App，然后安装依赖项： 

npx create-react-app react-bulma-components-example

切换到新的项目目录： 

cd react-bulma-components-example

现在，您可以运行 React 应用程序： 

npm start

修复项目的任何错误或问题。 并在网络浏览器中访问 localhost:3000。

一旦你有一个工作的 React 应用程序，你可以开始添加 react-bulma-components： 

npm install react-bulma-components@4.0.4

此时，您有了一个带有 react-bulma-components 的新 React 项目。

探索元素和组件

react-bulma-components 库支持 Bulma 元素、组件、表单和布局。

考虑一个使用 Button 组件的示例。 首先，您需要导入 Bulma 样式表。 然后，您将需要导入该组件。

src/App.js 

import 'bulma/css/bulma.min.css';
import { Button } from 'react-bulma-components';

function App() {
  return (
    <div className="App">
      <Button>Example</Button>
    </div>
  );
}

export default App;

这将生成带有 Bulma 样式的 Button。

注意： 在以前的 react-bulma-components 版本中，可以指定 full 和 lib 特定版本的组件。 当 Bulma 更改为对等依赖项并且现在必须导入样式表时，这在 4.0 版中进行了更改。


与大多数 CSS 框架一样，Bulma 为您的常用组件提供样式和一系列自定义，可以通过向您的元素添加不同的类来完成。

react-bulma-components 通过为每个主要元素提供组件进一步简化了事情，并且消除了为了将属性传递给组件而杂耍类名的需要。

想要制作一个使用 danger 颜色的圆角和轮廓的大按钮？ 

<Button
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

所有 react-bulma-components 都可以接受 renderAs 属性，该属性允许您定义应该使用哪种元素来呈现组件。

默认情况下，Button 组件被渲染为 button 元素。 使用 renderAs 属性将其呈现为链接。

除了 renderAs 属性，我们还应该包含一个 href 来告诉它在人们点击链接时将其发送到哪里： 

<Button
  renderAs="a"
  href="https://www.example.com"
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

事实上，我们所有的 Bulma 组件都可以接受你可能抛出的任何属性。 这意味着您总是可以使用 style 属性进行一些高级样式设置，或者使用 className 添加一些额外的 CSS 类。

使用 className 时，您提供的任何类都将添加到库生成的 Bulma 类名列表中。

颜色

与大多数现代 CSS 框架类似，Bulma 带有一个使用一些语义命名约定的颜色主题。

这些主题颜色包括 primary、link、info、success、warning 和 danger。

此外，还有更多文字颜色可供选择：black、dark、light 和 white。

支持颜色的组件接受 color 属性： 

<Button color="success">Example</Button>

这将为渲染的元素分配正确的颜色类。 因为此颜色属性将类分配回呈现的元素，所以您不能只分配任意颜色值。

尺寸

几个组件接受 size 属性，但它们可能接受不同类型的值。

这是因为某些组件（如 Heading）使用数值： 

<Heading size={1}>Large Heading</Heading>
<Heading size={2}>Not So Large Heading</Heading>

而其他人（如 Button）使用文本名称来表示尺寸： 

<Button size="large">Large Button</Button>
<Button size="small">Small Button</Button>

对于接受文本大小的组件，您可以使用 small、normal、medium 和 large。 normal 大小是未指定 size 时默认使用的大小。

使用网格系统

Bulma 还支持网格系统，以帮助以一致的方式布置内容。 默认情况下，Bulma 使用 12 列布局，该布局使用百分比或列数。

首先，您需要导入组件： 

import { Columns } from 'react-bulma-components';

对于基于 12 列布局的大小，您将 size 设置为 1 和 12 之间的数值： 

<Columns>
  <Columns.Column size={1}>One</Columns.Column>
  <Columns.Column>Eleven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={2}>Two</Columns.Column>
  <Columns.Column>Ten</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={3}>Three</Columns.Column>
  <Columns.Column>Nine</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={4}>Four</Columns.Column>
  <Columns.Column>Eight</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={5}>Five</Columns.Column>
  <Columns.Column>Seven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={6}>Six</Columns.Column>
  <Columns.Column>Six</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={7}>Seven</Columns.Column>
  <Columns.Column>Five</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={8}>Eight</Columns.Column>
  <Columns.Column>Four</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={9}>Nine</Columns.Column>
  <Columns.Column>Three</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={10}>Ten</Columns.Column>
  <Columns.Column>Two</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={11}>Eleven</Columns.Column>
  <Columns.Column>One</Columns.Column>
</Columns>

对于基于百分比的大小，您可以将 size 设置为 one-fifth、one-quarter、one-third、half、[ X108X] 或 three-quarters： 

<Columns>
  <Columns.Column size="one-fifth">20%</Columns.Column>
  <Columns.Column>80%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-quarter">25%</Columns.Column>
  <Columns.Column>75%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-third">33.333333333%</Columns.Column>
  <Columns.Column>66.666666667%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="half">50%</Columns.Column>
  <Columns.Column>Also 50%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="two-thirds">66.666666667%</Columns.Column>
  <Columns.Column>33.333333333%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="three-quarters">75%</Columns.Column>
  <Columns.Column>25%</Columns.Column>
</Columns>

这两种网格系统的方法总共将分别达到 12 列或 100% r。

结论

在本文中，您使用 react-bulma-components 探索了 Bulma 的一些功能。

依靠一个得到良好支持和维护良好的 CSS 框架，您可以设计和设计您的项目。 它们可以有效地节省时间。

更多信息请参阅 Bulma 文档。

取自“https://cainiaojiaocheng.com/index.php?title=使用React介绍BulmaCSS&oldid=32559”
Powered by MediaWiki