Bulma 响应式默认垂直

Bulma是一个功能强大的开源CSS框架， 它是根据Flexbox构建的。 Bulma可以用于创建响应式，现代UI，以及支持所有最新的浏览器和设备。

特征

• 100%响应式，可以适应任何尺寸的屏幕
• 支持所有主要浏览器和设备
• 根据Flexbox构建，支持多种布局
• 内置丰富的UI组件和样式

布局

Bulma根据Flexbox构建，因此可以实现多种布局，例如：

列表和卡片布局

使用Bulma，可以方便地实现列表和卡片布局。例如，以下代码片段实现了一个简单的垂直列表布局：

<div class="columns">
  <div class="column">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

多列布局

使用Bulma，可以轻松地创建多列布局。例如，以下代码片段实现了一个简单的三列布局：

<div class="columns">
  <div class="column">
    <p>Column 1</p>
  </div>
  <<div class="column">
    <p>Column 2</p>
  </div>
  <div class="column">
    <p>Column 3</p>
  </div>
</div>

UI组件

Bulma内置了多个常见的UI组件，例如按钮，表单，导航栏，甚至过渡和动画。这些组件易于使用和自定义样式。

按钮

Bulma的按钮组件非常灵活，可以用于各种场景，并提供多种样式。例如，以下代码片段实现了典型按钮样式，以及一些其他样式的按钮：

<button class="button">Submit</button>
<button class="button is-primary">Primary</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>

表单

Bulma的表单组件非常灵活，并提供多种样式和布局。例如，以下代码片段实现了一个简单的表单布局：

<form>
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="Your name">
    </div>
  </div>
  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" placeholder="Your email">
    </div>
  </div>
  <div class="field">
    <label class="label">Message</label>
    <div class="control">
      <textarea class="textarea" placeholder="Your message"></textarea>
    </div>
  </div>
  <div class="field">
    <div class="control">
      <button class="button is-primary">Send Message</button>
    </div>
  </div>
</form>

导航栏

Bulma的导航栏组件具有各种选项，例如固定到屏幕顶部，支持下拉菜单，支持居中对齐等。例如，以下代码片段实现了一个其固定到屏幕顶部的导航栏：

<nav class="navbar is-fixed-top">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="" />
    </a>

    <div class="navbar-burger burger" data-target="navbarMenu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navbarMenu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="#">Sign Up</a>
      <a class="navbar-item" href="#">Login</a>
    </div>
  </div>
</nav>

结论

Bulma是一个强大的CSS框架，能够轻松创建现代响应式UI。有了丰富的布局选项和内置的UI组件，您可以轻松地创建与您的品牌或应用程序相匹配的定制UI。