목록bootstrap (4)

투케이2K

36. (VueJs) [Vue 3] - bootstrap 부트스트랩 사용 설정 및 컴포넌트 사용 실시

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] ​ ​ ​ C:\Users\tk\VueProject\test-project> npm install bootstrap --save ​ ​ [부트스트랩 5.0 참고 사이트] ​ https://getbootstrap.kr/docs/5.0/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr [main.js - 소스코드] ​ // [main.js 설명] // 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러..
VueJs 2022. 6. 2. 10:13
59. (html/css/javascript/jquery) 부트스트랩 (bootstrap) card 사용해 카드 박스 (텍스트 박스) 생성 실시

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Card Header and footer Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 [결과 출력] ​ [요약 설명] ​ 1. card : ..
FrontEnd 2021. 7. 21. 16:41
45. (html/css/javascript/jquery) 부트스트랩 (bootstrap) w 사용해 가로 (width) 크기 지정 실시

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Width 25% Width 50% Width 75% Width 100% Width auto [결과 출력] ​ [요약 설명] ​ 1. w-25 : 가로 크기 25% 를 의미합니다 (자동 크기 부여) 2. p-3 : p는 패딩의미이며, 크기는 0, 1, 2, 3, 4, 5, auto 가 있습니다 3. bg-info : 백그라운드 속성을 지정합니다
FrontEnd 2021. 7. 19. 09:11
44. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 사용해 button , div 스타일 css 적용 실시 및 다중 클래스 적용 설명

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] Basic Primary Secondary Success Info Warning Danger Dark Light Link .bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white [결과 출력] [요약 설명] ​ 1. 부트스트랩은 css 디자인을 편하게 해주는 프레임워크입니다 2. 부트스트랩은 태그 (div, button ...) 내에서 class를 사용해서 css 디자인을 적용시킵니다 3. 다중 클래스 지정 : class="클래스 클래스" 방식으로 다중으로 클래스를 지..
FrontEnd 2021. 7. 16. 15:59
Prev 1 Next