Bulma 시작하기

찾기
(이미지 출처 : Bulma)

Bulma 사용을 시작 하시겠습니까? 당신은 올바른 위치에 있습니다. Bulma는 간단한 flexbox 그리드 시스템이있는 인기있는 CSS 프레임 워크입니다. 자바 스크립트를 포함하지 않고 더 가벼운 접근 방식을 취한다는 점에서 다른 프레임 워크와 다릅니다.이 결정은 전적으로 개발자에게 맡기십시오 (다른 옵션을 살펴 보려면 최고의 CSS 프레임 워크 ).

이 튜토리얼에서는 Bulma를 설치하는 방법과 다양한 클래스로 웹 사이트를 구축하는 방법을 보여줍니다. Bulma에서 클래스가 얼마나 다재다능한 지 증명하기 위해 전체 자습서 페이지는 CSS 한 줄을 작성하지 않고 작성되었습니다. 다른 옵션을 원하십니까? 훌륭한 시도 웹 사이트 빌더 . 그리고 사이트가 최상의 상태로 실행되도록하려면 올바른 웹 호스팅 서비스.

플래시 세일 생성



(이미지 출처 : Future)

CSS 생성은 마을에서 가장 인기있는 웹 이벤트입니다. 9 월 20 일부터 22 일까지 코드를 사용하여 반값에 티켓을 수령 할 수 있습니다. FLASHSALE5. 자세한 내용을 보려면 이미지를 클릭하십시오.

01. 시작하기

Bulma : 시작하기

(이미지 출처 : Bulma)

새 디렉토리를 만들고 그 안에 index.html 파일. 코드 편집기에서이 파일을 열고 DOCTYPE html 및 반응 형 뷰포트 태그가있는 간단한 시작 HTML 문서를 만듭니다.

Page Title

02. 설치 찾기

Bulma를 사용하는 것은 단일 CSS 파일을 추가하는 것만 큼 빠릅니다. CDN을 사용하여 HTML에 링크를 추가하십시오. 변수를 변경하고 프레임 워크를 더 많이 제어해야하는 경우 npm 설치 Bulma 사용할 수 있습니다 ( 전체 문서 ). 완전한 경험을 위해 font awesome 5도 포함되어야합니다.

03. 페이지 구축

Bulma : 안녕하세요 세계

(이미지 출처 : Bulma)

body 태그 안에 섹션 요소와 클래스가있는 div를 만듭니다. 컨테이너 . 컨테이너 내에서 클래스로 h1을 만듭니다. 표제 그런 다음 수업과 함께 단락 부제 . 지금은 제목에 'hello world'를 입력하고 단락에 텍스트를 입력합니다. 이제 Bulma의 기본 시작 템플릿이 있습니다.

Hello World

This is the basic starter template for Bulma

04. 최고의 영웅 바 만들기

이전 섹션 위에 클래스 대신 새 섹션을 만듭니다. 부분 , 수업을 줘 영웅 . hero 클래스를 사용하면 높이를 제어하는 ​​다양한 옵션을 사용하여 전체 너비 배너를 만들 수 있습니다. 이 새 섹션 내에서 클래스로 div를 만듭니다. 영웅 몸 그리고 컨테이너 콘텐츠가 보관됩니다.

...

05. 제목 및 부제 추가

컨테이너 div 안에 클래스와 함께 h1 및 h2 태그를 추가합니다. 표제부제 . 콘텐츠의 크기를 늘리는 타이포그래피 클래스입니다. Bulma는 제목과 부제목이 결합 된시기를 아는 것이 현명하며이를 더 가깝게 만듭니다.



클립 스튜디오 페인트 새 하위 도구 그룹 만들기

06. 스플래시 색상 추가

찾기 : 색상

(이미지 출처 : Bulma)

수업 추가 is-primary 영웅 섹션에. 이렇게하면 배경에 기본 색상이 적용되고 텍스트가 더 밝은 변형으로 변경됩니다. 대신에 일 순위 , 정보 , 성공 , 경고 , 위험 , 어두운 또한 선택할 수 있습니다

07. 콘텐츠를 열로 분할

웹 사이트의 첫 번째 콘텐츠 영역은 두 개의 열로 나뉩니다. 클래스 섹션으로 새 섹션을 만들고 컨테이너를 추가합니다. 열을 설정하기 위해 div가 추가됩니다. 수업. 각 열은 상위 컨테이너 내에 추가됩니다. 열은 지정하지 않는 한 작은 간격을두고 사용 가능한 공간에서 균등하게 간격을 둡니다.

콘텐츠가 많은 경우 안정적인 클라우드 스토리지에 자산을 백업해야합니다.

... ...

08. 반응 형 이미지 만들기

Bulma : 반응 형 이미지

(이미지 출처 : Bulma)

두 번째 열에는 이미지가 포함됩니다. 그림 요소에 이미지를 래핑하고 가능하면 그림에 이미지 종횡비 클래스를 제공합니다. 예에서 16by9 사용되었습니다 ( 사용 가능한 비율의 전체 목록 ).

09. 버튼으로 작업 제안

버튼 클래스는 다채로운 버튼을 만들고 적용 할 수 있습니다. 요소 또는 두 개의 버튼을 첫 번째 열에 추가하고 색상 수정자를 적용합니다. 둘 이상의 버튼을 사용하는 경우 클래스와 함께 div로 래핑합니다. 버튼 , 격차를 수정하고 클래스를 그룹으로 적용 할 수 있습니다.

Find out more Buy now

10. 박스형 콘텐츠 만들기

Bulma : 박스형 콘텐츠

(이미지 출처 : Bulma)

페이지 하단에 세 개의 열이있는 새 섹션을 추가합니다. 열 내에 상자 요소가 추가됩니다. 상자 요소는 페이지 배경과 구분되는 테두리가있는 간단한 컨테이너입니다.

Test

11. 상징적 인 상자 사용

Bulma는 Font Awesome 5와 통합되지만 모든 글꼴 라이브러리와 호환되며 대부분의 사용 가능한 아이콘을 호출하는 클래스가 있습니다. 각 상자 안에 콘텐츠 컨테이너를 추가 한 다음 클래스가있는 범위 요소를 추가합니다. . 범위 내에서 원하는 아이콘에 필요한 클래스를 호출하는 요소입니다. 아이콘은 텍스트와 같은 방식으로 색상이 지정됩니다.

... ...

12. 대담하게

Bulma : 대담 해 져라

(이미지 출처 : Bulma)

페이지 하단에 새로운 2 열 히어로 섹션을 만들어 정보입니다 섹션에 클래스. 흥미로운 효과를 얻으려면 대담하다 미묘한 그라디언트를 위해이 섹션에 클래스. 이 수정자는 7 가지 주요 색상 모두에서 작동합니다.

13. 레벨 변경

레벨은 요소가 행에서 수직으로 중앙에 배치되도록하는 좋은 방법입니다. 페이지 하단의 새 섹션 내에서 수준 클래스가있는 div를 추가하고 4 개의 수준 항목 안에 중첩합니다. 레벨 항목 내에 추가 된 모든 콘텐츠는 수직으로 정렬됩니다.

... ...

14. 양식 추가 및 제어

페이지 하단에 양식을 추가하려면 다음을 사용하여 새로운 2 열 히어로 섹션을 만듭니다. is-primary . 두 개의 열로 분할하고 오른쪽 열에서 수업. 필드 클래스는 여러 양식 입력을 함께 그룹화하여 적절한 간격을 유지하는 데 사용됩니다. 모든 입력은 개별적으로 래핑되어야합니다. .제어 수업.

15. 사용자 피드백 제공

찾기 : 피드백

(이미지 출처 : Bulma)

양식이 제출되면 사용자에게 메시지를 반환하여 다음에 어떤 일이 발생하는지 알 수 있습니다. Bulma는이 메시지가 표시되는시기를 제어 할 수 없지만 프런트 엔드는 메시지 클래스로 빌드 할 수 있습니다.

Thank you!

드로잉을 벡터로 변환
...

유연한 바닥 글 클래스를 사용하면 페이지 하단에 모든 요소를 ​​추가 할 수 있으며, 저작권 정보 및 하단 탐색을위한 공간을 제공하고 웹 사이트를 마무리 할 수 ​​있습니다.

...

17. 변수 사용자 지정

프로토 타입을 넘어서 대부분의 프로젝트는 브랜드 가이드 라인과 색상에 따라 작업해야합니다. 마찬가지로 디자이너가 Bulma의 글꼴, 색상 또는 기타 측면을 변경해야한다고 가정하는 것이 안전합니다. Bulma의 주요 부분은 사용자 정의 가능하고 모듈 식이라는 것입니다. 모듈을 선택적으로 가져올 수있을뿐만 아니라 프레임 워크 내에서 최대 415 개의 Sass 변수를 변경할 수 있습니다.

변수를 사용한다는 것은 새 색상을 기본으로 설정하면 해당 프로젝트의 전체 Bulma 프레임 워크에서 해당 색상이 변경됨을 의미합니다. 이 설정은 처음에는 까다로울 수 있지만 다음을 사용하여 가이드가 제공되었습니다. 세 가지 방법 문서에서.

이 기사는 원래 크리에이티브 웹 디자인 잡지 289 호에 게재되었습니다. 웹 디자이너 . 289 호 구매 또는 여기에서 구독하세요 .

더 읽어보기 :