Bulma CSS-리소스 및 소개
본고에서 저는 Bulma Css에 대한 자원과 기본 정보를 소개할 것입니다. 이것은 Flexbox 기반의 소스 CSS 프레임워크입니다.
Bulma는 CSS 프레임워크 전장에서 상대적으로 새로운 진입자로서 짧은 시간 안에 유명해졌다.
Thanks for reading! - Content provided by App Generator.
Flask Dashkit - 프리미엄 Bulma 기동기
Django Dashkit - 프리미엄 Bulma 기동기
Bulma 게임
Github의 MIT 라이센스에 따라 배포된 BulmaV0.9.1 버전의 간단한 시작 페이지입니다.간단한 Flask 이니시에이터로서 이러한 Bulma 기반 디자인은 Django, FastAPI 같은 Python 기반 프레임워크에 쉽게 통합될 수 있다.
BulmaPlay - 제품 페이지
BulmaPlay Demo - 실시간 배포
Bulma 신선함
햄버거 메뉴와 폼 검증을 위한 팝업 창이 있는 아주 간단한 단일 페이지 시작입니다.사용자 인터페이스는 Css Ninja 에이전시가 정성껏 제작하여 코드는 마성이공대학의 허가 아래 Github에서 직접 다운로드할 수 있다.
Bulma Fresh - 소스 코드
Bulma Fresh Demo - 실시간 배포
크립톤
Krypton은 Css Ninja Studio가 구축한 단일 페이지 로그인 페이지 시작 프로그램입니다.Krypton은 마성이공대학 허가증에 따라 허가를 받은 것으로 이 허가증을 바탕으로 사용자 인터페이스는 무한한 취미와 상업 프로젝트에 사용할 수 있다
Bulma Krypton - 소스 코드
플라스크 버퍼 세트
CssNinja가 디자인한 Dashkit Dashboard 디자인(PRO 버전) 위의 Flask 프레임워크에 인코딩된 관리 대시보드입니다.
Flask Dashkit PRO - 제품 페이지
Flask Dashkit PRO - Demo - 실시간 배포
Django Dashkit 회사
CssNinja가 디자인한 Dashkit Dashboard 디자인(PRO 버전)에서 Django 프레임워크에 인코딩된 관리 계기판입니다.
Django Dashkit PRO - 제품 페이지
Django Dashkit PRO - Demo - 실시간 배포
Bulma Css
Getting started
Bulma로 기본적인 웹 페이지를 작성하는 것은 매우 쉽다.CDN에서 제공하는 CSS 파일을 포함해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bulma CSS - Starter Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />
</head>
<body>
<div class="container is-fluid">
<!-- Add here Bulma Stuff -->
</div>
</body>
</html>
bulma.min.css-Bulma 0.9.1
font-awesome - 축소판 v5.15
부르마 문법
Modifiers
Bulma에 대해 당신이 알아야 할 첫 번째 일은 수식부류입니다.이렇게 하면 거의 모든 Bulma 요소에 대해 대체 스타일을 설정할 수 있습니다.그것들은 모두 is-* 또는has-*로 시작하여 원하는 스타일로 바꿉니다*.예를 들어, 다음과 같은 몇 가지 유형화된 버튼을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<body>
...
<p>
<button class="button">
Button
</button>
<button class="button is-primary">
Primary button
</button>
<button class="button is-large is-warning">
Large button
</button>
</p>
...
</body>
</html>
And the result
더 많다버튼
간단한 버튼의 코드 세그먼트를 작성하는 것은 매우 간단합니다.
<button class="button is-primary is-small">Small</button>
<button class="button is-link">Default</button>
<button class="button is-warning is-normal">Normal</button>
<button class="button is-success is-medium">Medium</button>
<button class="button is-danger is-large">Large</button>
연수반응성
Bulma의 각 요소는 먼저 이동하고 수직 읽기를 최적화하기 때문에 기본적으로 모바일 장치에서 5breakpoints: 모바일 장치(최고 768px), 태블릿 PC(769px부터), 데스크톱(1024px부터), 와이드스크린: 1216px부터
Bulma 색상
요소의 색상을 설정하려면 필요한 색상 이전에 is-*를 사용해야 합니다.
.is-danger
.is-warning
Bulma - 영웅 구성 요소
이 구성 요소는 클래스'hero'를 메인 용기로 사용할 수 있습니다. 이것은 페이지에 전체 현수막을 인코딩합니다.
Bulma - 팀 카드
우리 팀이나 가격을 위해 카드를 사용하는 것은 많은 템플릿에서 매우 흔히 볼 수 있는 구성 요소이다.Bulma는 최소한의 CSS 코드를 사용하여 팀 부분을 인코딩하는 데 도움을 줍니다.
첫 번째 카드를 살펴보고 관련 CSS 클래스를 살펴보겠습니다.
<div class="column is-4">
<div class="level">
<div class="level-item">
<figure class="image is-128x128">
<img class="is-rounded" src="media/team-1.jpg" alt="">
</figure>
</div>
</div>
<h5 class="title is-5">Angelina Jolie</h5>
<p class="subtitle is-6">CEO</p>
<p>When I'm not obsessively stressing ...</p>
</div>
Thanks for reading! For more resources, please access:
Bulma.io - 공식 홈페이지
Btw, my (nick) name is Sm0ke and I'm pretty active also on .
Reference
이 문제에 관하여(Bulma CSS-리소스 및 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sm0ke/bulma-css-a-tutorial-for-beginners-af2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
