07_부트스트랩_점보트론

• 특별한 내용이나 정보에 특별히 관심을 보이도록 하기 위한 목적의 큰 상자(박스)입니다.

설명글 내용을 적습니다.

• jumbotron, page-header 서식은 버전 5이하에서 적용

• 테두리 유틸리티를 사용하여 요소의 테두리 및 테두리 반경 스타일을 빠르게 지정합니다.

• 이미지, 버튼 또는 기타 요소에 적합합니다.

테두리 적용하기

아래쪽 테두리 적용하기

오른쪽 테두리 적용하기

왼쪽 테두리 적용하기

위쪽 테두리 적용하기

테두리 모두제거

위쪽 테두리 제거

아래쪽 테두리 제거

왼쪽 테두리 제거

오른쪽 테두리 제거

선색변경하기 _ border-primary/secondary/success...로 변경가능

class="border border-secondary"

class="border border-info"

• border서식을 원하는 컬러로 변경하고자 한다면 부트스트랩 css파일에서 색상변수값을 직접 편집하여 변경해야함

• 5.2 버전부터는 테두리에 투명도 적용 가능

테두리 투명도 적용

class="border border-1"

class="border border-2"

class="border border-3"

모서리 둥글게 하기

• class="rounded / rounded-top / rounded-end / rounded-bottom / rounded-start / rounded-circle / rounded-pill"을 활용하여 모서리를 둥글게 할 수 있다.

• 모서리 round값 설정 : round-0 / round-1 / round-3 ...

07_부트스트랩_점보트론_테두리서식