資源と短い導入

11800 ワード
appseed css bulma テキストリンク
こんにちは、コーダ.
この記事では、いくつかのリソースと基本的な情報を紹介しますBulma Css - Flexboxに基づくオープンソースのCSSフレームワーク.
ブルマはCSSフレームワークの戦場への比較的新しい参加者であり、短期間で自分自身の名前を作った.

Thanks for reading! - Content provided by App Generator.

  • (無料)BulmaPlay - オープンソーススターター
  • (無料)Bulma Starter - 超簡単な1ページスターター
  • (無料)Bulma Fresh - 活気のあるCSSでスタイリッシュなページデザイン
  • (無料)Bulma Krypton - CCMAでスタイリッシュなスターター

  • Flask Dashkit - プレミアムバルマスターター

  • Django Dashkit - プレミアムバルマスターター

    • ブルマ遊び


    シンプルな、1ページスターターは、bulma v 0でスタイルを整えました.GithubのMITライセンスの下でリリースされました.単純なフラスコスターターであることから、このbulmaベースのデザインは、Django、FastAPIのようなどんなベースのフレームワークにでも容易に統合されることができます.

  • BulmaPlay - 製品ページ

  • BulmaPlay Demo - ライブ展開

    • フレッシュマン


    これは、ハンバーガーメニューと認証フォームのポップアップと超簡単な1ページのスターターです.UIはCSSの忍者エージェンシーによって作られ、コードは、直接MITIライセンスの下でGithubからダウンロードすることができます.

  • Bulma Fresh - ソースコード

  • Bulma Fresh Demo - ライブ展開

    • ブルマクリプトン


    クリプトンは、CSSニンジャStudioによって建設される1ページ着陸ページ・スターターです.クリプトンはMITライセンスの下で認可されて、この許容許可証に基づきます

  • Bulma Krypton - ソースコード

    • フラスコダッシュキット


    ダッシュボードのダッシュボードのデザインの上にフラスコフレームワークでコード化された管理ダッシュボード.

  • Flask Dashkit PRO - 製品ページ

  • Flask Dashkit PRO - Demo - ライブ展開

    • ジャンゴダッシュキット


    管理ダッシュボードダッシュボードのデザインの上にdjangoフレームワークでコード化された.

  • Django Dashkit PRO - 製品ページ

  • Django Dashkit PRO - Demo - ライブ展開

    • 球根CSS


    Getting started


    Bulmaで基本的なウェブページをコーディングすることは、全く簡単です.CDNで利用できるCSSファイルを含める必要があります.
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma CSS - Starter Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"  crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />

</head>
<body>
    <div class="container is-fluid">
        <!-- Add here Bulma Stuff -->
    </div>
</body>
</html>
    bulmaとフォントは、CDNを介してロードされます.

  • bulma.min.css - 小型化バージョン0.9.1

  • font-awesome - ミニバージョンV 5.15

    • ブルマ構文


    Modifiers


    あなたがBulmaについて学ぶべきである最初のものは修飾子クラスです.これらはほとんどすべてのbulma要素に代替のスタイルを設定することができます.それらはすべて始まります-*、-*、そして、あなたはあなたが望むスタイルと*を交換します.たとえば、いくつかのスタイルのボタンを追加しましょう.
    <!DOCTYPE html>
<html>
  <head>
  <body>
  ...
        <p>
            <button class="button">
              Button
            </button>

            <button class="button is-primary">
              Primary button
            </button>

            <button class="button is-large is-warning">
              Large button
            </button>
        </p>
  ...
  </body>
</html>

    And the result



    より多く...ボタン


    いくつかの単純なボタンをコード化するコードスニペットはかなり簡単です.
    <button class="button is-primary is-small">Small</button>
<button class="button is-link">Default</button>
<button class="button is-warning is-normal">Normal</button>
<button class="button is-success is-medium">Medium</button>
<button class="button is-danger  is-large">Large</button>
    このコードの出力は、スクリーンショットのようになります.

    bulma反応性


    Bulmaのすべての要素は、最初の携帯電話であり、垂直方向の読書のために最適化するので、デフォルトでモバイルと使用して5breakpoints : モバイル(最大768 px)、タブレット(769 pxから)、デスクトップ

    ブルマ色


    要素の色を設定するには、目的色の前にis -*を使用する必要があります.
    .is-danger
.is-warning

    ヒーローコンポーネント


    このコンポーネントは、主なコンテナとしてクラス“Hero”を使用することによって呼び出されることができます.

    チームカード


    我々のチームまたは価格設定のためにカードを使用することは、多くのテンプレートで使われるかなり一般的な構成要素です.Bulmaは最小限のCSSコードを使用してチームセクションをコード化するのに役立ちます.

    最初のカードを見て、関連するCSSクラスを解析しましょう.
    <div class="column is-4">
    <div class="level">
        <div class="level-item">
            <figure class="image is-128x128">
                <img class="is-rounded" src="media/team-1.jpg" alt="">
            </figure>
        </div>
    </div>
    <h5 class="title is-5">Angelina Jolie</h5>
    <p class="subtitle is-6">CEO</p>
    <p>When I'm not obsessively stressing ...</p>
</div>
  • カードの幅には4セル(3枚のカードが必要です)
  • イメージは図形コンテナを持ち、内側は
  • 記述子「IS - 5」と「IS - 6」はheadings オブジェクト

    • Thanks for reading! For more resources, please access:


  • Bulma.io - 公式ウェブサイト
  • その他Bulma CSS Appseedによって提供されるスターター

    • Btw, my (nick) name is Sm0ke and I'm pretty active also on .

    Devlog 9日目お気に入りリストの更新
    script-関数