跳到主要内容

从Bulma开始

Bulma
+$(Image Credit: Bulma)

+$Want to get started using Bulma? You're in the right place. Bulma is a popular CSS framework with a simple flexbox grid system. It differs from other frameworks by taking a lighter approach and not including any JavaScript – leaving that decision entirely up to the developer (to explore other options, see our pick of the+$best CSS Frameworks)。

+$In this tutorial, we will demonstrate how to install Bulma, and build a website with its various classes. To prove how versatile the classes are in Bulma, the entire tutorial page has been built without writing a single line of CSS.

Generate flash sale

(形象信用:未来)

+$Generate CSS is the hottest web event in town. From 20-22 Sept you can pick up a ticket for half price using the code+$FLASHSALE5.+$Click the image to find out more.

01.开始吧

+$(Image Credit: Bulma)

+$Create a new directory, and within it, create an的index.html+$file. Open this file in a code editor and create a simple starter HTML document, with a DOCTYPE html and a responsive viewport tag.

+$    Page Title    

+$02. Install Bulma

+$Using Bulma out the box is as fast as adding a single CSS file. Using the CDN add a link in the HTML. If it is necessary to change variables and have more control over the framework,+$npm Install Bulma+$can be used (see the完整的文档+$). For the full experience, font awesome 5 should also be included.

+$ 

+$03. Build A Page

+$(Image Credit: Bulma)

+$Inside the body tag, create a section element and a div with the class容器+$. Within the container, create an h1 with the class标题+$then a paragraph with the class字幕+$. For now, input 'hello world' into the title and some text into the paragraph. We now have the basic starter template for Bulma.

+$

Hello World

This is the basic starter template for Bulma

+$04. Create a top hero bar

+$Make a new section above the previous one, and instead of the class部分+$, give it the class+$hero+$. The hero class allows the creation of a full-width banner, with a variety of options controlling its height. Within this new section create a div with the class+$hero-body+$and Then A容器+$this will hold the content.

+$
...

+$05. Add title and subtitles

+$Inside the container div, add an h1 and h2 tag with the classes标题字幕+$. These are typography classes that will increase the size of their content. Bulma is smart to know when a title and subtitle are combined, and will bring them closer together.

+$06. Add a splash of colour

+$(Image Credit: Bulma)

添加课程+$is-primary+$to the hero section. This will apply the primary colour to the background, and change the text to the lighter variant. Instead of信息成功+$warning+$danger+$can also be chosen

+$

+$07. Split the content into columns

+$The first content area of the website is split into two columns. Make a new section with the class section and add a container. To set up the columns, a div is added with+$class. Each column is added within the parent container. Columns will space themselves equally in the available space with a small gap between unless specified.

+$
...
...

+$08. Create Responsive Images

+$(Image Credit: Bulma)

+$The second column will contain an image. Wrap the image in a figure element, and, if possible, give the figure a class of the aspect ratio of the image. In the example,+$16by9+$has been used (see the+$full list of available ratios)。

+$

+$09. Suggest action with buttons

+$The button class creates colourful buttons and can be applied+$elements Or

请参阅更多Web设计文章

话题

CSS

相关文章



翻译字数超限