开始使用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
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。