가장 인기 있는 CSS 프레임워크 상위 10개
웹 개발 엔지니어는 페이지 스타일을 개발하는 데 많은 시간을 소비해야 합니다. 가장 어려운 점은 CSS 프레임워크를 사용하는 것입니다. 다행히 일부 마스터는 이를 오픈 소스로 작성했습니다. 그렇다면 좋은 CSS 프레임워크는 무엇일까요?
저는 여러분과 논의할 몇 가지 정보와 데이터를 수집했습니다. 이제 Github에서 가장 많은 스타를 받은 상위 10가지 CSS 프레임워크에 대해 이야기하겠습니다.
Bootstrap
Github 별 개수 140K.
GitHub 주소: https://github.com/twbs/bootstrap
Bootstrap은 가장 널리 사용되는 CSS 프레임워크이며 가장 반응성이 뛰어난 CSS 프레임워크로 간주됩니다. 프런트 엔드 개발을 위해 특별히 설계된 이 제품은 웹 디자인 개념, 모바일 우선 프로젝트, 그리드 시스템, 타이포그래피, 버튼 등을 구축하는 데 도움이 됩니다.
Semantic-UI
Github 별 개수 47.8K.
GitHub 주소: https://github.com/Semantic-Org/Semantic-UI
Semantic은 인간 친화적인 HTML을 사용하여 아름다운 반응형 레이아웃을 만드는 데 도움이 되는 개발 프레임워크입니다. Semantic UI는 웹 사이트 구축 프로세스를 보다 의미 있게 만드는 것을 목표로 합니다. 핵심 기능은 자연어 원리를 사용하여 코드를 더 쉽게 읽고 이해할 수 있도록 하는 것입니다.
Materialize
Github 별 개수 37.5K.
GitHub 주소: https://github.com/Dogfalo/materialize
Materialize는 Material Design을 기반으로 설계된 프론트 엔드 프레임워크로, 자체 적응을 지원하고 현대성이 가득합니다.
Bulma
Github 별 개수 39.6K.
GitHub 주소: https://github.com/jgthms/bulma
Bulma는 Flexbox를 기반으로 한 최신 CSS 프레임워크로 반응형, 모듈형, 오픈 소스이며 무료이며 간단하거나 복잡한 다양한 구현에 쉽게 사용할 수 있습니다. Bulma의 가장 큰 특징은 가볍고 독립적이며 사용하기 쉽다는 것입니다. 모든 스타일은 클래스를 기반으로 합니다. CSS를 이해하지 못하더라도 쉽게 아름다운 웹 페이지를 만들 수 있습니다.
자세한 내용: http://www.sevdot.com/articles/7
Foundation
Github 별 번호 28.6K.
GitHub 주소: https://github.com/zurb/foundation-sites
Foundation은 반응형 HTML, CSS 및 JavaScript 프레임워크를 개발하는 데 사용됩니다.
Foundation은 모든 장치에서 웹 애플리케이션을 구축하기 위한 사용하기 쉽고 강력하며 유연한 프레임워크입니다.
Foundation은 인기 있는 모바일 우선 프레임워크입니다.
Pure
Github 별 개수 20.8K.
GitHub 주소: https://github.com/pure-css/pure
Yahoo에서 제작한 가볍고 반응성이 뛰어난 순수 CSS 모듈 세트로 모든 웹 프로젝트에 적합합니다.
Pure는 매우 작으며 gzip 파일로 압축되어 있으며 크기가 3.7KB*에 불과합니다. 우리는 모바일 웹 제작에 더 도움이 되는 CSS 크기를 최대한 압축하기 위해 모든 코드 라인을 극단적으로 간소화하려고 노력합니다. 모듈 중 몇 개만 사용한다면 CSS는 너무 작아서 친구가 될 수 없습니다!
Layui
Github 별 개수 21.5K.
GitHub 주소: https://github.com/sentsin/layui
Layui는 자체 모듈 사양을 사용하여 작성된 감성적인 프런트 엔드 UI 프레임워크로 네이티브 HTML/CSS/JS의 작성 및 구성 형식을 따릅니다. 임계 값이 매우 낮습니다. 사용할 준비가되었습니다. 외부는 미니멀하지만 내부는 꽉 차 있습니다. 크기가 가볍고 구성 요소가 풍부합니다. 핵심 코드부터 API까지 모든 세부 사항이 신중하게 제작되어 빠른 인터페이스 개발에 매우 적합합니다.
Uikit
Github 별 개수 13.5K.
UIkit은 YOOtheme 팀이 개발한 경량의 모듈식 프런트 엔드 프레임워크로, 강력한 웹 프런트 엔드 인터페이스를 빠르게 구축할 수 있습니다. UIKit은 사용이 간편하고 사용자 정의 및 확장이 쉬운 포괄적인 범위의 HTML, CSS 및 JS 구성 요소를 제공합니다.
LESS를 기반으로 개발되었으며, 코드 구조가 명확하고 단순하며 확장 및 유지 관리가 쉽고, 기본 UIKit 스타일을 기반으로 원하는 테마 스타일을 쉽게 사용자 정의하고 만들 수 있습니다.
Amaze UI
Github 별 개수 13.4K.
GitHub 주소: https://github.com/amazeui/amazeui
Amaze UI는 모바일 우선이라는 개념을 기반으로 점차 작은 화면에서 큰 화면으로 확장되고 마침내 모든 화면에 대한 적응을 실현하여 트렌드에 적응합니다. 모바일 인터넷의.
Amaze UI에는 약 20개의 CSS 구성 요소, 20개 이상의 JS 구성 요소 및 다양한 테마의 여러 웹 구성 요소가 포함되어 있어 뛰어난 인터페이스와 탁월한 경험으로 크로스 스크린 페이지를 빠르게 구축할 수 있어 개발 효율성이 크게 향상됩니다.
외국 프레임워크와 비교하여 Amaze UI는 중국어 조판에 중점을 두고 사용자 에이전트에 따라 글꼴을 조정하여 더 나은 중국어 조판 효과를 얻습니다. 국내 주류 브라우저와 앱 내장 브라우저의 호환성 지원을 고려합니다.
Amaze UI는 HTML5용으로 개발되었으며 애니메이션 상호작용을 위해 CSS3를 사용합니다. 부드럽고 효율적이며 모바일 장치에 더 적합하므로 웹 애플리케이션이 더 빠르게 로드됩니다.
jQuery UI
Github 별 개수 10.8K.
GitHub 주소: https://github.com/jquery/jquery-ui
jQuery UI는 jQuery JavaScript 라이브러리를 기반으로 구축된 사용자 인터페이스 상호 작용, 특수 효과, 위젯 및 테마의 집합입니다. 대화형 웹 애플리케이션을 만들거나 양식 컨트롤에 날짜 선택기를 추가하는 경우 jQuery UI는 완벽한 선택입니다.
jQuery UI에는 상태를 유지하는 위젯이 많이 포함되어 있어 일반적인 jQuery 플러그인 사용 패턴과 약간 다릅니다. 모든 jQueryUI 위젯은 동일한 패턴을 사용하므로 하나를 사용하는 방법을 배우면 다른 것도 사용하는 방법을 알게 됩니다.
위 내용은 가장 인기 있는 CSS 프레임워크 상위 10개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
