5분 안에 Bulma CSS 학습

Bulma는 간단하고 우아하며 현대적인 CSS 프레임워크로 많은 개발자들이 Bootstrap이 아니라 그것을 더 좋아한다.개인적으로 나는 Bulma가 기본적으로 더 좋은 디자인을 가지고 있고 더욱 가볍다고 생각한다.
이 강좌에서, 나는 당신을 위해 이 라이브러리를 신속하게 소개할 것입니다.

We’ve also created a free Bulma course.

너는 사진을 클릭하여 수업에 들어갈 수 있다.

설치

Bulma 설정은 매우 간단합니다. NPM을 좋아하든 from the docs을 다운로드하든 CDN을 사용하든 몇 가지 다른 방식으로 할 수 있습니다.다음과 같이 HTML 파일에서 CDN으로 연결합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">

그러면 Bulma 클래스에 액세스할 수 있습니다.사실 이것이 바로 Bulma의 전부인 한 종류의 집합이다.

수정기

Bulma에 대해 당신이 알아야 할 첫 번째 일은 수식부류입니다.이렇게 하면 거의 모든 Bulma 요소에 대해 대체 스타일을 설정할 수 있습니다.모두 is-* 또는 has-*으로 시작하여 원하는 스타일로 *을 대체합니다.
이 개념을 정확하게 이해하기 위해서 단추부터 시작합시다.

버튼

일반 단추를 Bulma 단추로 바꾸려면 button 종류만 주면 됩니다.

<button class="button">Click here</button>

그러면 다음 스타일이 생성됩니다.

보시다시피 기본적으로 그것은 매우 좋은 평면 설계를 가지고 있습니다.스타일을 변경하려면 Bulma 수정기를 사용합니다.단추를 더 크게, 녹색, 원각으로 만듭니다.

<button class="button **is-large is-success is-rounded**">Click here</button>

이 결과는 보기 좋은 버튼이다.

수정기를 사용하여 버튼의 상태를 제어할 수도 있습니다.예를 들어 클래스 is-focused을 추가하면 그 주위에 테두리를 추가합니다.

마지막으로 우리는 has-* 수식자 중의 하나를 사용한다.이런 것들은 일반적으로 요소 내부의 내용을 제어한다.우리의 예에서, 텍스트.has-text-weight-bold을 더해보겠습니다.
결과는 다음과 같습니다.

나는 당신이 이 시스템의 유연성을 이해하기 위해 여러 종류의 조합을 시도해 보라고 건의합니다.이런 조합은 거의 무궁무진하다.자세한 내용은 문서의 buttons section을 참조하십시오.

기둥

모든 CSS 프레임워크의 핵심은 열 문제를 어떻게 해결하는가이다. 왜냐하면 이것은 당신이 구축한 모든 사이트와 거의 관련이 있기 때문이다.Bulma는 Flexbox를 기반으로 하므로 열 작성이 간단합니다.4열을 포함하는 줄을 만듭니다.

<div class="columns">  
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

우선, 우리는 용기 <div>을 만들었고, 그 종류는 columns이며, 그 다음에 우리는 모든 아이에게 column의 종류를 주었다.결과는 다음과 같습니다.

나는 열 주위에 테두리를 추가해서 더욱 뚜렷하게 했다.
임의의 열을 추가할 수 있습니다.Flexbox는 이들 사이에 공간을 균등하게 할당합니다.
열의 색을 주기 위해서, 우리는 <p> 표기로 그 중의 텍스트를 대체하고, notification 클래스와 is-* 수식자를 줄 수 있다.예:
제1열is-info, is-success, is-warning 및 is-danger 수식자를 사용하여 이 작업을 수행합니다. 결과는 다음과 같습니다.
notification 클래스는 실제적으로 사용자에게 몇 가지 일을 일깨워 줍니다. is-* 수식자를 사용하여 배경을 색으로 채울 수 있기 때문입니다.여기서, 그것은 열을 잘 분리할 수 있다.
우리는 또한 열의 폭을 쉽게 제어할 수 있다.is-half 수식자를 녹색열에 추가합니다.

<div class="column is-half">    

이로 인해 2열은 현재 절반의 너비를 차지하고 다른 3열은 각각 나머지 절반의 3분의 1을 차지한다.

다음은 열 너비를 제어하는 데 사용할 수 있는 옵션입니다.

is-three-quarters

is-two-thirds

is-half

is-one-third

is-one-quarter

is-four-fifths

is-three-fifths

is-two-fifths

is-one-fifth

영웅

마지막으로 우리는 Bulma에서 영웅을 만드는 방법을 배울 것이다.우리는 의미 <section>을 사용하여 hero과 is-info의 종류를 주고 색깔을 줄 것이다.<div> 클래스에 hero-body 하위 레벨을 추가해야 합니다.

<section class="hero is-success">  

이 영웅이 의미 있는 일을 하기 위해서, 우리는 본문에 용기 요소를 추가하고, 제목과 부제목을 추가할 것이다.

<div class="container">
  <h1 class="title">Primary title</h1>
  <h2 class="subtitle">Primary subtitle</h2>
</div>

지금부터 괜찮아 보여요!만약 우리가 그것이 더 커지기를 원한다면, 우리는 간단하게 is-medium 표기 자체에 <section>을 추가할 수 있다.

<section class="hero is-info is-medium">  ...</section>

이렇게!
이제 Bulma의 작동 원리를 기본적으로 이해하셨습니다.가장 좋은 것은 이 라이브러리의 나머지 부분은 당신이 지금까지 본 개념처럼 직관적이고 간단하다는 것이다.따라서 이 점을 이해하면 나머지 부분을 이해할 수 있을 것이다.

Be sure to check out the if you want to learn more!

읽어주셔서 감사합니다!저는 Per라고 합니다. 공동 창시자입니다. 저는 사람들이 새로운 기술을 배우는 것을 돕는 것을 좋아합니다.새 기사와 자원에 대한 통지를 받고 싶으시면 저에게 연락 주세요.