CSSチップ

3130 ワード
html css bulma テキストリンク
私は数年前に初めて発見して以来、ブルマの大ファンです.Bulma はフリーでオープンソースのCSSフレームワークである.

シンプルネス


私は、Bulmaが純粋にCSSとJavaScriptでないという事実が好きです.Here's a nice comparison with Bootstrap . クラス名と修飾子はすべて覚えて直感的です.(何度か使用した後、すぐに修飾子の命名規則を取ります.また、カスタマイズするか、上書きするのが非常に簡単です!important ).

チップ


ここでは、Bulmaのテーブルクラスを使用した簡単なテーブルを示します.
<table class="table is-fullwidth">
    <tr>
      <td>Hall of Fame</td>
    </tr>
    <tr>
      <td>Michael Jordan</td>
    </tr>
    <tr>
      <td>Magic Johnson</td>
    </tr>
    <tr>
      <td>Larry Bird</td>
    </tr>
    <tr>
      <td>Shaq</td>
    </tr>
  </tbody>
</table>

ほとんどの人のように、私はHTMLテーブルを書くことを楽しみません.それは多くのマークアップです.
しかし、あなたがBulmaのものを使うならば.panel-block クラスは、はるかに少ないマークアップを見てのように同じテーブルを達成することができます.
<p class="panel-block">Hall of Fame</p>
<p class="panel-block">Michael Jordan</p>
<p class="panel-block">Magic Johnson</p>
<p class="panel-block">Larry Bird</p>
<p class="panel-block">Shaq</p>
その結果です.(少し大きめのパディングトップとパディングボトムは同様に少し読みやすくなります.)

読書ありがとう.その他のbulma“ハッキング”とヒント来る.
mac / mac bookのトラックパッドでマウスジェスチャーする方法
Macキーボード配列の改造計劃