기본 웹 페이지 요소를 부트 스트랩으로 코딩하는 방법 - 순수 레이아웃 이외에 더미

비디오: [CSS 기초와 활용] 구글 클론 사이트 만들기 (feat. 개발자도구, Bootstrap, codepen 등) 2025

< 순수한 레이아웃 외에도 부트 스트랩은 거의 모든 웹 사이트에있는 웹 페이지 구성 요소를 만들 수 있습니다. 여기서 아이디어는 레이아웃 작업과 동일합니다. 버튼이나 툴바를 디자인 할 때마다 휠을 다시 만드는 대신 여러 브라우저와 장치에서 이미 테스트 된 사전 작성된 코드를 사용하는 것이 좋습니다.

다음 예제에서는 일반적인 웹 구성 요소를 빠르게 만드는 방법을 보여줍니다.

버튼은 많은 웹 페이지의 기본 요소이지만 일반적으로 설정 및 스타일 지정이 어려울 수 있습니다. 여기에 표시된 것처럼 버튼에는 다양한 유형과 크기가있을 수 있습니다.

버튼 생성을위한 부트 스트랩 코드

속성

클래스 접두어

설명 버튼 유형 btn-defaultbtn-primarybtn-successbtn- 위험

호버 효과가있는 표준 버튼 유형

호버 효과가있는 파란색 버튼

호버 효과가있는 녹색 버튼

호버 효과가있는 빨간색 버튼

버튼 크기

btn-lgbtn-defaultbtn-sm

큰 버튼 크기


기본 버튼 크기

작은 버튼 크기

버튼을 만들려면 다음 HTML을 작성하십시오.

버튼

HTML 요소로 시작하십시오. 열기 << 버튼> 태그에는
type = "button" 이 포함됩니다. class 속성을 btn 클래스 속성 값과 함께 포함하고 원하는 효과에 따라 추가 클래스 접두어를 추가합니다.
스타일을 추가하려면 HTML 클래스 속성에
클래스 접두어 이름을 계속 추가하십시오. 큰 기본 버튼 기본 성공 버튼

기본 기본 버튼

작은 위험 버튼

작은 기본 버튼

부트 스트랩 버튼 유형 및 크기.

추가 버튼 유형, 버튼 크기 및 기타 버튼 옵션을 확인하십시오.

도구 모음으로 탐색 여러 페이지 또는보기가있는 웹 페이지에는 일반적으로 탐색에 도움이되는 하나 이상의 도구 모음이 있습니다. 다음은 몇 가지 도구 모음 옵션입니다.

탐색 도구 모음 만들기를위한 부트 스트랩 코드

속성

클래스 접두사

설명

툴바 유형

nav-tabs

nav- pills

탭 탐색 도구 모음 또는 솔리드 단추 탐색 도구 모음 도구 모음 단추 유형

드롭 다운


캐럿 드롭 다운 메뉴

드롭 다운 메뉴로 단추 또는 탭

아래쪽 화살표 드롭 다운 메뉴 아이콘

드롭 다운 메뉴 항목

알약 또는 솔리드 단추 탐색 도구 모음을 만들려면 다음 HTML을 작성하십시오.

ul

요소를 사용하여 순서가 지정되지 않은 목록을 시작하십시오.

시작

태그에는

class = "nav nav-pills"

가 포함됩니다. 태그를 사용하여 버튼을 만듭니다. 하나의 여는
태그에
- "드롭 다운"
- , "캐럿" 및
- "드롭 다운 메뉴"
- 를 사용하여 "추가"옆의 코드를 참조하십시오. 태그를 사용하여 드롭 다운 메뉴에서 다른 웹 페이지로 연결할 수 있습니다. 다음 코드는 부트 스트랩을 사용하여 툴바를 만듭니다: 타임 라인 About Photos
  Friends More

Places

Sports

Music

드롭 다운 메뉴.

드롭 다운 토글
- 클래스와
- data-toggle = "dropdown"
- 속성 및 값이 함께 작동하여 링크와 같은 요소에 드롭 다운 메뉴를 추가합니다. 추가 도구 모음 옵션을 확인하십시오.

아이콘 추가

아이콘은 버튼과 함께 사용되어 특정 유형의 작업을 전달하는 데 도움이됩니다. 예를 들어 이메일 프로그램에서 휴지통 아이콘이있는 버튼을 사용하여 이메일을 삭제할 수 있습니다. 아이콘은 많은 설명없이 사용자에게 제안 된 작업을 신속하게 전달합니다. 이러한 아이콘은 글리프, 라고하며 글리프 아이콘은 부트 스트랩에 사용되는 글리프를 제공합니다. 부트 스트랩은