전체 글
-
Bootstrap 알림, 경고(Alert) 기본 사용법DEV/javascript 2022. 2. 21. 17:56
부트스트랩은 다행이도 이쁜 Alert도 지원한다. 다음과 같은 기본적인 예시 또한 친절하게 알려준다. Holy guacamole! You should check in on some of those fields below. × 아주 훌륭하다. 나는 약간 수정하여 사용하였다. HTML 샘플 테스트 입니다! ALERT TEST Alert? test.js "use strict" // 실행 $(function(){ // ★ 방법 1 // alert이 없을 때 버튼을 누르면 alert을 띄움 // alert이 있을 때 버튼을 누르면 alert을 제거 $(document).on('click', '#tBtn', function(){ // if (alert에 d-none class가 있는 경우) if($('#tAlert..
-
Bootstrap 기본적인 버튼(Button) 사용법DEV/javascript 2022. 2. 21. 17:10
성격 급한 사람을 위한 코드! 버튼, 작게, danger 부트스트랩 버튼 사용법은 대단히 간단하다. 부트스트랩을 import한 상태라면 다음과 같이 사용이 가능하다. 샘플 HTML Button Primary Secondary Success Danger Warning Info Light Dark Button outline Primary Button large Large Button small Small 클릭하면 크게 보인다구요! class에 btn을 우선적으로 추가하고 더 필요한 요소가 있으면 해당 요소 class를 뒤에 추가적으로 작성해주면 된다. 부트스트랩 버튼! https://getbootstrap.com/docs/5.1/components/buttons/ Buttons Use Bootstrap’s ..
-
Bootstrap 기본적인 테이블(Table)사용하기DEV/javascript 2022. 2. 21. 15:36
Bootstrap은 다양한 컴포넌트를 제공한다. Table 기능을 쓸 기회가 있어 사용해보았다. 샘플 HTML Table 1 # 성 이름 나이 1 박 석봉 29 2 김 시봉 29 Table 2 # 성 이름 나이 1 박 석봉 29 2 김 시봉 29 3 이름 없음 ??? 4 이름 없음 5 --- Table 3 # 성 이름 나이 1 박 석봉 29 2 김 시봉 29 3 이름 없음 ??? 4 이름 없음 억지 예제를 만들다 보니 코드가 길어졌다. 사진을 클릭하면 크게 볼 수 있을지도...? Table 1 기본적으로 class에 "table"을 추가하여 Bootstrap table을 사용할 수 있다. 1번 테이블은 추가적으로 "table-sm"을 추가하여 작은 테이블로 사용하였다. 으로 비율을 조정하였다. Table..
-
Bootstrap 그리드 시스템 (Grid system : row, col)DEV/javascript 2022. 2. 21. 11:54
성격 급한 사람을 위한 빠른 코드! 작은 사이즈, 4/12 만큼 공간을 차지 작은 사이즈, 8/12 만큼 공간을 차지 HTML 화면을 배치하고 꾸미는 것이 참으로 난감하다. 특히 나처럼 미적 감각이 1도 없는 경우, 이러한 작업은 아주 어려웠다. Bootstrap을 이용하면 화면 배치가 쉬워지고 준비된 컴포넌트를 사용하여 간단한 화면 구성을 할 수 있다. 오늘은 그중 그리드(Grid) 시스템을 보려고 한다. 화면 구성을 어찌해야 할지 몰랐었는데 Bootstrap을 이용하여 쉽게 사용할 수 있었다. row, col 사용법을 간단하게 알아보자. 샘플 HTML TEST Left TEST Center TEST Right TEST Left TEST Center TEST Right 결과 (사진을 누르면 확대가 가능..
-
Bootstrap 설치 및 사용하기DEV/javascript 2022. 2. 21. 11:41
* 옛날 버전으로 인해 적용이 안되던 것을 수정함. (2022. 05. 03) Bootstrap은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다운로드는 하단 링크를 참조하자. 다양한 설치 방법을 제공한다. 1. "최소화된" 이라 그런가 적용 안되는게 있다. http://bootstrapk.com/getting-started/ (그냥 버전이 낮아서 그랬다... 아래 링크를 사용하자...) https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building respon..