본문 바로가기

Lect & Tip/bootstrap9

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

✈ bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class 부트스트랩4에서는 기존의 datepicker가 작동하지 않는다. 그렇다고 bootstrap을 마이너그레이션을 하기도 애매하다. 부트스트랩4에 적용이 가능한 데이트피커는 tempusdominus가 거의 유일하다. 좀 더 커스터마이징을 하려면 필스 라이브러리인 moments.js도 건드려야 하지만, 일단은 tempusdominus가 그리는 calendar의 class와 html element 구조만 알아도 대략적인 스타일링은 가능하다. 하지만 유감스럽게도 데이터피커를 멈추고 돔을 탐색하기가 쉽지 않다. 시간이 없어서 일단 그냥 tempusdominus datepicker wid.. 2021. 1. 11.

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

부트스트랩 셀렉트 .bootstrap-select css 스타일 변경 모두 선택 해제 토글 버튼 scss 부트스트랩 셀렉트 .bootstrap-select css 스타일 변경 부트스트랩의 셀렉트는 셀렉트 그 자체는 예쁘지만, 멀티 셀렉트 사용 시에 선택 체크가 너무 안 예쁘다. 더더군다나 한국사람들은 멀티 셀렉트에 익숙하지 않아서 checkbox를 필요로 한다. 위와 같은 멀티 셀렉트 박스를 정말 안 예쁘다. 이것을 마치 체크박스로 선택한 것처럼 바꾸는 김에 모두 선택과 모두 해제 버튼도 마치 전체 선택 체크박스인 것처럼 바꿔보자. 물론 이때 체크박스는 이미지 BG다. 이 방식을 쓸 때의 개발 이점은 모두 선택과 해제할 때 전체 체크박스의 checked를 제어해줄 필요가 없다. bootstrap 자체의 jquery가 기본적으로 반전해 준다. 부트스트랩 셀렉트에 multiple을 줄 때 data-actions.. 2019. 11. 14.

✈ 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.

이전 1 2 다음

티스토리툴바