본문 바로가기

부트스트랩6

부트스트랩 width grid incorrect 부트스트랩을 활용한 웹 디자인에서 가로 폭 조절 부트스트랩은 반응형 웹 디자인을 쉽게 만들어주는 프레임워크입니다. 그런데 때때로, 특히 새로 시작하는 분들에게는 그리드 시스템이나 컨테이너 사용에 있어 혼란을 줄 수 있습니다. 여기서는 부트스트랩의 가로 폭(width) 관련 문제를 해결하는 방법에 대해 설명하고자 합니다. 부트스트랩의 그리드 시스템 이해 부트스트랩의 그리드 시스템은 컨테이너, 행(row), 그리고 열(column) 세 가지 주요 구성 요소로 이루어져 있습니다. 이들은 반응형 레이아웃을 만들기 위해 서로 함께 작동합니다. 기본적으로, .row 클래스는 가로 방향의 여백을 만들어내는데, 이는 열들이 적절한 간격을 유지할 수 있도록 합니다. 그러나 이 여백은 .row가 부모 요소의 경계를 벗어나.. 2023. 10. 22.

✈ bootstrap selectpicker multiple js 수정 전체선택 해제 변경 css bootstrap selectpicker multiple js 수정 전체선택 해제 변경. 이 제목을 뭐라고 설명해야 할지 모르겠다. 아무튼 요지는 이렇다. 부트스트랩4의 selectpicker multiple 옵션을 사용할 때 디폴트로 주어지는 모두선택 모두해제 토글 되는게 클라이언트 마음에 안들었나보다. 모든 option이 선택되면 모두 해제되는 것은 당연하지만 하나의 옵션만 선택해도 모두해제로 바뀌는 것이 클라이언트는 이해가 안된 모양이다. 그래서 클라이언트는 전체가 아닌 옵션을 선택하면 전체옵션은 변하지 않고, 전체옵션을 선택하면 모든 옵션도 체크가 된 것 처럼 보이게 해 달라는 것이다. 기본적인 셀렉트피커의 태그 구조는 다음과 같다. 그룹명 그룹설명 부서명 새로 변경해서 스크립트를 짠 html구조.. 2019. 12. 22.

✈ Bootstrap 4 Carousel : 자동 재생 중지 방법 부트스트랩 슬라이더 처음 퍼블리셔를 시작했을 때 내게 카루셀(Carousel)은 악몽같은 존재였다. 클라이언트들이 요구하는 각종 사안을 적용해서 슬라이더를 매번 새로 만들어야 했기 때문이다. 요즘은 부트스트랩같은 라이브러리가 많이 사용되고 있어서 슬라이더 구현이 너무 편하다. Bootstrap 4는 별로 친절하지 않다. Bootstrap 4에 카루셀 슬라이더가 있지만, 처음부터 자동재생이다. 이걸 원한다면 너무도 간편한 방법이지만, 처음에 멈춰 있기를 원한다면 이 때는 패닉이다. 방법은 의외로 간단하고 무궁무진하다. 먼저 예제를 보자. 가장 간단한 방법은 data-ride =”carousel” 를 빼 버리는 방법이다. 이게 없으면 부트스트랩 슬라이더는 멈춰 있다. 아니 멈춰두면 이게 뭐냐? 싶겠지만 부트스트랩 슬라이더는 P.. 2019. 10. 27.

부트스트랩4 데이트피커 datepicker 이벤트 가로채기 부트스트랩4 데이트피커부트스트랩4 데이트피커 datepicker 이벤트 가로채기 플러그인 자체에서 이벤트를 발생시켜 주지만, 딱 내가 원하던게 아니어서 직접 소스를 건드렸다. https://tempusdominus.github.io/bootstrap-4/Events/ Events - Tempus Dominus - Bootstrap 4 Events Events hide.datetimepicker Fired when the widget is hidden. Parameters: e = { date //the currently set date. Type: moment object (clone) } Emitted from: toggle() hide() disable() show.datetimepicker Fire.. 2019. 9. 27.

부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker ✈ 부트스트랩 4.3 날짜 선택 폼: 간편한 데이터 피커 사용하기 서론 부트스트랩은 웹 개발을 편리하게 만들어주는 훌륭한 프레임워크입니다. 특히 드롭다운이나 데이터 피커와 같은 구성 요소를 쉽게 활용할 수 있다는 점이 큰 장점입니다. 그러나 버전 업그레이드 과정에서 예상치 못한 문제가 발생할 수 있습니다. 이번 포스팅에서는 부트스트랩 4.3으로 업그레이드하면서 마주할 수 있는 스타일 관련 이슈와 해결 방법에 대해 알아보겠습니다. 특히, 날짜 선택을 위한 데이터 피커 구현에 중점을 둘 것입니다. 부트스트랩 4.3 업그레이드의 스타일 변화 부트스트랩 4.3으로 업그레이드하면 기존의 스타일이 조금 흐트러질 수 있습니다. 이 중에서도 특히 날짜 선택을 위한 데이터 피커의 스타일이 예전과 다를 수 있습니다. 더욱.. 2019. 7. 25.

드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components ✈ 드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components 부트스트랩 3.x 까지는 popper.js는 필수가 아니었다. 하지만 4.3에서는 드롭다운 메뉴만 사용하려고 해도, popper.js를 사용해야 한다. 가장 손쉬운 방법은 cdn을 이용하는 방법이지만, 로컬에 파일이 있어야만 하는 경우가 있다. 이럴 때 다운로드를 받아야 하는데 popper.js만 다운로드 받으면 동작하지 않고 에러를 낸다. popper.js.map 파일도 같이 필요로 한다. 보통 두 파일은 같은 폴더에 놓이기 때문에 cdn에서 다운 받을 때 popper.js를 먼저 다운받고, 뒤에 .map을 붙여주면 popper.js.map 파일을 다운로드 받을 수 있다. https:.. 2019. 7. 23.

이전 1 다음

티스토리툴바