+$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 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.
+$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
+$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.
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
添加课程+$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
+$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+$elements in forms.Add two buttons to the first column and apply colour modifiers to them. If using more than one button, wrap them in a div with the class+$buttons+$, which corrects the gap and allows the application of classes as a group.
+$Add a new section at the bottom of the page with three columns. Within the columns, a box element is added. Box elements are simple containers with a border around them that separate them from the background of a page.
+$11. Use Iconic Boxes
+$Bulma integrates with Font Awesome 5, but is compatible with all font libraries, and has classes to call most available icons. Inside each box, add a content container, followed by a span element with the class图标+$. Inside the span, use an+$element to call the required classes for the desired icon. Icons are coloured the same way as text.
+$12. Be Bold
+$Create a new two-column hero section at the bottom of the page, giving an+$is-info+$class to the section. For an interesting effect, also apply the+$is-bold+$class to this section for a subtle gradient. This modifier works with all seven of the main colours.
+$13. Change The Levels
+$Levels are a great way to ensure elements are vertically centered in a row. Within a new section at the bottom of the page, add a div with the level class and nest inside four level items. Any content added within a level item will be vertically aligned.
+$14. Add and control forms
+$To add a form to the bottom of the page, make a new two-column hero section with+$is-primary+$. Split it into two columns, and in the right column, create a领域+$class. The field class is used to group several form inputs together, ensuring they are spaced properly. Every input must also be wrapped in an individual+$.control类。
+$15. Give Users Feedback
+$Once a form is submitted, it should return a message to users so that they will know what happens next. Although Bulma is not able to control when this message will be displayed, the front end can be built with the message class.
+$16. Add A Footer
+$The flexible footer class allows any element to be added at the bottom of a page, providing a place for copyright info and bottom navigation, as well as bringing a finish to the website.
+$17. Customise Variables
+$Most projects, beyond prototypes, will have a requirement to work with a brand guideline and colours. Similarly, it is safe to assume a designer will need to change the fonts, colours or other aspects of Bulma. A major part of Bulma is that it is customisable and modular. Not only can modules be selectively imported, but up to 415 Sass variables can be changed within the framework.
+$The use of variables means setting a new colour as primary will change that colour across the entire Bulma framework for that project. Setting this up can be tricky at first, but guides have been provided using+$three Different Methods+$in The Documentation.
+$This article was originally published in issue 289 of creative web design magazine网页设计者。购买第289期要么订阅这里。