부르마 소개

2360 단어 cssbulma
나는 최근에 내가 만들고 있는 작은 반응 앱에 Bulma라는 CSS 프레임워크를 사용하기 시작했는데, 이는 CSS를 크게 향상시킵니다. 오픈 소스이며 기준과 개념을 표준화하고 프론트엔드 개발 전반에 걸쳐 상당히 많은 문제를 다룹니다. Flexbox를 기반으로 하며 레이아웃 사용자 지정에 필요한 CSS 코드의 양을 줄입니다.

그것은 배우기 매우 쉽고 공식 사이트에 시작하기 위한 많은 템플릿이 있습니다. Bulma는 또한 모듈식이므로 사용자가 .sass 파일을 가져와서 버튼 스타일이나 열과 같은 일부를 사용할 수 있습니다. 또한 프론트엔드 레이아웃에 필요할 수 있는 모든 구성 요소를 포함하고 있으며 대부분의 웹 브라우저와도 호환됩니다.

설치
npm install bulma
또한 HTML5 문서 유형을 사용하여 Bulma가 올바르게 작동하도록 웹 페이지를 반응형으로 만들어야 합니다.
<!DOCTYPE html>
또는 반응형 뷰포트 메타 태그를 추가합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
빠른 가이드

공식 사이트의 HTML 시작 템플릿:

<!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://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  </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 수정자 클래스를 사용하면 거의 모든 Bulma 요소에 대체 스타일을 설정할 수 있습니다. is- 또는 has-로 시작하여 원하는 스타일을 뒤에 추가합니다. 버튼이 있는 예:

    • <button class="button">
   Button
</button>

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


    공식 사이트의 문서에서 볼 수 있는 색상, 카드, 컨테이너, 드롭다운 등과 같은 더 많은 구성 요소가 있습니다. 또한 React, Vue 및 기타 프레임워크를 위한 Bulma 라이브러리가 있습니다.

    참고문헌
  • https://bulma.io/
  • https://bulmastyle.com/
  • https://blog.devmountain.com/why-bulma-css-could-be-your-new-favorite-framework/
    • Java의 불변 클래스
    ActiveJS를 사용한 비동기 상태 관리

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage