Bulma CSS - 入门

    xiaoxiao2022-06-24  181


    Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式


    有数种方法可以安装Bulma:

    使用npm安装Bulma包使用cdnjs CDN链接到Bulma样式表从GitHub项目库获得最新的开发版本

    1. 使用npm安装Bulma包

    npm install bulma

    2. 使用cdnjs CDN

    https://cdnjs.com/libraries/bulma

    3. 从GitHub项目库下载

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

    Font Awesome 字体图标

    如果想使用图标,可加上Font Awesome 字体图标库:

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

    规范要求

    Bulma能正常工作需要把网页设置为支持响应式。

    1. 使用HTML5 doctype

    <!DOCTYPE html>

    2. 添加支持响应式的viewport元标记

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

    起始模板

    可以使用下面的模板作为写网页的起始模板:

    <!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-start

    如果习惯使用npm,可以使用Bulma-start。

    Bulma-start是一个很小的npm包,包含了使用Bulma开发网站的全部依赖项。

    Bulma-start 安装

    npm install bulma-start

    或者

    yarn add bulma-start

    详情可参考项目网址


    最新回复(0)