介绍
Bulma是一个 CSS 框架,具有助手、元素和组件,您可以在项目中使用 Bulma 类和 HTML 结构来创建可靠和可扩展的设计。
在本文中,您将使用 react-bulma-components,React中的Bulma CSS框架的更流行的实现之一。
前提条件
要完成本教程,您将需要:
- Node.js 的本地开发环境 遵循 如何安装 Node.js 并创建本地开发环境。
- 对 React 的一些熟悉。
本教程已通过 Node v16.2.0、npm v7.14.0、react v17.0.2 和 react-bulma-components v4.0.4 进行验证。
创建项目
开始使用 create-react-app来生成 React App,然后安装依赖:
1npx create-react-app react-bulma-components-example
更改到新项目目录:
1cd react-bulma-components-example
现在,您可以运行 React 应用程序:
1npm start
修复您的项目中的任何错误或问题,并在网页浏览器中访问localhost:3000。
一旦你有一个工作 React 应用程序,你可以开始添加react-bulma 组件:
1npm install [email protected]
在此时刻,你有一个新的React项目,其中包含了反应爆炸组件。
探索元素和组件
react-bulma-components 库支持 Bulma 元素、组件、表单和布局。
考虑使用按钮组件的例子,首先,您需要导入 Bulma 样式表,然后,您需要导入组件。
1[label src/App.js]
2import 'bulma/css/bulma.min.css';
3import { Button } from 'react-bulma-components';
4
5function App() {
6 return (
7 <div className="App">
8 <Button>Example</Button>
9 </div>
10 );
11}
12
13export default App;
这将产生与Bulma风格的按钮。
<$>[注]
**注:**在以前的版本中,可以指定组件的完整和lib特定的版本。
像大多数CSS框架一样,Bulma为您共同的组件提供风格和一系列定制,可以通过将不同的类添加到您的元素中来实现。
react-bulma-components通过为每个主要元素提供组件来进一步简化事情,并消除对类名称进行拼搏的必要性,以便将属性传递给您的组件。
想制作一个大按钮,使用危险颜色,具有圆形角落和外观?
1<Button
2 color="danger"
3 size="large"
4 rounded
5 outlined
6>
7 Example
8</Button>
所有反应弹性组件都可以接受一个 renderAs属性,允许您定义应该用什么类型的元素来渲染组件。
默认情况下,按钮组件被渲染为按钮元素,使用renderAs属性将其渲染为链接。
除了renderAs属性,我们还应该包含一个href,告诉它在他们点击链接时向人们发送:
1<Button
2 renderAs="a"
3 href="https://www.example.com"
4 color="danger"
5 size="large"
6 rounded
7 outlined
8>
9 Example
10</Button>
事实上,我们所有的Bulma组件都可以接受任何您可能抛弃的属性,这意味着您可以随时使用风格属性进行一些先进的样式设计,或者添加一些额外的CSS类用类名称。
当使用className时,您提供的任何类将被提前列入图书馆生成的 Bulma 类名单列表。
色彩
类似于大多数现代 CSS 框架,Bulma 提供一种使用某些语义命名惯例的色彩主题。
这些主题颜色包括主要,链接,信息,成功,警告和危险。
此外,还有一些更多的字面颜色可用:黑色,黑色,光明和白色。
支持颜色的组件接受一个颜色属性:
1<Button color="success">Example</Button>
由于此颜色属性会将类分配回渲染元素,您不能仅仅分配任意颜色值。
尺寸
多个组件接受一个大小属性,但它们可能接受不同类型的值。
这是因为某些组件(如标题)使用数字值:
1<Heading size={1}>Large Heading</Heading>
2<Heading size={2}>Not So Large Heading</Heading>
其他人(如按钮)则使用大小的文本名称:
1<Button size="large">Large Button</Button>
2<Button size="small">Small Button</Button>
对于接受文本大小的组件,您可以使用小、正常、中等和大大小。
使用网格系统
Bulma 还支持一个网格系统,以协助以一致的方式布局内容. 默认情况下,Bulma 使用使用使用百分比或列数的 12 列布局。
首先,您需要导入组件:
1import { Columns } from 'react-bulma-components';
对于基于12列布局的尺寸,您将尺寸设置为1和12之间的数字值:
1<Columns>
2 <Columns.Column size={1}>One</Columns.Column>
3 <Columns.Column>Eleven</Columns.Column>
4</Columns>
5
6<Columns>
7 <Columns.Column size={2}>Two</Columns.Column>
8 <Columns.Column>Ten</Columns.Column>
9</Columns>
10
11<Columns>
12 <Columns.Column size={3}>Three</Columns.Column>
13 <Columns.Column>Nine</Columns.Column>
14</Columns>
15
16<Columns>
17 <Columns.Column size={4}>Four</Columns.Column>
18 <Columns.Column>Eight</Columns.Column>
19</Columns>
20
21<Columns>
22 <Columns.Column size={5}>Five</Columns.Column>
23 <Columns.Column>Seven</Columns.Column>
24</Columns>
25
26<Columns>
27 <Columns.Column size={6}>Six</Columns.Column>
28 <Columns.Column>Six</Columns.Column>
29</Columns>
30
31<Columns>
32 <Columns.Column size={7}>Seven</Columns.Column>
33 <Columns.Column>Five</Columns.Column>
34</Columns>
35
36<Columns>
37 <Columns.Column size={8}>Eight</Columns.Column>
38 <Columns.Column>Four</Columns.Column>
39</Columns>
40
41<Columns>
42 <Columns.Column size={9}>Nine</Columns.Column>
43 <Columns.Column>Three</Columns.Column>
44</Columns>
45
46<Columns>
47 <Columns.Column size={10}>Ten</Columns.Column>
48 <Columns.Column>Two</Columns.Column>
49</Columns>
50
51<Columns>
52 <Columns.Column size={11}>Eleven</Columns.Column>
53 <Columns.Column>One</Columns.Column>
54</Columns>
对于基于百分比的大小,您可以将大小设置为五分之一,四分之一,三分之一,一半,三分之二或四分之三:
1<Columns>
2 <Columns.Column size="one-fifth">20%</Columns.Column>
3 <Columns.Column>80%</Columns.Column>
4</Columns>
5
6<Columns>
7 <Columns.Column size="one-quarter">25%</Columns.Column>
8 <Columns.Column>75%</Columns.Column>
9</Columns>
10
11<Columns>
12 <Columns.Column size="one-third">33.333333333%</Columns.Column>
13 <Columns.Column>66.666666667%</Columns.Column>
14</Columns>
15
16<Columns>
17 <Columns.Column size="half">50%</Columns.Column>
18 <Columns.Column>Also 50%</Columns.Column>
19</Columns>
20
21<Columns>
22 <Columns.Column size="two-thirds">66.666666667%</Columns.Column>
23 <Columns.Column>33.333333333%</Columns.Column>
24</Columns>
25
26<Columns>
27 <Columns.Column size="three-quarters">75%</Columns.Column>
28 <Columns.Column>25%</Columns.Column>
29</Columns>
这些对网格系统的两种方法将共计12个列,分别为100%。
结论
在本文中,您探讨了Bulma的一些特征,其中包括反应Bulma成分。
依靠一个支持良好的和维护良好的CSS框架,可以让你设计和设计你的项目,它们可以有效地节省时间。
请参阅 Bulma 文档以获取更多信息。