Bulma概述

2020-10-10 19:41发布

开始使用Bulma

 

1.使用npm

npm install bulma
 
//或者
 
cnpm install bulma

2.使用CDN

  https://cdnjs.com/libraries/bulma

3.下载源文件

  https://github.com/jgthms/bulma/tree/master/css

4.如果使用图标,请附加Font Awesome

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

 

Bulma代码规范

 

1.使用html5声明

<!DOCTYPE html>

2.添加响应式标签

<meta name="viewport" content="width=device-width, initial-scale=1">

3.一份完整的demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

 


 

私人订制Bulma

 

1.下载源文件

   https://github.com/jgthms/bulma

2.设置变量,个性化定制

// 1. 导入初始化的变量
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";
 
// 2. 设置你自己的变量
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;
 
// 3. 设置变量继承
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;
 
// 4. 设置常规颜色
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);
 
// 5. 添加新的颜色变量映射
@import "../sass/utilities/derived-variables.sass";
$addColors: (
  "twitter":($twitter, $twitter-invert),
  "linkedin": ($linkedin, $linkedin-invert),
  "github": ($github, $github-invert)
);
$colors: map-merge($colors, $addColors);
 
// 6. 导入bulma
@import "../bulma";


 

Bulma常用颜色

 



作者:dayAndnight2018

链接:https://blog.csdn.net/Day_and_Night_2017/article/details/85258776

来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。