Just Do It/Bootstrap (8) 썸네일형 리스트형 Bootstrap - free theme Atlantis 설치 free theme을 project에 적용해서 이리저리 돌려보다가 alert 라이브러리도 없고, table 기능도 기본 뿐이라 추가로 라이브러리만 다운 받아 써볼까 하다가 더 마음에 드는 free theme 발견! 😆 색상도 더 마음에 들고, 제가 필요로 했던 라이브러리들이 더 포함되어 있습니다. Datatable도 포함되어 있어 다양한 filtering도 가능합니다. 다운로드는 여기에서 가능하고 Download 버튼을 누르고 email 입력 시 다운 경로를 보내줍니다. 파일 구조는 아주 간단하게 되어 있습니다. documentation을 보면 components, plugin에 대한 설명이 나와있습니다. https://themekita.com/demo-atlantis-lite-bootstrap/live.. Bootstrap - npm 에러 해결 역시 세상에서 제일 어려운 건 설치인 것 같습니다.... 하루종일 설치 에러와 싸워서 얻어낸 정보들 공유합니다. no such file or directory, open... 순조롭게 node.js까지 다운로드를 하고 npm install을 하려 하니 오잉? 에러가 뜹니다. ENOENT: no such file or directory, open... 이 부분을 구글링 해보니 package.json이 없기 때문이라고 합니다. npm 사용 전 초기 설정이 필요하여 다시 아래의 명령을 하면 npm init 어쩌구 저쩌구 쭈욱 뜨는데 모두 enter를 눌러주고 Is this OK?( yes ) 까지 Enter를 친 후 아래의 명령을 하면 npm 설치 완료! npm install finalhandler The p.. Bootstrap chart - 라이브러리 소개 charts가 이미 포함되어 있는 bootstrap theme을 사용하는 것이 아니라면 CDN, npm 또는 직접 다운받아 설치하는 여러 방법으로 chart 작성이 가능합니다. bootstrap으로 따로 스타일링을 하는 것은 아니니 여러 차트 라이브러리를 소개해볼까 합니다. Chart.js Chart.js 는 디자이너와 개발자를 위한 간단하면서도 유연한 JavaScript 차트입니다. https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirel.. Bootstrap - free theme <CORONA> Tables # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Bootstrap v4.6에서 제공하는 Table들은 위의 basic table 클래스 및 다양한 옵션을 갖고 있습니다. Table head options Striped rows Bordered table Borderless table Hoverable rows Small table Contextual classes Captions Responsive tables 테이블의 구조는 거의 같고 class만 변경해주면 원하는 스타일대로 사용 가능해서 편리합니다. 에서는 5가지 기본 table을 제공하는데요. Basic Table Hoverable Table S.. Bootstrap Icon Bootstrap Icons Bootstrap은 다양한 아이콘을 사용하여 메뉴 등등을 더욱 명확하게 가시화 할 수 있는데요. 기본적으로 Bootstrap에서는 1500개 이상의 무료 Icon을 제공합니다. 직접 원하는 아이콘 종류를 검색해 볼 수도 있습니다. 설치 방법도 간단히 아래 코드를 cmd에 입력해 주면 됩니다. npm i bootstrap-icons https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap.com Font Awesome 또 많이 사용하는게 Font Awesome 인데요. 약 7천개 이상의 icon을 제공하지만 무료 버전은 16.. Bootstrap - free theme <CORONA> 설치 Getting started 컴파일되고 바로 사용할 수 있는 버전의 템플릿을 직접 사용할 수 있습니다. 또한, 템플릿을 광범위하게 사용자 정의할 수도 있습니다. index.html이나 pages 폴더에 있는 sample 템플릿을 바로 사용할 수도 있고, 필요한 컴포넌트들을 찾아 직접 만들 수도 있습니다. 데모 목적으로 필요한 vender 파일을 'vendors' 폴더에 묶었습니다. 응용 프로그램에 해당 vender가 모두 필요하지 않을 수도 있습니다. vender 패키지 파일을 변경하려면 gulpfile.js 파일에서 관련 작업에 대한 src 경로를 변경하고 bundleVendors 작업을 실행하여 vender 파일을 다시 빌드해야 합니다. gulpfile.js를 확인해 보니 gulp-tasks를 봐야 .. Bootstrap - free theme <CORONA> 시작하기 Bootstrap Theme Demo Preview 지난 시간에는 Bootstrap 4를 사용한 admin theme인 를 소개했는데요. 이번 시간에는 본격적으로 설치하는 방법에 대해 공부해 보려 합니다. 저는 프로그램 배우면서 설치 또한 쉽지 않음을 느꼈기에... 후에 방법을 또 까먹고 허덕일 저와 여러분들을 위해 정리해 봅니다. 일단 제가 사용하고 있는 프로그램 tool은 visual studio 2015 입니다. https://www.bootstrapdash.com/product/corona-free/ Bootstrap Dark Theme Admin Dashboard | Corona free Download Corona, an impressive dark theme admin dashboard av.. Bootstrap - free theme <CORONA> 소개 Bootstrap Introduction 세계에서 가장 인기있는 프론트엔드 오픈 소스 툴킷이며 Sass 변수와 믹스인, 반응형 그리드 시스템, 광범위한 사전 제작된 컴포넌트, 그리고 강력한 JavaScript 플러그인이 있는 Bootstrap으로 반응형 모바일 우선 사이트를 디자인하고 입맛대로 바꿔보세요. https://getbootstrap.kr/ Bootstrap 세계에서 가장 인기있는 HTML, CSS, JS 라이브러리. getbootstrap.kr Bootstrap 홈페이지에 나와있는 소개입니다. 이제 겨우 개발 6개월 차인 저는....Sass 변수? 믹스인? 그리드? 모르는 말들이 너무 많아 이미 혼란스럽지만 혹시나 저와 같은 분들을 위해 Bootstrap 적용을 해나가는 과정을 포스팅 해볼까 .. 이전 1 다음
