html5의 프론트엔드 프레임워크는 무엇인가요?

html 프런트 엔드 프레임워크에는 Bootstrap, AUI, Amaze UI, Frozen UI, Frozen UI, WeUIi, SUI, AUI, MUI, Semantic UI, Foundation, UiKit, Pure 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5 프론트엔드 프레임워크

Bootstrap

먼저 Bootstrap이 먼저 언급되거나 있을 거라고 짐작하셨을 텐데요(웃음). 압도적인 추진력을 갖고 있습니다. 내가 처음 도교에 입문했을 때, 나는 코드의 어떤 글자라도 직접 입력하여 성장하도록 내버려두기로 결심했습니다. 그렇지 않으면 나는 패배할 것입니다. 그 결과 주변의 다양한 게이 친구들에게 매력을 느끼게 되었고 부트스트랩 여행을 시작하게 되었습니다. 저는 디자인+프론트엔드에 재능이 있는 사람이지만, 하나님께서는 저에게 PS와 다양한 디자인 도구만 사용하도록 허락하셨을 뿐, 디자인 소녀들과 같은 미적 감각은 주지 않으셨습니다. 그래서 이것이 제가 처음 부트스트랩을 선택한 이유 중 하나입니다. 내가 만든 것들은 적어도 여자들 앞에서는 멋있어 보일 수 있지만, 시간이 지나면 필연적으로 Bootstrap이 너무 아름다워서 사람들을 짜증나게 만들 것입니다. 그러나 다행히도 버전마다 큰 변화가 있을 것이고, 그렇게 되지는 않을 것입니다. 사람들은 내가 만든 웹사이트가 많은 웹사이트와 충돌할 것이라고 생각합니다. Bootstrap의 사용법은 매우 간단하여(Bootstrap 작성자가 수많은 포위 공격을 읽고 그 고통을 이해한 결과일 수 있음) 작은 프런트 엔드라도 거의 학습 비용 없이 빠르게 시작할 수 있습니다.

공식 웹사이트: http://getbootstrap.com/

Github: https://github.com/twbs/bootstrap/

요약: Bootstrap의 가장 큰 장점은 인기가 많다는 것입니다. 사람들은 문제 해결을 도와줍니다. 이는 강력한 도구이며 인터페이스가 비교적 조화롭고 사용하기 쉽다는 것을 의미합니다. 주의를 기울이는 어린이는 최신 V4 버전도 FlexBox를 지원하기 시작한다는 것을 알게 될 것입니다. 레이아웃은 매우 좋은 업그레이드 경험입니다. 단점은 클래스 이름 지정이 의미론적이지 않고 약어가 다양해서 문서가 없으면 멍청하다는 것입니다. 최근에는 프레임워크를 선택할 때 하이브리드 APP을 구축하기 시작했습니다. PC에서 작업할 때 관심을 갖고 하이브리드 마우스 오른쪽 버튼 클릭 속성 작업을 시작했는데, 보자마자 시원한 바람이 불었습니다. 부트스트랩은 너무 작아서 다른 프레임워크를 선택해야 했습니다.

AUI

세 번째는 최근에 등장한 AUI입니다. 저자는 APICloud 개발자를 위해 특별히 설계된 UI 프레임워크라고 주장하지만 실제로는 모바일 프런트엔드 개발에서 흔히 발생하는 많은 문제를 해결합니다. 하이브리드 개발을 위한 CSS 프레임워크. 작성자가 상당히 공격적이며 다양한 고급 CSS3를 여기저기서 사용하고 있는 것 같아서 이러한 CSS3의 호환성을 확인해야 합니다. 기대에 부응하여 서로 호환되는 모든 속성을 선택했습니다. 선배들로부터 몇 가지 좋은 점을 배울 수 있어 매우 기뻤습니다. 프레임워크는 채팅 인터페이스, 카운팅 목록과 같은 구성 요소도 제공하여 많은 복잡한 문제를 해결했습니다. 그것은 나를 저주하게 만들었습니다. 이제 레이아웃을 직접 가져와 사용할 수 있습니다.

Github: https://github.com/liulangnan/aui

공식 웹사이트: http://www.auicss.com/

요약: 저에게 이 프레임워크의 장점 중 하나는 이것이 순수한 CSS 프레임워크라는 것입니다. Pure를 사용하기 전에도 사용해 본 적이 있고, JS 기술도 어느 정도 있어서 복잡한 효과가 아니라면 그냥 순수 CSS 프레임워크를 찾아서 직접 수정하면 됩니다. 이제 CSS3에서도 효율성을 고려하여 애니메이션을 구현할 수 있습니다. , 품질 및 효율성이 우수하므로 이 CSS 프레임워크를 선택했습니다. 제가 불만족스러운 점 중 하나는 이 프레임워크의 문서화가 정말 훌륭하고 우수하다는 것입니다.

Amaze UI

두 번째로 소개한 것은 Amaze UI입니다. 디테일에 집착하는 것을 좋아하는 디자이너를 만나서 제 글꼴을 실제 글꼴과 비교해 보았는데, 그 결과는 수천 달러였습니다. BOOS가 그녀를 칭찬했기 때문에 그녀의 아이디어를 바탕으로 문제를 해결해야 했고 마침내 Amaze UI 프레임워크를 찾았습니다. (공식적인 말로는 "십자가"입니다. -커뮤니티 오픈소스 프로젝트를 기반으로 구축된 스크린 프론트엔드 프레임워크는 모바일을 최우선으로 생각하여 작은 화면부터 큰 화면까지 궁극적으로 모든 화면에 적응하고 모바일 인터넷의 추세에 적응할 것입니다." 하지만 사실 국산 브라우저의 화면 간 적응과 호환성 문제를 해결하는 것이 좋을 뿐입니다.

공식 웹사이트: http://amazeui.org/

Github: https://github.com/amazeui/amazeui

요약: Amaze UI는 일반적으로 중국 시장의 특성에 맞는 요소를 더 많이 추가합니다. 그리고 프레임워크는 크로스스크린과 적응이 비교적 잘 처리되었고, 일반적으로 사용되는 일련의 웹 컴포넌트가 준비되어 있어 다양한 키보드의 호환성과 적응을 위해 일하는 야근근로자들의 작업 시간을 줄이는 데 큰 기여를 했습니다. . , 프레임워크는 중국어 조판에 최적화되어 있고 중국의 주류 브라우저와 호환되며 가볍고 데스크탑에 적합할 뿐만 아니라 모바일 단말기에도 더 적합하며 일부 패키지 위젯이 포함되어 있습니다. 하지만 그 이후로 저는 "사람들이 jQuery의 트래픽에 신경 쓰지 않을 것입니다."와 같이 Amaze UI 문서가 좀 너무 과하다고 느꼈습니다. 솔직히 여기서는 중요하지 않지만 결코 말하지 않겠습니다( ㅎㅎ), 코드나 디자인 면에서 눈에 띄는 점이 많지 않네요.

겨울왕국 UI

얼마 전 QQ가 갑자기 강력해진 걸 봤는데, 나중에 물어보니 QQ 고객 서비스도 하이브리드 개발을 사용하고 있는 걸로 알고 있는데, 그 중 QQ 멤버 프론트엔드가 Frozen UI를 사용하고 있는 것 같아요. 너무 기뻐서 견딜 수가 없네요. Lonely가 직접 사용해보기 시작했는데, 첫 경험에서는 베이직한 스타일 효과가 심플하고, 컬러감도 비교적 활발하다고 느꼈어요. 구성 요소가 비교적 풍부합니다.

Github: https://github.com/frozenui/frozenui

공식 웹사이트: http://frozenui.github.io/

요약: APICloud 같은 것과 함께 Frozen UI를 사용하여 하이브리드 앱 또는 네이티브 칠면조를 사용하여 프런트엔드 개발을 위한 애플리케이션에 중첩합니다. 이 프레임워크는 Android 2.3+ 및 iOS 4.0+와 호환되거나 웹 앱으로 사용하는 것도 탁월한 선택입니다. UI레벨에서는 QQ멤버들의 프론트엔드에서 탄생했다고 볼 수 있습니다.

Frozen UI

세 번째는 Frozen UI인데 QQ가 한동안 확연히 인기를 끌다가 주변에 물어보니 QQ 고객센터도 HTML 하이브리드 개발을 하고 있다는 걸 알게 됐고, QQ 회원 프론트도- end는 Frozen UI를 사용하며, 이 프레임워크는 오픈 소스이므로 너무 기뻤고 마음속의 외로움을 견딜 수 없었습니다. 세 번, 다섯 번, 두 번 시도한 후 첫 번째를 시작했습니다. 경험상 기본 스타일 효과가 심플하고 컬러도 산뜻한 느낌이었는데, 상대적으로 커뮤니티가 활발해서 구성품도 상대적으로 풍부하네요.

Github: https://github.com/frozenui/frozenui

공식 홈페이지: http://frozenui.github.io/

요약: Frozen UI를 APICloud 같은 것과 함께 사용하면 정말 멋질 것 같아요. 하이브리드 앱 또는 네이티브 칠면조를 사용하여 프런트엔드 개발용 애플리케이션에 중첩하고 이 프레임워크는 Android 2.3+, iOS 4.0+와 호환되거나 웹 앱을 만드는 데 사용하는 것도 탁월한 선택이지만 만약 그렇다면입니다. 이것보다 더 적합한 WeUI 프레임워크가 WeChat의 첫 번째 선택입니다. 단점은 UI 수준에서 볼 수 있듯이 QQ 회원의 프런트엔드에서 탄생하게 하였습니까?

WeUIi

네 번째는 FrozenUI와 유사한 WeUI입니다. 또한 WeUI는 FrozenUI보다 더 전문적이라고 해야 합니다. gitHub 이슈에서 모두 해결되었습니다. 이 프레임워크는 크기는 말할 필요도 없이 모듈이 7개 정도 밖에 되지 않습니다. 그러나 크기는 작지만 작업은 보기에 충분합니다. 23년 16월 1일부터 프레임워크가 시작되는데, 출시 이후 github star가 7K를 넘었는데, 사용자들이 분출할 곳이 없다는 점을 배제하지 않아서 다들 git으로 가더라구요, 하하.

Github: https://github.com/weui/weui

DEMO: http://weui.github.io/weui/

요약: WeChat 디자인 팀이 디자인한 이 데모 세트를 읽은 후, 말할 것도 없이 한마디 만약 당신이 WeChat의 대중이 되고 싶다면 이것이 당신의 첫 번째 선택이어야 합니다. 간단히 말해서 프레임워크의 단점은 프레임워크 자체가 WeChat이 아닌 시나리오에서 사용자가 프레임워크를 사용할 수 있도록 허용하는 것을 고려하지 않았다는 것입니다.

SUI

"SUI는 부트스트랩을 기반으로 개발된 프론트엔드 컴포넌트 라이브러리입니다. 디자인 스펙의 집합이기도 합니다. SUI를 통해 아름다운 페이지를 매우 편리하게 디자인하고 구현할 수 있습니다." 물론, 자신의 뇌세포를 살리기 위해서는 지루한 공식 광고를 직접 인용하는 것이 더 좋습니다(囧...). 물론, 광고에서 말했듯이 이전에 Bootstrap을 사용해 본 적이 있다면 쉽게 SUI로 전환할 수 있습니다. Taobao가 프런트 엔드 패자에게 제공하는 것입니다. .

Github: https://github.com/sdc-alibaba/sui

공식 홈페이지: http://sui.taobao.org/sui/docs/index.html

Star: 120

AUI

여섯 번째는 최근 등장한 AUI입니다. 저자는 APICloud 개발자를 위해 특별히 설계된 UI 프레임워크라고 주장하지만 실제로는 모바일 프런트엔드 개발에서 흔히 발생하는 많은 문제를 해결하는 데 중점을 두고 있습니다. .CSS 프레임워크. , 그래서 작성자가 꽤 만연하고 여기저기서 다양한 고급 CSS3를 사용하고 있는 것 같아서, 이러한 CSS3의 호환성도 확인해야 합니다. 기대에 부응하여 서로 호환되는 모든 속성을 선택했습니다. 선배들로부터 몇 가지 좋은 점을 배울 수 있어 매우 기뻤습니다. 프레임워크는 채팅 인터페이스, 카운팅 목록과 같은 구성 요소도 제공하여 많은 복잡한 문제를 해결했습니다. 그것은 나를 저주하게 만들었습니다. 이제 레이아웃을 직접 가져와 사용할 수 있습니다.

Github: https://github.com/liulangnan/aui

공식 웹사이트: http://www.auicss.com/

요약: 저에게 이 프레임워크의 장점 중 하나는 이것이 순수한 CSS 프레임워크라는 것입니다. Pure를 사용하기 전에도 사용해 본 적이 있고, js 스킬도 어느 정도 있고, 복잡한 효과가 아니라면 순수 CSS 프레임워크를 찾아서 직접 수정하여 효과를 얻을 수 있습니다. 이제 CSS3에서도 다양한 애니메이션을 구현할 수 있습니다. 효율성, 품질, 효율성 등을 고민한 끝에 이 CSS 프레임워크를 선택했습니다. 제가 항상 불만족스러웠던 점은 이 프레임워크의 문서화가 정말 훌륭하고 우수하다는 것입니다.

MUI

저는 안드로이드 시스템을 사용하다가 IOS를 보고 반했습니다. 나중에 애플이 시스템을 조정할 때마다 왜 그렇게 좋아하는지 모르겠습니다. 디자인이 부족해서 특별히요. UI를 만들기 위해 IOS 시스템을 모방했지만 늘 잘 하지 못해서 우연히 MUI 프레임워크를 발견하게 되었습니다. 안드로이드 고유의 UI 스타일을 보완합니다. 그리고 MUI는 공식적으로 개발에 사용된다고 주장합니다. 심층적인 개발을 통해 이를 앱으로 사용하는 것도 사용자의 유창함을 향상시킬 수 있다는 사실을 발견하고 일정 기간 동안 이를 더 깊이 이해하고 사용하려고 노력했습니다.

공식 웹사이트: http://dev.dcloud.net.cn/mui/

Github: https://github.com/dcloudio/mui

요약: 앞서 언급했듯이 이 프레임워크는 두 가지 주요 시스템을 기반으로 합니다. UI 구성요소를 참조로 캡슐화한다는 점에서 프레임워크 자체도 상대적으로 활발한 커뮤니티를 갖고 있는데, 그다지 좋지 않은 부분도 제가 특별히 주목하고 있는 부분이 바로 애플리케이션 개발의 원활함이라는 점입니다. H5의 공식 홈페이지 설명을 보고 아직은 개선이 가능할지 기대하며 시도해 보지만, 실제로는 프레임워크 자체가 아닌 Webview의 도움으로 개선이 필요합니다.

Semantic UI

마지막에서 세 번째는 Semantic UI입니다. Bootstrap 때문에 이 프레임워크를 접하게 되었습니다. Semantic UI가 github에 출시되자마자 많은 개발자들의 관심을 끌었습니다. 많은 분들이 두 가지를 비교하고 비판하고 칭찬하시는데, 좋은지 나쁜지는 다른 사람의 문장 3~4개만으로 판단할 수 없고 사용하고 나니 UI가 크게 다르지 않다는 걸 느꼈습니다. Bootstrap이지만 코드 명명 기준이 매우 다른 것 같습니다. Semantic UI는 Bootstrap과 동일하지 않다고 생각합니다. 다른 작업을 수행하려는 경우 명명이 모두 복합적인 방식으로 이루어지며 사용 시 클래스 이름이 매우 구별됩니다. , 확장하거나 추가하는 클래스 이름이 해당 클래스 이름과 충돌하는지 주의해야 합니다.

공식 웹사이트: http://www.semantic-ui.cn/

Github: https://github.com/semantic-org/semantic-ui/

Foundation

재단은 베테랑으로 간주됩니다. 프레임워크 업계에서는 프레임워크가 일찍 개발된다고 하는데, 이 프레임워크는 오늘날에도 여전히 인기가 높습니다. 부트스트랩 개발의 어색함이 더 걱정된다면 Foundation 사용을 고려해 볼 수 있습니다. 사전 정의된 UI 요소를 사용하더라도 개발자에게 보다 유연한 프레임워크 경험을 제공한다는 관계자의 말처럼 다른 웹사이트와 너무 유사하지는 않습니다.

공식 웹사이트: http://foundation.zurb.com/

Github: https://github.com/zurb/foundation-sites

UiKit

UIkit은 YOOtheme 팀에 의해 개발되었으며 다음에서 사용됩니다. 많은 WordPress 테마 애플리케이션이 있으며(즉, WordPress 열성팬이라면 이 프레임워크가 탐구하기에 더 적합해야 합니다), 프레임워크는 GUI 편집기를 통해 수동으로 편집할 수 있으므로 유연하고 강력한 사용자 정의를 제공합니다. 기구. 프레임워크는 LESS, jQuery, Normalize.css 및 FontAwesome 오픈 소스 프로젝트의 고유한 기능을 경량의 모듈식 프런트 엔드 프레임워크에 통합합니다.

공식 홈페이지: http://www.getuikit.com/

Github: https://github.com/uikit/uikit

Pure

마지막으로, 저도 여러분만큼 행복합니다( ～ ￣▽￣)~), 관리 시스템 작업을 할 때 이 프레임워크를 접하게 되었습니다. 프레임워크가 작고 컴팩트하며 너무 많은 개입이 필요하지 않은 순수한 CSS이기 때문에 사용하게 되었습니다. 다른 프레임워크와 결합하여 쉽게 사용할 수 있습니다.

공식 웹사이트: http://purecss.io/

Github: https://github.com/yahoo/pure/

추천 튜토리얼: "html 비디오 튜토리얼"

위 내용은 html5의 프론트엔드 프레임워크는 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!