부트 스트랩 레이아웃 구성 요소 (전체)

저자：Eve Cole 업데이트 시간：2025-08-16 15:32:01

부트 스트랩 레이아웃 구성 요소

1. 부트 스트랩 글꼴 아이콘

(1) 글꼴 아이콘 목록 링크

http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

(2) 사용

아이콘을 사용하려면 다음 코드를 사용하기 만하면됩니다. 아이콘과 텍스트 사이에 적절한 공간을 유지하십시오. 글리 피콘의 CSS는 없습니다.

(3) 맞춤형 글꼴 아이콘

글꼴 아이콘을 사용하는 방법을 보았으며 다음은 글꼴 아이콘을 사용자 정의하는 방법을 볼 수 있습니다.

우리는 위의 예에서 시작하여 글꼴 크기, 색상을 변경하고 텍스트 그림자를 적용하여 아이콘을 사용자 정의합니다.

A. 사용자 정의 아이콘

 <버튼 유형 = "버튼"> <span> </span> 사용자 </button>

B. 맞춤형 글꼴 크기

아이콘의 글꼴 크기를 늘리거나 줄이면 아이콘을 크거나 작게 보이게 할 수 있습니다.

 <버튼 타입 = "버튼"스타일 = "font-size : 60px"> <span> </span> 사용자 </button>

C. 글꼴 색상을 사용자 정의합니다

 <버튼 타입 = "버튼"스타일 = "색상 : rgb (212, 106, 64);"> <span> </span> user </button>

D. 텍스트 그림자를 적용합니다

 <버튼 유형 = "버튼"스타일 = "텍스트-쉐이드 : 검은 색 5px 3px 3px;"> <span> </span> user </button>

2. 부트 스트랩 드롭 다운 메뉴

(1) 드롭 다운 메뉴는 전환 가능하며 링크를 목록 형식으로 표시하는 컨텍스트 메뉴입니다. 드롭 다운 메뉴 (드롭 다운) JavaScript 플러그인과의 상호 작용을 통해 달성 할 수 있습니다.

다음 메뉴를 사용하려면 클래스 .Dropdown에 드롭 다운 메뉴를 추가하십시오.

 <div> <button type = "button"id = "dropdownmenu1"data-toggle = "dropdown"> topic <span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li role = "presentation"> <a role = "menuitem"탭 역할 = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 데이터 마이닝 </a> </li> <li 역할 = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 데이터 커뮤니케이션/네트워크 </a> <li robol = "recon"> <li roby> <li> < "> <li <href ="href = "href ="href = "#". 역할 = "menuitem"tabindex = "-1"href = "#"> 분리 된 링크 </a> </li> </ul> </div>

(2) 정렬

.pull-right를 .dropdown-menu에 추가하여 드롭 다운 메뉴를 바로 정렬하십시오.

(3) 제목

클래스 드롭 다운 헤더를 사용하여 드롭 다운 메뉴의 레이블 영역에 제목을 추가 할 수 있습니다.

3. 부트 스트랩 버튼 그룹

(1) 버튼 그룹을 사용하면 동일한 라인에 여러 개의 버튼을 쌓을 수 있습니다. 버튼을 함께 정렬하려는 경우 매우 유용합니다.

(2) 중첩

하나의 버튼 그룹 내에서 다른 버튼 그룹을 중첩 할 수 있습니다. 드롭 다운 메뉴를 일련의 버튼과 함께 사용할 때 사용됩니다.

4. 부트 스트랩 버튼 드롭 다운 메뉴

부트 스트랩 클래스를 사용하여 버튼에 드롭 다운 메뉴를 추가하십시오. 버튼에 드롭 다운 메뉴를 추가하려면 버튼과 드롭 다운 메뉴를 .BTN 그룹에 놓으십시오. <span> </span>을 사용하여 버튼을 드롭 다운 메뉴로 표시 할 수도 있습니다.

 <div> <버튼 유형 = "버튼"Data-Toggle = "DropDown"> Default <span> </span> </button> <ul 역할 = "menu"> <li> <a href = "#"> function </a> </li> <li> <a href = "#"> Other </a> </li> <li> <a href = "#"#"</li>>>>>>>>>>>>> </li>> </li> </li> </li> <a href ="#" href = "#"> 기타 </a> </a> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> </ul> </div>

(1) 분할 버튼 드롭 다운 메뉴

분할 버튼 드롭 다운 메뉴는 드롭 다운 메뉴 버튼과 거의 같은 스타일을 사용하지만 드롭 다운 메뉴에 원래 기능을 추가합니다. 분할 버튼의 왼쪽에는 원래 기능이 있으며 오른쪽에는 드롭 다운 메뉴를 표시하는 토글이 있습니다.

 <div> <버튼 유형 = "button"> default </button> <button type = "버튼"data-toggle = "dropdown"> <span> </span> <span> 드롭 다운 메뉴를 전환 </span> </button> <ul 역할 = "menu"> <li> <a href = "#"> function </a> <li> <a href = "#"> </li >> </li >> </>> href = "#"> 기타 </a> </a> </li> <li> </li> <li> <a href = "#"> disased link </a> </li> </ul> </div>

(2) 버튼 드롭 다운 메뉴의 크기

.btn-large, .btn-sm 또는 .btn-xs의 다양한 크기의 버튼으로 드롭 다운 메뉴를 사용할 수 있습니다.

(3) 버튼의 풀업 메뉴

메뉴를 위쪽으로 늘릴 수도 있습니다.

5. 부트 스트랩 입력 상자 그룹

박스 그룹을 입력하십시오. 입력 상자 그룹은 양식 컨트롤에서 확장됩니다. 입력 상자 그룹을 사용하면 텍스트 기반 입력 상자에 접두사 및 접미사로 텍스트 나 버튼을 쉽게 추가 할 수 있습니다.

입력 필드에 접두사 및 접미사의 내용을 추가하면 사용자 입력에 공통 요소를 추가 할 수 있습니다. 예를 들어, 달러 표시를 추가하거나 트위터 사용자 이름 또는 응용 프로그램 인터페이스에 필요한 기타 공개 요소 전에 @를 추가 할 수 있습니다.

.form-control에 접두사 또는 접미사 요소를 추가하는 단계는 다음과 같습니다.

A. 접두사 또는 접미사 요소를 클래스 .input-group과 함께 <div>에 배치하십시오.

B. 그런 다음 동일한 <div> 내에서 클래스 .input-group-addon의 <span>에 추가 내용을 배치하십시오.

C. <span>을 <input> 요소 앞쪽 또는 뒤에 놓습니다.

크로스 브라우저 호환성을 유지하려면 WebKit 브라우저에서 효과를 완전히 렌더링하지 않으므로 <select> 요소를 사용하지 마십시오. 또한 입력 상자 그룹 클래스를 양식 그룹에 직접 적용하지 마십시오. 입력 상자 그룹은 격리 된 구성 요소입니다.

 <양식 역할 = "form"> <div> <span> $ </span> <입력 유형 = "text"placeholder = "twitterhandle"> <span> .00 </span> </div> </form>

(1) 박스 그룹의 크기를 입력하십시오

상대 양식 크기의 클래스를 .input-group (.input-group-lg, input-group-sm, input-group-xs)에 .input-group으로 추가하여 입력 상자 그룹의 크기를 변경할 수 있습니다. 입력 상자의 내용은 자동으로 크기가 조정됩니다.

(2), 확인란 및 라디오 플러그인

입력 상자 그룹의 접두사 또는 접미사 요소로 확인란 및 라디오 플러그인을 사용할 수 있습니다.

 <div> <span> <입력 유형 = "Checkbox"> </span> <입력 유형 = "text"> </div>

(3) 버튼 플러그인

버튼을 입력 상자 그룹의 접두사 또는 접미사 요소로 사용할 수도 있습니다. 현재 .Input-Group-Addon 클래스를 추가하지 않습니다. 버튼을 감싸려면 클래스 .input-group-btn을 사용해야합니다. 기본 브라우저 스타일이 다시 작성되지 않기 때문에 필요합니다.

 <div> <span> <버튼 타입 = "Button"> GO! </button> </span> <입력 유형 = "text"> </div>

(4) 드롭 다운 메뉴가있는 버튼

입력 박스 그룹에 드롭 다운 메뉴가있는 버튼을 추가하는 것은 간단히 .input-group-btn 클래스로 래핑됩니다.

 <div> <div> <버튼 유형 = "버튼"Data-Toggle = "Dropdown"> 드롭 다운 메뉴 <span> </span> </button> <ul> <li> <a href = "#"> function </a> </li> <li> <a href = "#"> Other </a> </li> <li> <a href = "#"</li> </li> </li> </li> </li> href = "#"> 기타 </a> </a> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> </div> <input type = "text"> </div>

(5) 드롭 다운 메뉴 버튼을 분할합니다

드롭 다운 메뉴 버튼과 거의 같은 스타일을 사용하여 입력 박스 그룹의 드롭 다운 메뉴가있는 분할 버튼을 추가하지만 드롭 다운 메뉴에 기본 기능을 추가하십시오.

 <div> <div> <버튼 유형 = "버튼"tabindex = "-1"> 드롭 다운 메뉴 </button> <버튼 유형 = "버튼"Data-Toggle = "dropdown"tabindex = "-1"> <span> </span> <span> 드롭 다운 메뉴를 전환 </button> <ul> <li> <a href = "#"> </li> <<a>> <a>> <a> <a>> href = "#"> 기타 </a> </a> </li> <li> <a href = "#"> 기타 </a> </a> </a> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> </div> <입력 유형 = "text"> </did

6. 부트 스트랩 내비게이션 요소

동일한 태그와 기본 클래스를 사용하십시오 .nav. 부트 스트랩은 또한 태그와 상태를 공유하기위한 도우미 클래스를 제공합니다. 수정 된 클래스를 변경하고 다른 스타일로 전환 할 수 있습니다.

(1), 테이블 탐색 또는 태그

태그가 지정된 탐색 메뉴 작성 :

A. 클래스 .nav와 함께 정렬되지 않은 목록으로 시작하십시오.

B. 클래스 .nav-tabs를 추가하십시오.

 <ul> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> <li> <a href = "#"> vb.net </a> <li> <a <a <a. href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>

(2) 캡슐 스타일 내비게이션 메뉴

A. 기본 캡슐 내비게이션 메뉴

레이블을 캡슐 스타일로 변경 해야하는 경우 .nav-tab 대신 .nav-pills 만 사용하면 다른 단계는 위와 동일합니다.

 <ul> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> <li> <a href = "#"> vb.net </a> <li> <a <a <a. href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>

B. 수직 캡슐 내비게이션 메뉴

클래스 .nav 및 .nav-pills를 사용하는 동안 클래스 .nav-stacked를 사용하여 캡슐을 수직으로 스택으로 만듭니다.

 <ul> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> ios </a> <li> <a href = "#"> vb.net </a> <li> <a <a <a. href = "#"> java </a> </li> <li> <a href = "#"> php </a> </li> </ul>

(3) 양쪽 끝이 정렬 된 내비게이션

화면 너비가 768px보다 큰 경우 .nav, .nav-tabs 또는 .nav 및 .nav-pills를 각각 사용하는 동안 클래스 .nav-Justified를 사용하여 태그 또는 캡슐 내비게이션 메뉴를 부모 요소에 균등하게 만들 수 있습니다. 더 작은 화면에서는 탐색 링크가 쌓입니다.

 <ul> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> svn </a> </li> </ul> <ul> <li> <a href = "#"> home </a> </li> </ul> <li> <a href = "#"</li>

(4) 링크 비활성화

각 .NAV 클래스마다 .Disabled 클래스가 추가되면 회색 링크가 생성되고 링크의 호버 상태가 비활성화됩니다.

 <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a href = "#"> iOS (disable link) </a> </a> href = "#"> svn </a> </li> <li> <a href = "#"> vb.net (disable link) </a> </li> </ul>

(5) 메뉴를 당기십시오

탐색 메뉴는 드롭 다운 메뉴와 유사한 구문을 사용합니다. 기본적으로 목록 항목의 앵커는 일부 데이터 속성과 함께 작동하여 .dropdown-menu 클래스가 포함 된 변환되지 않은 목록을 트리거합니다.

A. 드롭 다운 메뉴가있는 태그

태그에 드롭 다운 메뉴를 추가하는 단계는 다음과 같습니다.

클래스 .nav와 함께 정렬되지 않은 목록으로 시작하십시오.

클래스 .nav-tabs를 추가하십시오.

.dropdown-menu 클래스가있는 순서가없는 목록을 추가하십시오.

 <ul> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> svn </a> </li> <li> <a data-toggle = "dropdown"href = "#"> <li> <a href = "#"> 스윙 </a> </a> <li> <a href = "#"> 스윙 </a> </li> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> </li> <li> <a href = "#"> php </li> </ul>.

B. 풀다운 메뉴가있는 캡슐

단계는 .nav-tabs 클래스를 .nav-pills로 변경해야한다는 점을 제외하고 드롭 다운 메뉴가있는 태그를 만드는 것과 동일합니다.

7. 부트 스트랩 내비게이션 바

내비게이션 바는 좋은 기능이며 Bootstrap 웹 사이트의 두드러진 기능입니다. 내비게이션 바는 응용 프로그램 또는 웹 사이트에서 내비게이션 헤더의 반응 형 기본 구성 요소 역할을합니다. 모바일 장치의 모습에서 내비게이션 막대가 무너지고 사용 가능한 뷰포트 너비가 증가함에 따라 내비게이션 바가 수평으로 확장됩니다. Bootstrap Navigation Bar의 핵심에 내비게이션 바에는 사이트 이름 및 기본 탐색 정의 스타일이 포함됩니다.

(1) 기본 내비게이션 바

기본 탐색 표시 줄을 생성하는 단계는 다음과 같습니다.

A. <avbar-default 클래스 .navbar-default를 <av> 태그에 추가하십시오.

B. 위의 요소에 역할 = "내비게이션"을 추가하면 접근성을 높이는 데 도움이됩니다.

C. 클래스 Navbar-Brand와 함께 <a> 요소를 포함하는 <liv> 요소에 제목 클래스 .navbar-header를 추가하십시오. 텍스트가 더 크게 보일 것입니다.

D. 내비게이션 표시 줄에 링크를 추가하려면 클래스 .NAV 및 .NAVBAR-NAV와 함께 변하지 않는 목록 만 추가하면됩니다.

 <nav 역할 = "navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <ul> <li> <a href = "#"> ios </a> </li> <li> <a href = "#"> svn </a> <li> <a href = "#"> svn </a> </a> </>> href = "#"data-toggle = "dropdown"> java <b> </b> </a> <ul> <li> </li> <li> a href = "#"> 분리 된 링크 </a> </li> <li> <li> <a href = "#"> a href = "#"> </li> </li> </li> </li> </li> </li> </li> </li>

(2) 반응 형 내비게이션 바

내비게이션 바에 반응 형 기능을 추가하려면 붕괴하려는 컨텐츠를 <div> 클래스. 붕괴 된 내비게이션 막대는 실제로 클래스 .navbar-toggle과 두 개의 데이터 요소가있는 버튼입니다. 첫 번째는 Data-Toggle이며 JavaScript에게 버튼으로 무엇을 해야하는지 알려주고 두 번째는 데이터 타겟으로 전환 할 요소를 나타냅니다. Class .icon-bar와 함께 3 개의 <span>은 소위 버거 버튼을 만듭니다. 이것들은 .nav-collapse <div>의 요소로 전환됩니다. 이러한 기능을 달성하려면 부트 스트랩 붕괴 플러그인을 포함해야합니다.

 <nav 역할 = "navigation"> <div> <버튼 유형 = "버튼"data-toggle = "붕괴"data-target = "#emabess-navbar-collapse"> <avbar-collapse "> <avbar-collapse"> <avbar-collapse "> <avbar-collapse"> <span> 스위치 탐색 </span> </span> </span> <span> </span> <span> </span> </button> <a href = "#"#"> id = "example-navbar-collapse"> <ul> <li> <a href = "#"> ios </a> </a> </li> <li> <a href = "#"> svn </a> </a> </li> <li> <a href = "#"data-toggle = "dropdown"> java </b> </a> <ul> <li> <li> <li> href = "#"> jmeter </a> </li> <li> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> <li> </li> <li> <a href = "#"> 다른 별도의 링크 </a> </li> </li> </nav>

(3) 내비게이션 바의 양식

내비게이션 바의 양식은 부트 스트랩 양식 장에 언급 된 기본 클래스를 사용하지 않으며 .navbar-form 클래스를 사용합니다. 이를 통해 양식의 적절한 수직 정렬과 좁은 뷰포트에서 접는 동작을 보장합니다. 내비게이션 바의 내용이 위치하는 위치를 결정하려면 정렬 옵션 (구성 요소 정렬 섹션에서 자세히 설명)을 사용하십시오.

 <nav role = "navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <form 역할 = "검색"> <div> <입력 유형 = "text"placeholder = "search"> </div> <버튼 유형 = 제출 </button> </div> </nav>

(4) 내비게이션 바의 버튼

클래스 .navbar-btn을 사용하여 <form>에 있지 않은 <button> 요소에 버튼을 추가 할 수 있으며, 이는 내비게이션 막대를 수직으로 중심으로합니다. .navbar-btn은 <a> 및 <input> 요소에서 사용할 수 있습니다. 표준 버튼 클래스가 아니기 때문에 .navbar-nav 내부의 <a> 요소에서 .navbar-btn을 사용하지 마십시오.

 <nav role = "navigation"> <div> <a href = "#"> w3cschool </a> </div> <div> <form role = "search"> <div> <입력 유형 = "text"placeholder = "search"> </div> <button type = "제출 버튼 </button> </form> <버튼"> </div> </div> </div> </div> </div> <버튼 </div> </div> </div> <

(5) 내비게이션 바의 텍스트

내비게이션에 텍스트 문자열을 포함 해야하는 경우 클래스 .navbar-text를 사용하십시오. 이것은 일반적으로 <p> 태그와 함께 사용되므로 적절한 선행 및 색상을 보장합니다.

 <nav 역할 = "내비게이션"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> Thomas로 사인 </p> </div> </nav>

(6) 비 탐색 링크

일반 내비게이션 막대 내비게이션 구성 요소 내에서 표준 링크를 사용하지 않으려면 클래스 Navbar-Link를 사용하여 기본 및 역 네비게이션 막대 옵션에 적절한 색상을 추가하십시오.

 <nav 역할 = "내비게이션"> <div> <a href = "#"> w3cschool </a> </div> <div> <p> <a href = "#"> Thomas </a> </p> </div> </div>로 서명했습니다.

(7) 구성 요소 정렬

유틸리티 클래스 .navbar-left 또는 .navbar-right를 사용하여 왼쪽 또는 오른쪽 탐색 막대의 탐색 링크, 양식, 버튼 또는 텍스트 구성 요소를 정렬 할 수 있습니다. 두 클래스 모두 지정된 방향으로 CSS 플로트를 추가합니다.

(8) 상단에 고정

부트 스트랩 내비게이션 바는 동적으로 위치 할 수 있습니다. 기본적으로 블록 레벨 요소로 HTML에 배치 된 위치에 따라 위치됩니다. 일부 도우미 클래스를 사용하면 페이지 상단 또는 하단에 배치하거나 페이지와 함께 스크롤하는 정적 탐색 막대로 만들 수 있습니다. 탐색 표시 줄을 페이지 상단에 고정하려면 .navbar-fixed-top을 .navbar 클래스에 추가하십시오. 다음 예제는 다음과 같이 보여줍니다. 네비게이션 바가 페이지 본문의 다른 콘텐츠 상단과 인터리션을 방지하지 않도록 <body> 태그에 50 픽셀의 패딩을 추가하면 필요에 따라 패딩 값을 설정할 수 있습니다.

</nav>

(9) 바닥에 고정

탐색 표시 줄을 페이지 하단에 고정하려면 .navbar-fixed-bottom을 .navbar 클래스에 추가하십시오.

(10), 정적 상단

페이지와 함께 스크롤하는 탐색 표시 줄을 만들려면 .Navbar-Static-Top 클래스를 추가하십시오. 이 클래스는 패딩을 <body>에 추가 할 필요가 없습니다.

</nav>

(11), 역 네비게이션 바

검은 색 배경 흰색 텍스트가있는 반전 탐색 막대를 만들려면 다음 예제와 같이 .navbar 클래스에 .navbar inverse 클래스를 추가하십시오.

탐색 표시 줄이 페이지 본문의 다른 콘텐츠 상단과 인터리션되는 것을 방지하려면 <body> 태그에 최소 50 픽셀의 패딩을 추가하면 필요에 따라 패딩 값을 설정할 수 있습니다.

8. 부트 스트랩 빵 부스러기

Breadcrumbs는 웹 사이트 수준 정보를 기반으로하는 디스플레이 방법입니다. Breadcrumb Navigation에는 출시 날짜, 카테고리 또는 태그를 표시 할 수 있습니다. 내비게이션 계층 내에서 현재 페이지의 위치를 나타냅니다.

부트 스트랩의 빵 부스러기는 .BreadCrumb 클래스가있는 간단한 변형되지 않은 목록입니다. 구분 기는 아래에 표시된 클래스를 통해 자동으로 추가됩니다 (bootstrap.min.css) :

<ol>

</ol>

9. 부트 스트랩 페이지 매김

(1) Pagination은 변하지 않는 목록입니다. 부트 스트랩은 다른 인터페이스 요소와 마찬가지로 페이지 매김을 처리합니다.

(2) 페이지 회전 (호출기)

사용자에게 내비게이션을 제공하기 위해 간단한 페이징 링크를 만들려면 페이지를 돌려서 수행 할 수 있습니다. 페이징 링크와 마찬가지로 Page Turn은 지정되지 않은 목록입니다. 기본적으로 링크는 중앙에 있습니다. 다음 표에는 부트 스트랩이 페이지 턴을 처리하는 클래스가 나와 있습니다.

10. 부트 스트랩 태그

부트 스트랩 태그. 태그는 페이지의 계산, 프롬프트 또는 기타 표시 디스플레이에 사용될 수 있습니다. 수정 된 클래스 레이블-디 파울, 레이블-프라이밍, 레이블-스케이트, 레이블 인포, 레이블 경고, 레이블 경계를 사용하여 레이블의 모양을 변경할 수 있습니다.

11. 부트 스트랩 배지

(1) 배지는 라벨과 유사하며, 주요 차이점은 배지의 모서리가 더 부드럽다는 것입니다.

배지는 주로 새롭거나 읽지 않은 품목을 강조하는 데 사용됩니다. 배지를 사용하려면 링크, 부트 스트랩 내비게이션 및 기타 요소에 <span>을 추가하십시오. 새롭거나 읽지 않은 항목이 없으면 배지는 다음을 통해 접 힙니다. CSS의 빈 선택기 내부에 내용이 없음을 나타냅니다.

<a href = "#"> Mailbox <span 50 </span> </a>

(2) 내비게이션 상태를 활성화합니다

캡슐 내비게이션에 배지를 배치하고 활성 상태에서 내비게이션을 목록 할 수 있습니다. <pan>을 사용하여 링크를 활성화하십시오.

 캡슐 내비게이션에서의 <h4> 활성화 상태 </h4> <ul> <li> <a href = "#"> 홈페이지 <span> 42 </a> </li> <li> <a href = "#"> 소개 </a> </li> <li> <a href = "#"> 3 </li> </ul> </li> </ul>

12. 부트 스트랩 슈퍼 큰 화면 (jumbotron)

슈퍼 큰 화면 (Jumbotron). 이름에서 알 수 있듯이이 구성 요소는 제목의 크기를 높이고 로그인 페이지 컨텐츠에 더 많은 마진을 추가 할 수 있습니다. Jumbotron을 사용하는 단계는 다음과 같습니다.

A. 클래스 .Jumbotron으로 컨테이너 <div>를 만듭니다.

B. 더 큰 <H1> 외에도 글꼴 중량 글꼴 중량은 200px로 줄어 듭니다.

 <div> <div> <h1> 로그인에 오신 것을 환영합니다! </h1> <p> 이것은 점보트론의 사례입니다. </p> <p> <A 역할 = "버튼"> 자세히 알아보기 </a> </p> </div> </div>

둥근 모서리없이 모든 너비를 차지하는 거대한 화면을 얻으려면 모든 .Container 클래스 외부에서 .jumbotron 클래스를 사용하십시오.

13. 부트 스트랩 페이지 제목 (페이지 헤더)

페이지 헤더는 좋은 기능으로 페이지 제목 주위에 적절한 간격을 추가합니다. 페이지 제목 기능은 웹 페이지에 여러 타이틀이 있고 각 제목 사이에 특정 간격을 추가해야 할 때 특히 유용합니다. 페이지 헤더를 사용하려면 클래스 .page-header와 함께 <div>에 제목을 배치하십시오.

 <div> <h1> 페이지 제목 예 <Small> 자막 </small> </h1> </div>

14. 부트 스트랩 썸네일

(1) 부트 스트랩 썸네일. 대부분의 사이트는 그리드에서 이미지, 비디오, 텍스트 등을 레이아웃해야합니다. Bootstrap은 썸네일로 쉽게 수행 할 수있는 방법을 제공합니다. 부트 스트랩을 사용하여 썸네일을 만드는 단계는 다음과 같습니다.

A. 이미지 주위에 클래스 .thumbnail이있는 <a> 태그를 추가하십시오.

B. 4 개의 픽셀 패딩과 회색 테두리가 추가됩니다.

C. 마우스가 이미지 위로 떠오르면 이미지의 개요가 표시됩니다.

 <div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/kittens.jpg"> </a> </div>

(2) 사용자 정의 컨텐츠를 추가하십시오

기본 썸네일이 있으므로 타이틀, 단락 또는 버튼과 같은 썸네일에 다양한 HTML 컨텐츠를 추가 할 수 있습니다. 특정 단계는 다음과 같습니다.

A. 클래스 .thumbnail으로 <a> 태그를 <avnail로 변경하십시오.

B.이 <div>에서는 추가하려는 것을 추가 할 수 있습니다. 이것은 <div>이므로 기본 범위 기반 명명 규칙을 사용하여 크기를 조정할 수 있습니다.

C. 여러 이미지를 그룹화하려면 반대되지 않은 목록에 표시하면 각 목록 항목이 왼쪽으로 부유합니다.

15. 부트 스트랩 경고 (알림)

경고를 위해 Bootstrap에서 제공 한 경고 및 클래스. Alerts는 사용자에게 메시지 스타일을 정의하는 방법을 제공합니다. 일반적인 사용자 운영에 대한 상황 정보 피드백을 제공합니다. 경고 상자에 옵션 닫기 버튼을 추가 할 수 있습니다. 인라인 취소 가능한 경고 상자를 만들려면 Alerts jQuery 플러그인을 사용하십시오.

<div>를 만들고 .alert 클래스 중 하나와 4 개의 컨텍스트 클래스 (예 : alert-success, .alert-info, .alert-barning, .alert danger)를 추가하여 기본 경고 상자를 추가 할 수 있습니다.

<div> 성공! 제출은 아주 잘 이루어졌습니다. </div>

<div> 정보! 이 정보에 주목하십시오. </div>

(1) 취소 가능한 경고 (해고 경보)

취소 가능한 경고 (해고 경고)를 작성하는 단계는 다음과 같습니다.

A. <div>를 생성하고 .alert 클래스 중 하나 및 4 개의 컨텍스트 클래스 (예 : alert-success, .alert-info, .alert-barning, .alert danger)를 추가하여 기본 경고 상자를 추가하십시오.

B. 동시에 위의 <div> 클래스에 .alert-dismissable 옵션을 추가하십시오.

C. 닫기 버튼을 추가하십시오.

 <div> <버튼 유형 = "버튼"data-dismiss = "Alert"aria-hidden = "true"> </button> 성공! 제출은 아주 잘 이루어졌습니다. </div>

(2) 경고의 링크

경고에서 링크를 작성하는 단계는 다음과 같습니다.

B. .Alert-Link 엔티티 클래스를 사용하여 일치하는 색상과 신속하게 링크를 제공합니다.

<div>

<a href = "#"> 성공! 제출은 아주 잘 이루어졌습니다. </a>

</div>

16. 부트 스트랩 진행률 바

이 장에서는 부트 스트랩 진행률 바를 설명합니다. 이 튜토리얼에서는 부트 스트랩을 사용하여로드, 리디렉션 또는 액션 상태를위한 진행률 표시 줄을 만드는 방법을 볼 수 있습니다.

Bootstrap Progress Bar는 CSS3 전환 및 애니메이션을 사용 하여이 효과를 얻습니다. Internet Explorer 9 및 이전 버전 및 이전 버전의 Firefox는이 기능을 지원하지 않으며 Opera 12는 애니메이션을 지원하지 않습니다.

(1) 기본 진행률 표시 줄

기본 진행률 표시 줄을 생성하는 단계는 다음과 같습니다.

A. 클래스 .progress와 함께 <div>를 추가하십시오.

B. 다음으로 위의 <div>에 클래스 .progress-bar가있는 빈 <div>를 추가하십시오.

C. 스타일 = "60%"와 같이 비율로 표시되는 너비의 스타일 속성을 추가합니다. 진행률 막대가 60%임을 나타냅니다.

 <div> <div role = "progressbar"aria-valuenow = "60"aria-valuemin = "0"aria-valuemax = "100"> <span> 40% 완료 </span> </div> </div>

(2) 교대 진행 막대

다양한 스타일의 진행률 표시 줄을 만드는 단계는 다음과 같습니다.

A. 클래스 .progress와 함께 <div>를 추가하십시오.

B. 다음, 위의 <div>에서 클래스 .progress-bar 및 클래스 진행중기-*와 함께 빈 <div>를 추가하십시오. 그중에서도 *는 성공, 정보, 경고, 위험이 될 수 있습니다.

C. 스타일 = "60%"와 같이 비율로 표시되는 너비의 스타일 속성을 추가합니다. 진행률 막대가 60%임을 나타냅니다.

 <div> <div role = "progressbar"aria-valuenow = "60"aria-valuemin = "0"aria-valuemax = "100"> <span> 90% 완료 (성공) </span> </div> </div>

(3) 줄무늬의 진행률 막대

줄무늬 진행률 표시 줄을 만드는 단계는 다음과 같습니다.

A. 클래스 .progress 및 .progress striped와 함께 <div>를 추가하십시오.

C. 스타일 = "60%"와 같이 비율로 표시되는 너비의 스타일 속성을 추가합니다. 진행률 막대가 60%임을 나타냅니다.

 <div> <div role = "progressbar"aria-valuenow = "60"aria-valuemin = "0"aria-valuemax = "100"> <span> 90% 완료 (성공) </span> </div> </div>

(4) 애니메이션의 진행률 표시 줄

애니메이션 진행률 표시 줄을 만드는 단계는 다음과 같습니다.

A. 클래스 .progress 및 .progress striped와 함께 <div>를 추가하십시오. 또한 클래스. Active를 추가하십시오.

B. 다음으로 위의 <div>에 클래스 .progress-bar가있는 빈 <div>를 추가하십시오.

C. 스타일 = "60%"와 같이 비율로 표시되는 너비의 스타일 속성을 추가합니다. 진행률 막대가 60%임을 나타냅니다.

이것은 줄무늬가 오른쪽에서 왼쪽으로 움직이는 감각을 줄 것입니다.

 <div> <div role = "progressbar"aria-valuenow = "60"aria-valuemin = "0"aria-valuemax = "100"> <span> 40% 완료 </span> </div> </div>

(5) 스택 진행 막대

여러 진행률 막대를 쌓을 수도 있습니다. 동일한 .progress에 여러 개의 진행 막대를 쌓을 수 있습니다.

17. 부트 스트랩 멀티미디어 객체 (미디어 객체)

부트 스트랩 (미디어 객체)의 멀티미디어 객체. 이 추상 객체 스타일은 다양한 유형의 구성 요소 (예 : 블로그 댓글)를 작성하는 데 사용됩니다. 구성 요소에서 그래픽 및 텍스트 믹싱을 사용할 수 있으며 이미지를 왼쪽 또는 오른쪽으로 정렬 할 수 있습니다. 미디어 객체는 코드를 덜 사용하여 미디어 객체와 텍스트의 혼합 배열을 달성 할 수 있습니다.

간단한 태그에 클래스를 적용하여 미디어 객체의 가벼운 태깅 및 스케일링하기 쉬운 속성을 달성합니다. HTML 태그에 다음 두 가지 양식을 추가하여 미디어 객체를 설정할 수 있습니다.

A. 미디어 :이 클래스를 사용하면 미디어 객체의 멀티미디어 (이미지, 비디오, 오디오)가 컨텐츠 블록의 왼쪽 또는 오른쪽으로 떠 다닐 수 있습니다.

B. 미디어 목록 : 목록이 필요한 경우 각 항목은 정렬되지 않은 목록의 일부입니다.이 클래스를 사용할 수 있습니다. 주석 목록 및 기사 목록에 사용할 수 있습니다.

 <div> <a href = "#"> <img src = "/wp-content/uploads/2014/06/64.jpg"> </a> <div> <h4> 미디어 제목 </h4> 샘플 텍스트는 다음과 같습니다. 다음은 샘플 텍스트입니다. </div> </div>

18. 부트 스트랩 목록 그룹

목록 구성 요소는 복잡한 컨텐츠를 목록 양식으로 렌더링하는 데 사용됩니다. 기본 목록 그룹을 만드는 단계는 다음과 같습니다.

A. 클래스 .list-Group을 요소 <ul>에 추가하십시오.

B. 클래스 .list-group-item을 <li>에 추가하십시오.

 <ul> <li> 무료 도메인 이름 등록 </li> <li> 무료 창 공간 호스팅 </li> </ul>

(1) 목록 그룹에 배지를 추가하십시오

모든 목록 항목에 배지 구성 요소를 추가 할 수 있으며,이 항목은 자동으로 오른쪽에 배치됩니다. <li> 요소에 <span>을 추가하십시오.

 <ul> <li> 무료 도메인 이름 등록 </li> <li> <span> new </span> 24*7 지원 </li> </ul>

(2) 목록 그룹에 링크를 추가하십시오

목록 항목 대신 앵커 태그를 사용하면 목록 그룹에 링크를 추가 할 수 있습니다. <ul> 요소 대신 <div>를 사용해야합니다.

(3) 목록 그룹에 사용자 정의 컨텐츠를 추가하십시오

위의 링크에 추가 된 목록 그룹에 HTML 컨텐츠를 추가 할 수 있습니다.

19. 부트 스트랩 패널 (패널)

부트 스트랩 패널 (패널). 패널 어셈블리는 DOM 어셈블리를 상자에 삽입하는 데 사용됩니다. 기본 패널을 만들려면 <div> 요소에 .panel 및 class .panel-default를 추가하십시오.

 <div> <div> 이것은 기본 패널 </div> </div>입니다

(1) 패널 제목

두 가지 방법으로 패널 제목을 추가 할 수 있습니다.

A. .Panel-Heading 클래스를 사용하면 패널에 제목 컨테이너를 쉽게 추가 할 수 있습니다.

B. .Panel-Title 클래스와 함께 <h1>-<h6>을 사용하여 사전 정의 된 스타일의 제목을 추가하십시오.

 <div> <div> 제목없는 플랫폼 제목 </div> <div> 플랫폼 컨텐츠 </div> </div>

(2) 패널 각주

패널에 각주를 추가 할 수 있습니다. 버튼 또는 하위 텍스트를 클래스 .panel-footer와 함께 <div>에 넣을 수 있습니다.

 <div> <div> 이것은 기본 패널 </div> <div> 팬 보드 각주 </div> </div>입니다

(3) 상황에 맞는 패널

Context State Classes 패널-프라이팬, 패널 확장, 패널 INFO, 패널 경고 및 패널 관리를 사용하여 상황에 맞는 색상의 패널을 설정하십시오.

 <div> <div> <h3> 플랫폼 제목 </h3> </div> <div> 이것은 기본 패널입니다 </div> </div>

(4) 테이블이있는 패널

패널에서 테두리가없는 테이블을 만들려면 패널에서 클래스 .table을 사용할 수 있습니다. .panel-body가 포함 된 <div>가 있다고 가정하면 테이블 상단에 테이블 상단에 추가 테이블을 추가하여 분리 할 수 있습니다. .panel-body를 포함하는 <div>가없는 경우, 구성 요소는 방해없이 패널 헤드에서 테이블로 이동합니다.

 <div> <div> <h3> 플랫폼 제목 </h3> </div> <div> 이것은 기본 패널입니다 </div> <table> <th> 제품 </th> <th> price </th> <tr> <td> 제품 a </td> <td> 200 </td> </td> <td> Product B </td> <td> 400 </td>> </td> </td>

(5) 목록 그룹이있는 패널

모든 패널에 목록 그룹을 포함하고 <div> 요소에 .panel 및 .panel-default 클래스를 추가하여 패널을 만들 수 있으며 패널에 목록 그룹을 추가 할 수 있습니다.

 <div> <div> 플랫폼 제목 </div> <div> <p> 이것은 기본 패널 컨텐츠입니다. </p> </div> <ul> <li> 무료 도메인 이름 등록 </li> <li> 연간 업데이트 비용 </li> </ul> </div>

20. 부트 스트랩 잘

inconds <div>에 찌그러짐 또는 일러스트레이션 효과를 유발하는 컨테이너입니다. 우물을 만들려면 컨텐츠를 클래스 .well과 함께 <div>에 넣으십시오.

<div> 안녕하세요, 잘 안고 있어요! </div>

(1) 크기

옵션 클래스를 사용하여 LG 또는 Well-SM을 사용하여 우물의 크기를 변경할 수 있습니다. 이 두 클래스는 .well 클래스와 함께 사용됩니다. 이 두 클래스는 패딩에 영향을 미치며 사용 된 클래스에 따라 더 크거나 작게 나타납니다.

<div> 안녕하세요, 나는 큰 우물에 있습니다! </div>

<div> 안녕하세요, 나는 조금 잘 안고 있어요! </div>

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.