부트스트랩 기본 스타일
타이포그래피
이 문단은 강조되는 문단입니다. 다음 예제는 부트스트랩에서 기본으로 제공하는 css 스타일 중 일부를 보여줍니다. 그리드 레이아웃과 조합해서 사용하면 별도의 스타일을 입히지 않아도 html만으로 괜찮은 레이아웃을 만들 수 있습니다.
더 많은 정보가 필요하면 부트스트랩 공식 사이트나, 부트스트랩 번역 사이트에서 얻을 수 있습니다.
이 문단은 일반 문단입니다. 다음 예제는 부트스트랩에서 기본으로 제공하는 css 스타일을 보여줍니다. 그리드 레이아웃과 조합해서 사용하면 별도의 스타일을 입히지 않아도 html만으로 괜찮은 레이아웃을 만들 수 있습니다. 이렇게 일부분을 강조하거나, 취소할 수도 있습니다. 또 밑줄을 그을 수도 있습니다. 작은 텍스트도 간단히 만들 수 있습니다.두껍게 해서 강조하거나이탤릭체로 강조할 수도 있습니다.
간단하게 클래스만으로 텍스트를 왼쪽 정렬
또는 오른쪽으로 정렬할 수도 있고,
물론 가운데로 정렬할 수 있습니다.
긴 텍스트를 보기 좋게 하기 위해서는 양쪽 정렬을 사용하면 텍스트의 양쪽 끝단을 맞춰 화면에서 보기 좋게 표현해 줍니다. 이러한 스타일의 효과를 보기 위해서는 일정 길이 이상의 텍스트 문단이 필요하므로 한번 더 반복합니다. 긴 텍스트를 보기 좋게 하기 위해서는 양쪽 정렬을 사용하면 텍스트의 양쪽 끝단을 맞춰 화면에서 보기 좋게 표현해 줍니다. 이러한 스타일의 효과를 보기 위해서는 일정 길이 이상의 텍스트 문단이 필요하므로 한번 더 반복합니다. 긴 텍스트를 보기 좋게 하기 위해서는 양쪽 정렬을 사용하면 텍스트의 양쪽 끝단을 맞춰 화면에서 보기 좋게 표현해 줍니다. 이러한 스타일의 효과를 보기 위해서는 일정 길이 이상의 텍스트 문단이 필요하므로 한번 더 반복합니다.
부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다.
폼 요소
폼 디자인 역시 따로 스타일 시트를 작성하지 않아도 심플하고 보기 좋은 스타일을 제공합니다.
이 부분은 폼이 너무 넓으면 보기가 좋지 않아 양쪽을 따로 나누는 스타일을 적용했는데, css는 하나도 건드리지 않고 html만 입력해서 완성했습니다.
아래와 같이 "form-inline" 클래스를 사용하면 간단한 인라인 폼을 만들 수도 있습니다.
부트스트랩은 폼요소에 대해서 훨씬 더 많은 옵션과 다양한 바리에이션을 제공합니다. 더 많은 정보는 부트스트랩 공식 사이트에서 확인하시기 바랍니다.
자바스크립트가 포함된 컴포넌트
아래 부분은 간단한 탭을 만드는 부분입니다. 코드는 공식 홈페이지에 있는 것을 가져왔습니다. 소스코드 보기를 해서 문서 맨 아래쪽에 있는 script 태그를 참조하세요.
슬라이드쇼 Carousel
아래 슬라이드쇼 처럼 고정폭 컨테이너를 끊고 full-width 로 내용을 삽입할 수 있습니다.