Study/Bootstrap (4) 썸네일형 리스트형 Form form validation First name Looks good! // Example starter JavaScript for disabling form submissions if there are invalid fields (() => { 'use strict' const forms = document.querySelectorAll('.needs-validation'); // Loop over them and prevent submission Array.from(forms).forEach(form => { form.addEventListener('submit', event => { if (!form.checkValidity()) { event.preventDefault(); event.stopPro.. Alignment vertical alignment One of three columns One of three columns One of three columns row class를 가진 컴포넌트는 flex box로 지정되어있다. cross 축의 배치를 helper 클래스를 지정함으로써 설정할 수 있다. align-items-start | 기본값 align-items-center align-items-end horizontal alignment One of two columns One of two columns main 축의 배치를 결정할 수 있다. justify-content-start | 기본값 justify-content-end justify-content-center justify-content-around ju.. Grid system Container container | 클래스가 container인 요소들은 아래 표와 같이 break point에서 max-width 값을 조정함으로써 반응형 디자인을 구현한다. 부트스트랩의 Grid system은 컨테이너 안에서만 유효하다. container-fluid | 모든 break-points에서 max-width = 100%이다. Extra small row > col 구조를 사용해야 한다. row | display: flex가 적용되어있는 flex box이다. col | 1 row(12 col) 안에서 col의 너비를 정하지 않았을 때에는, 모든 col이 동일한 너비를 갖게된다. Responsive Grid System col-sm-8 col-sm-4 col-sm col-sm col-sm .. What is Bootstrap? Bootstrap what is Bootststrap? Bootstrap | Bootstrap은 프론트엔드 개발을 위한, 특히 css 스타일링과 responsive grid system을 쉽고 빠르게 구현할 수 있도록 도와주는 css framework이다. link와 script 태그에서 bootstrap cdn 링크를 연결하면, 해당 프로젝트에서 Bootstrap이 제공하는 편의를 이용할 수 있다. +) bootstrap과 비슷한 기능을 하는 bulma, foundation, semantic UI와 같은 css framework도 존재한다. cdn | content delivery network 서버에 데이터를 요청할 때, 서버가 딱 한곳에만 위치한다면 데이터를 받아올 때 delay가 발생할 수 있다... 이전 1 다음
