Front/Bootstrap 4

[Bootstrap] 부트스트랩 공백의 개념

오늘은 부트스트랩의 공백에 대해서 알아보자 bootstrap 의 공백(Spacing) 부트스트랩 기반 템플릿을 사용하던 도중 여러가지 클래스들을 만나게 되었다. py-1 라는 클래스가 궁금해서 시작된 포스팅 Box model 박스모델 bootstrap의 공백의 자세한 클래스들을 알아가기 전에, 먼저 박스 모델부터 잠깐 살펴보도록 하자! 박스 모델은 HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는 것을 말한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다. margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음 border : 박스의 테두리 padding : 테두리와 content간의 간격 content : 엘리먼트 안에 포함되는 컨텐츠 ..

Front/Bootstrap 2022.03.25

[Bootstrap] Group-button tools

Let's go to use the bootstrap group-button tools. 간단하게 우리가 흔히 쓰는 버튼이다. Left Middle Right 그룹으로 묶었다는 것이 위에것과 다름. Active link Link Link 위에것이랑 비슷함. Left Middle Right 마우스를 갖다대면 파란색 빛이 들어도록 한다. Left Middle Right 클릭하면 색깔이 들어옴, 중복도 가능함 Checkbox 1 Checkbox 2 Checkbox 3 위에것이랑 같은 중복선택은 안된다. Radio 1 Radio 2 Radio 3 ㄴㄴㄴ 1 2 3 4 5 6 7 8 ㄴㄴ 1 2 3 4 @ 1 2 3 4 @ ㄴㄴ 1 2 Dropdown Dropdown link Dropdown link To be ..

Front/Bootstrap 2022.01.21