css模板 bulma_用Bulma在6分钟内学习CSS框架

古城微笑少年丶 2022-12-03 01:45 32阅读 0赞

css模板 bulma

In this tutorial, we’ll be getting started with Bulma, a modern CSS Framework built on Flexbox. For best results, follow along with the video at the end by [OpenSource Craft][]. If you want to learn why you should care about Bulma, check out [this video][].

在本教程中，我们将开始使用Bulma，Bulma是基于Flexbox构建的现代CSS框架。 为了获得最佳效果，请紧随[其后的][OpenSource Craft]是[OpenSource Craft][]的视频。 如果您想了解为什么要关心布尔玛，请[观看此视频][this video] 。

![布尔玛示例1][1]

We’ll be building a Coding Quotes page, utilizing Bulma’s UI components including a Hero banner, Columns, Cards, Buttons and more.

我们将利用Bulma的UI组件(包括英雄横幅，栏目，卡片，按钮等)来构建“编码报价”页面。

First, let’s install Bulma. You can quickly do so from the command line with **npm install Bulma**, or you can import the project like I have, with the following lines of code. The first line imports the Font Awesome library so we can use their icons.

首先，让我们安装Bulma。 您可以使用**npm install Bulma**从命令行快速执行此操作，也可以使用以下代码行导入与我一样的项目。 第一行导入了Font Awesome库，因此我们可以使用它们的图标。

Next, we’ll create the [Hero banner][] with a section element and the Bulma class `hero` and a div with the class of `hero-body`.

接下来，我们将创建一个带有section元素的[Hero横幅][Hero banner] ，以及一个Bulma类的`hero`和一个类的`hero-body`的div。

Then we’ll add some modifier classes to give the banner the primary color of our design with `is-primary`, and we’ll adjust its size with `is-medium`. Bulma’s class names and modifiers are readable and quite literal.

然后，我们将添加一些修饰符类，以`is-primary`为横幅提供设计`is-primary` ，并通过`is-medium`调整其尺寸。 Bulma的类名和修饰符可读性很强。

Within our `hero-body` div, we’ll add a `container` div for our `h1` and `h2`, which we’ll style as a `title` and `subtitle`, respectively. Giving the title an `is-1` modifier will make it large.

在`hero-body` div中，我们将为`h1`和`h2`添加一个`container` div，分别将其`hero-body`为`title`和`subtitle` 。 给标题加上`is-1`修饰符会使它变大。

<div class="container">
         <h1 class="title is-1">
            Coding Quotes
         </h1>
         <h2 class="subtitle">
            Like your favorites
         </h2>
     </div>

![布尔玛示例4][4]

That completes the top of our site, now let’s build some columns. First, we’ll `section` them off, then we’ll make a `container` for them.

这样就完成了我们网站的顶部，现在让我们建立一些专栏。 首先，我们将它们`section`开，然后为它们制作一个`container` 。

Inside our `container`, we’ll put our `columns` parent div.

在`container` ，我们将`columns`父div放置。

Then we’ll put three `column` divs within as children. They’ll automatically divide into thirds of their viewport, whether viewed horizontally or vertically (on mobile). Bulma is inherently fully responsive.

然后，我们将三个`column` div作为子元素放入其中。 无论是水平查看还是垂直查看(在移动设备上)，他们都会自动将其视口分成三部分。 布尔玛天生就具有充分的React能力。

![布尔玛示例3][3]

Within each column, we’ll insert a Bulma `card`, whose `card-content` will be a `title` and `subtitle`, for the quote and the programmer who said the quote.

在每一列中，我们将插入一张Bulma `card` ，该`card-content`将是`title`和`subtitle` ，以供引用，并由负责报价的程序员使用。

<div class="card">
        <div class="card-content">
            <h2 class="title">"Quote"</h2> 
            <h3 class="subtitle">Programmer</h3>
        </div>
    </div>

To make our like, dislike and share buttons, we’ll need a `card-footer`, then three `card-footer-items`, one for each `button` to live in. To color the buttons, we’ll add Bulma modifiers to turn them green (`is-success`), red (`is-danger`), and blue (`is-info`). Within the buttons, we’ll use Font Awesome’s classes to get a thumbs-up, thumbs-down and share icon.

为了使我们喜欢，不喜欢和共享按钮，我们需要一个`card-footer` ，然后需要三个`card-footer-items` ，每个`button` `card-footer-items`都必须存在一个。要给按钮着色，我们将添加Bulma修饰符以使其变为绿色( `is-success` )，红色( `is-danger` )和蓝色( `is-info` )。 在按钮内，我们将使用Font Awesome的类来获得大拇指，大拇指朝下和共享图标。

<div class="card">
        <div class="card-content">
            <h2 class="title">"Quote"</h2> 
            <h3 class="subtitle">Programmer</h3>
        </div>
        <footer class="card-footer">
            <span class="card-footer-item">
                <a href="#" class="button is-success">
                    <i class="fa fa-thumbs-o-up"></i>
                </a>
            </span>
            <span class="card-footer-item"> 
                <a href="#" class="button is-danger">
                    <i class="fa fa-thumbs-o-down"></i>
                </a>
            </span>
            <span class="card-footer-item">
                <a href="#" class="button is-info">
                    <i class="fa fa-retweet"></i>
                </a>
            </span>
        </footer>
    </div>

![布尔玛示例2][2]

Now that we’ve successfully crafted one column, we can simply copy and paste that **column’s** code to make our three columns, and our site is ready.

现在，我们已经成功地制作了一个专栏，我们只需复制并粘贴该**专栏的**代码以创建三个专栏，我们的网站就可以使用了。

<section class="section"> 
        <div class="container"> 
            <div class="columns">
    
                <div class="column">
                    <div class="card">
                        <div class="card-content">
                            <h2 class="title">"Quote"</h2> 
                            <h3 class="subtitle">Programmer</h3>
                        </div>
                        <footer class="card-footer">
                            <span class="card-footer-item">
                                <a href="#" class="button is-success">
                                    <i class="fa fa-thumbs-o-up"></i>
                                </a>
                            </span>
                            <span class="card-footer-item"> 
                                <a href="#" class="button is-danger">
                                    <i class="fa fa-thumbs-o-down"></i>
                                </a>
                            </span>
                            <span class="card-footer-item">
                                <a href="#" class="button is-info">
                                    <i class="fa fa-retweet"></i>
                                </a>
                            </span>
                        </footer>
                    </div>
                </div>
    
                <div class="column">
                    <div class="card">
                        <div class="card-content">
                            <h2 class="title">"Quote"</h2>
                            <h3 class="subtitle">Programmer</h3>
                        </div>
                        <footer class="card-footer">
                            <span class="card-footer-item">
                                <a href="#" class="button is-success">
                                    <i class="fa fa-thumbs-o-up"></i>
                                </a>
                            </span>
                            <span class="card-footer-item">
                                <a href="#" class="button is-danger">
                                    <i class="fa fa-thumbs-o-down"></i>
                                </a>
                            </span>
                            <span class="card-footer-item">
                                <a href="#" class="button is-info">
                                    <i class="fa fa-retweet"></i>
                                </a>
                            </span>
                        </footer>
                    </div>
                </div>
    
                <div class="column">
                    <div class="card">
                        <div class="card-content">
                            <h2 class="title">"Quote"</h2>
                            <h3 class="subtitle">Programmer</h3>
                        </div>
                        <footer class="card-footer">
                            <span class="card-footer-item">
                                <a href="#" class="button is-success">
                                    <i class="fa fa-thumbs-o-up"></i>
                                </a>
                            </span>
                            <span class="card-footer-item">
                                <a href="#" class="button is-danger">
                                    <i class="fa fa-thumbs-o-down"></i>
                                </a>
                            </span>
                            <span class="card-footer-item">
                                <a href="#" class="button is-info">
                                    <i class="fa fa-retweet"></i>
                                </a>
                            </span>
                        </footer>
                    </div>
                </div>
    
            </div>
        </div>
    </section>

![布尔玛示例1][1]

If you’re interested in learning more about Bulma, check out the [example sites][] and [documentation][] on Bulma.io. And for more content like this, visit [Open SourceCraft][].

如果您想了解有关Bulma的更多信息，请查看Bulma.io上的[示例网站][example sites]和[文档][documentation] 。 有关更多此类内容，请访问[Open SourceCraft][] 。

> 翻译自: [https://www.sitepoint.com/a-css-framework-in-6-minutes-with-bulma/][https_www.sitepoint.com_a-css-framework-in-6-minutes-with-bulma]

css模板 bulma

[OpenSource Craft]: http://codepop.com/open-sourcecraft/?utm_source=sitepoint&utm_medium=article&utm_campaign=open_sourcecraft_bulma&utm_content=top
[this video]: https://www.youtube.com/watch?v=bCTdyfHfUaI&feature=youtu.be
[1]: /images/20221123/86a5b78c36ea47fcb9b188088a7f92b9.png
[Hero banner]: http://bulma.io/documentation/layout/hero/?utm_source=sitepoint&utm_medium=article&utm_campaign=open_sourcecraft_bulma
[4]: /images/20221123/cba629d19247489da5a909d7ee1f358f.png
[3]: /images/20221123/d0049901028a4e269b9d04be0c0c74ef.png
[2]: /images/20221123/dfa2f5f6a8a64b41ada56f685c3e1207.png
[example sites]: http://bulma.io/made-with-bulma/?utm_source=sitepoint&utm_medium=article&utm_campaign=open_sourcecraft_bulma
[documentation]: http://bulma.io/documentation/overview/start/?utm_source=sitepoint&utm_medium=article&utm_campaign=open_sourcecraft_bulma
[Open SourceCraft]: http://codepop.com/open-sourcecraft/?utm_source=sitepoint&utm_medium=article&utm_campaign=open_sourcecraft_bulma&utm_content=bottom
[https_www.sitepoint.com_a-css-framework-in-6-minutes-with-bulma]: https://www.sitepoint.com/a-css-framework-in-6-minutes-with-bulma/