빠른 시작 예제

빠른 템플릿이 필요하십니까? 함께 만든 다음 기본 예를 확인하세요.

기본 그리드

Bootstrap의 일부로 제공되는 기본 그리드 시스템은 940px 너비의 16열 그리드입니다. 인기 있는 960 그리드 시스템의 특징이지만 왼쪽과 오른쪽에 추가 여백/패딩이 없습니다.

그리드 마크업의 예

여기에 표시된 것처럼 기본 레이아웃은 그리드 시스템의 일부로 정의한 16개의 기본 열에 걸쳐 있는 두 개의 "열"로 만들 수 있습니다. 더 많은 변형을 보려면 아래의 예를 참조하십시오.

<div 클래스 = "행" > 
  <div 클래스 = "span6" > 
    ...
  </div>
  <div 클래스 = "span10" > 
    ...
  </div>
</div>

중첩 열

.row기존 열 내에 생성하여 콘텐츠를 중첩해야 하는 경우 콘텐츠를 중첩합니다 .

중첩 열의 예

<div 클래스 = "행" > 
  <div 클래스 = "span12" > 
    열의 수준 1
    <div 클래스 = "행" > 
      <div 클래스 = "span6" > 
        레벨 2
      </div>
      <div 클래스 = "span6" > 
        레벨 2
      </div>
    </div>
  </div>
</div>

나만의 그리드 롤

기본 940px 그리드 시스템을 사용자 정의하기 위한 몇 가지 변수가 부트스트랩에 내장되어 있습니다. 약간의 사용자 지정을 통해 열의 크기, 홈통 및 열이 상주하는 컨테이너를 수정할 수 있습니다.

그리드 내부

그리드 시스템을 수정하는 데 필요한 변수는 현재 모두 에 있습니다 preboot.less.

이제 사용자 정의

그리드를 수정한다는 것은 세 개의 @grid-*변수를 변경하고 Less 파일을 다시 컴파일하는 것을 의미합니다.

Bootstrap은 최대 24개의 열이 있는 그리드 시스템을 처리할 수 있는 장비를 갖추고 있습니다. 기본값은 16입니다. 다음은 그리드 변수가 24열 그리드에 맞게 사용자 정의된 모습입니다.

@gridColumns : 24 ;       
@그리드컬럼폭 : 20px ;   
@gridGutterWidth : 20px ;   

다시 컴파일하면 설정됩니다!

고정 레이아웃

기본 940px 너비의 단순한 중앙 레이아웃은 단일 <div.container>.

<본체>
  <div 클래스 = "컨테이너" > 
    ...
  </div>
</바디>

유체 레이아웃

최소 및 최대 너비와 왼쪽 사이드바가 있는 유연한 대체 페이지 구조입니다. 앱과 문서에 적합합니다.

<본체>
  <div 클래스 = "컨테이너 유체" > 
    <div 클래스 = "사이드바" > 
      ...
    </div>
    <div 클래스 = "콘텐츠" > 
      ...
    </div>
  </div>
</바디>

제목 및 카피

웹 페이지를 구성하기 위한 표준 인쇄 체계 계층입니다.

전체 타이포그래피 그리드는 preboot.less 파일에 있는 두 개의 Less 변수를 기반으로 합니다: @basefont및 @baseline. 첫 번째는 전체에 걸쳐 사용되는 기본 글꼴 크기이고 두 번째는 기본 줄 높이입니다.

우리는 이러한 변수와 약간의 수학을 사용하여 모든 유형 등의 여백, 패딩 및 줄 높이를 만듭니다.

h1. 제목 1

h2. 제목 2

h3. 제목 3

h4. 제목 4

h5. 제목 5

h6. 제목 6

예시 단락

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

제목 예 소제목 포함…

기타 집단

강조, 주소 및 약어 사용

<strong> <em> <address> <abbr>

사용 시기

강조 태그( <strong>및 <em>)는 단어나 구의 주변 사본과 관련하여 추가적인 중요성이나 강조를 나타내기 위해 사용해야 합니다. <strong>중요성과 강세 강조 <em>를 위해 사용하십시오 .

단락에서 강조

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

참고:<b> HTML5에서 및 태그 를 사용하는 것은 여전히 ​​괜찮 <i>으며 각각 굵게 및 기울임꼴로 스타일을 지정할 필요는 없습니다(더 의미 있는 요소가 있는 경우 사용). <b>추가적인 중요성을 전달하지 않고 단어나 구를 강조하기 <i>위한 것이며 주로 음성, 기술 용어 등을 위한 것입니다.

구애

요소는 가장 <address>가까운 조상 또는 전체 작업 본문에 대한 연락처 정보에 사용됩니다. 다음은 사용 방법에 대한 두 가지 예입니다.

참고: 의 각 줄은 <address>줄 바꿈( )으로 끝나 거나 콘텐츠를 적절하게 구성하기 위해 <br />블록 수준 태그(예: )로 묶어야 합니다.<p>

약어

약어와 두문자어의 경우 <abbr>태그를 사용합니다( HTML5<acronym> 에서 더 이상 사용되지 않음 ). 태그 안에 속기 형식을 넣고 전체 이름의 제목을 설정합니다.

인용구

<blockquote> <p> <small>

견적 방법

인용구를 포함하려면 둘러싸고 <blockquote>태그 를 지정하세요. 요소를 사용 하여 출처를 인용하면 그 앞에 전각 대시가 표시됩니다.<p><small><small>&mdash;

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

줄리어스 히버트 박사

<블록 인용>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <작은> 줄리어스 히버트 박사 </small>
</blockquote>

무순<ul>

• Lorem ipsum dolor sitmet
• Consectetur adipiscing 엘리트
• 정수 molestie lorem at massa
• Pretium nisl aliquet의 시설
• 눌라 볼룻팟 알리콰암 벨릿
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • 베스티불룸 라오렛 포티터 sem
  • Ac tristique libero volutpat
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

스타일이 없는<ul.unstyled>

• Lorem ipsum dolor sitmet
• Consectetur adipiscing 엘리트
• 정수 molestie lorem at massa
• Pretium nisl aliquet의 시설
• 눌라 볼룻팟 알리콰암 벨릿
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • 베스티불룸 라오렛 포티터 sem
  • Ac tristique libero volutpat
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

주문<ol>

1. Lorem ipsum dolor sitmet
2. Consectetur adipiscing 엘리트
3. 정수 molestie lorem at massa
4. Pretium nisl aliquet의 시설
5. 눌라 볼룻팟 알리콰암 벨릿
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

설명dl

설명 목록

설명 목록은 용어를 정의하는 데 적합합니다.

유이스모드

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

말레수아다 포르타

Etiam porta sem malesuada magna mollis euismod.

암호

<code> <pre>

두 개의 간단한 태그를 사용하여 코드를 스타일리시하게 포주하십시오. 자바스크립트를 통해 더 멋진 기능을 사용하려면 Google의 code prettify 라이브러리에 드롭하면 설정이 완료됩니다.

코드 제시

코드, 블록 또는 인라인 스니펫은 올바른 태그로 래핑하여 스타일로 표시할 수 있습니다. 여러 줄에 걸쳐 있는 코드 블록의 경우 <pre>요소를 사용합니다. 인라인 코드의 경우 <code>요소를 사용합니다.

<div>
  <h1>제목</h1>
  <p>여기 뭔가...</p>
</div>

<div> <h1> 제목 </h1> <p> 여기 뭔가... </p> </div>
  
  

인라인 레이블

<span class="label">

본문 텍스트의 문구에 주의를 환기시키거나 플래그를 지정하십시오.

무엇이든 라벨링

이제까지 그 멋진 New 중 하나가 필요했습니다! 또는 코드를 작성할 때 중요한 플래그? 글쎄, 이제 당신은 그것들을 가지고 있습니다. 기본적으로 포함되는 내용은 다음과 같습니다.

미디어 그리드

HTML 풋프린트가 적고 스타일이 최소화된 페이지에 다양한 크기의 축소판을 표시합니다.

썸네일 예시

썸네일의 .media-grid크기는 제한이 없지만 내장된 부트스트랩 그리드 시스템에 직접 매핑할 때 가장 잘 작동합니다. 90, 210 및 330과 같은 이미지 너비는 몇 픽셀의 패딩과 결합하여 .span2, .span4및 .span6열 크기와 동일합니다.

크기가 큰

중간

작은

코딩하기

미디어 그리드는 사용하기 쉽고 마크업 측면에서 다소 단순합니다. 치수는 순전히 포함된 이미지의 크기를 기반으로 합니다.

<ul 클래스 = "미디어 그리드" > 
  <리>
    <a href = "#" > 
      <img 클래스 = "썸네일" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <리>
    <a href = "#" > 
      <img 클래스 = "썸네일" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

테이블 만들기

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

테이블은 많은 것을 위해 훌륭합니다. 그러나 훌륭한 테이블은 (코드 수준에서) 유용하고, 확장 가능하고, 가독성이 좋기 위해 약간의 마크업에 대한 애정이 필요합니다. 다음은 도움이 될 몇 가지 팁입니다.

<thead>계층 구조가 <thead>>> 가 되도록 항상 열 머리글을 래핑 <tr>하십시오 <th>.

<tbody>열 헤더와 유사하게 모든 테이블의 본문 내용은 계층 구조가 <tbody>> <tr>> 가 되도록 래핑되어야 합니다 <td>.

예: 기본 테이블 스타일

모든 테이블은 가독성을 보장하고 구조를 유지하기 위해 필수 테두리만 사용하여 자동으로 스타일이 지정됩니다. 추가 클래스나 속성을 추가할 필요가 없습니다.

<표>
  ...
</표>

예: 얼룩말 줄무늬

얼룩말 줄무늬를 추가하여 테이블을 멋지게 꾸며 보세요 .zebra-striped. 클래스를 추가하기만 하면 됩니다.

참고: Zebra 스트라이핑은 IE8 이하와 같은 이전 브라우저에서는 사용할 수 없는 점진적 개선 기능입니다.

<테이블 클래스 = "얼룩말 줄무늬" > 
...
</표>

예: TableSorter.js가 있는 얼룩말 줄무늬

이전 예에서 jQuery 및 Tablesorter 플러그인 을 통해 정렬 기능을 제공하여 테이블의 유용성을 향상시킵니다 . 정렬을 변경하려면 열의 머리글을 클릭합니다.

<스크립트 src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<스크립트 > 
  $ ( 함수 () { 
    $ ( "table#sortTableExample" ). 테이블 분류기 ({ sortList : [[ 1 , 0 ]] });  
  });
</스크립트>
<테이블 클래스 = "얼룩말 줄무늬" > 
  ...
</표>

기본 스타일

모든 양식에는 읽기 쉽고 확장 가능한 방식으로 표시할 수 있는 기본 스타일이 제공됩니다. 텍스트 입력, 선택 목록, 텍스트 영역, 라디오 버튼 및 확인란, 버튼에 대한 스타일이 제공됩니다.

누적 양식

양식의 HTML에 추가 .form-stacked하면 필드 왼쪽 대신 필드 상단에 레이블이 표시됩니다. 양식이 짧거나 더 무거운 양식에 대한 두 개의 입력 열이 있는 경우에 유용합니다.

양식 필드 크기

마크업에 몇 개의 클래스만 추가하여 양식 input, select또는 너비를 사용자 정의합니다.textarea

v1.3.0부터 양식 요소에 대한 그리드 기반 크기 조정 클래스를 추가했습니다. 기존 , , 등 의 클래스 위에 이를 사용하십시오 ..mini.small

버튼

일반적으로 버튼은 작업에 사용되는 반면 링크는 개체에 사용됩니다. 예를 들어 "다운로드"는 버튼이 될 수 있고 "최근 활동"은 링크가 될 수 있습니다.

모든 버튼은 기본적으로 밝은 회색 스타일이지만 다양한 색상 스타일에 여러 기능 클래스를 적용할 수 있습니다. 이러한 클래스에는 파란색 .primary클래스, 밝은 파란색 .info클래스, 녹색 .success클래스 및 빨간색 .danger클래스가 있습니다.

예시 버튼

버튼 스타일은 적용된 모든 것에 적용할 수 있습니다 .btn. 일반적으로 다음에만 적용하려고 할 것입니다.<a>일반적 으로 <button>, 및 select <input>요소다음과 같이 표시됩니다.

대체 크기

더 크거나 작은 버튼이 마음에 드시나요? 그것을 가지고!

비활성화 상태

활성 상태가 아니거나 앱에서 여러 가지 이유로 비활성화된 버튼의 경우 비활성화 상태를 사용합니다. 그것은 .disabled링크 :disabled와<button> 요소

연결

버튼

뭐야

상단 표시줄은 웹사이트의 로고 또는 이름, 기본 탐색 및 검색 양식이 있는 고정 표시줄입니다.

사용자 정의 가능

내부의 모든 요소와 전체 상단 표시줄도 선택 사항입니다. 로고/이름, 탐색, 검색 및 보조 탐색을 포함하거나 이들의 조합을 포함하도록 선택할 수 있습니다.

드롭다운 포함

기본 탐색의 일부로 탐색에 드롭다운을 추가할 수 있는 기능이 포함되었습니다. 위의 보조 탐색(오른쪽 정렬)을 확인하여 완료되는 방법을 확인하세요. 드롭다운 li태그는 .active현재 페이지 선택 표시도 지원합니다.

탭과 알약

를 사용하여 간단한 보조 탐색을 만듭니다 <ul>. 적절한 클래스를 추가하여 탭 또는 알약 간에 전환합니다.

계정 설정 페이지와 같은 콘텐츠의 하위 섹션 및 유사한 콘텐츠 페이지 간 전환을 위한 사용자 타임라인에 적합합니다. 탭 또는 알약 스타일로 제공됩니다.

• 집
• 프로필
• 메시지
• 설정
• 연락하다
• 쓰러지 다
  • 보조 링크
  • 여기에 다른 것
  • 다른 링크

<ul 클래스 = "탭" > 
  <li class = "active" ><a href = "#" > 홈 </a></li>  
  <li > <a href = "#"> 프로필 </a></li> 
  <li > <a href = "#"> 메시지 </a></li> 
  <li > <a href = "#"> 설정 </a></li> 
  <li > <a href = "#"> 연락처 </a></li> 
</ul>

• 집
• 프로필
• 메시지
• 설정
• 연락하다

<ul 클래스 = "알약" > 
  <li class = "active" ><a href = "#" > 홈 </a></li>  
  <li > <a href = "#"> 프로필 </a></li> 
  <li > <a href = "#"> 메시지 </a></li> 
  <li > <a href = "#"> 설정 </a></li> 
  <li > <a href = "#"> 연락처 </a></li> 
</ul>

빵 부스러기

탐색경로 탐색은 기본 탐색이 아닌 앱이나 사이트 내에서 사용자를 표시하는 방법으로 사용됩니다.

• 집

• 홈 /
• 중간 페이지

• 홈 /
• 중간 페이지 /
• 다른 것

• 홈 /
• 중간 페이지 /
• 또 하나 /
• 당신은 여기에있다

<ul 클래스 = "이동 경로" > 
  <li><a href = "#" > 홈 </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > 중간 페이지 </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > 다른 하나 </a> <span class = "divider" > / </span></li>   
  <li class = "active" > 현재 위치 </li> 
</ul>

쪽수 매기기

Rdio에서 영감을 받은 매우 단순하고 최소한의 스타일의 페이지 매김. 큰 블록은 놓치기 어렵고 쉽게 확장 가능하며 큰 클릭 영역을 제공합니다.

<div 클래스 = "페이지 매김" > 
  <울>
    <li class = "이전 비활성화됨" ><a href = "#" > ← 이전 </a></li>  
    <li 클래스 = "활성" ><a href = "#" > 1 </a></li>  
    <li > <a href = "#"> 2 </a></li> 
    <li > <a href = "#"> 3 </a></li> 
    <li > <a href = "#"> 4 </a></li> 
    <li > <a href = "#"> 5 </a></li> 
    <li class = "next" ><a href = "#" > 다음 → </a></li>  
  </ul>
</div>

기본 알림

.alert-message

작업의 실패, 가능한 실패 또는 성공을 강조 표시하는 한 줄 메시지입니다. 특히 양식에 유용합니다.

자바스크립트 받기 »

예제 코드

<div class = "경고 메시지 경고" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> 과카몰리! </strong> 스스로를 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다. </p>
</div>

메시지 차단

.alert-message.block-message

약간의 설명이 필요한 메시지의 경우 단락 스타일 경고가 있습니다. 이는 더 긴 오류 메시지를 버블링하거나, 보류 중인 작업에 대해 사용자에게 경고하거나, 페이지를 더 강조하기 위해 정보를 제공하는 데 적합합니다.

자바스크립트 받기 »

예제 코드

<div class = "경고 메시지 차단 메시지 경고" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> 과카몰리! 이것은 경고입니다! </strong> 스스로를 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div 클래스 = "경고 조치" > 
    <a class = "btn small" href = "#" > 이 조치를 취하십시오 </a> <a class = "btn small" href = "#" > 또는 이렇게 하십시오 </a>     
  </div>
</div>

모달

모달(대화 상자 또는 라이트박스)은 배경 컨텍스트를 유지하는 것이 중요한 상황에서 컨텍스트 작업에 적합합니다.

자바스크립트 받기 »

툴팁

Twipsies는 혼란스러운 사용자를 돕고 올바른 방향으로 안내하는 데 매우 유용합니다.

자바스크립트 받기 »

팝오버

팝오버를 사용하여 레이아웃에 영향을 주지 않고 페이지에 하위 텍스트 정보를 제공합니다.

자바스크립트 받기 »

시작하기

자바스크립트를 부트스트랩 라이브러리와 통합하는 것은 매우 쉽습니다. 아래에서 기본 사항을 살펴보고 시작하는 데 도움이 되는 몇 가지 멋진 플러그인을 제공합니다!

자바스크립트 문서 보기 »

포함된 항목

jQuery 및 Ender 와 함께 작동하는 새로운 사용자 정의 플러그인을 사용하여 Bootstrap의 주요 구성 요소 중 일부에 생명을 불어넣으 세요 . 특정 개발 요구 사항에 맞게 확장 및 수정하는 것이 좋습니다.

자바스크립트가 필요한가요?

아니요! 부트스트랩은 무엇보다도 CSS 라이브러리로 설계되었습니다. 이 자바스크립트는 포함된 스타일 위에 기본 대화형 레이어를 제공합니다.

그러나 자바스크립트가 필요한 사용자를 위해 부트스트랩을 자바스크립트와 통합하는 방법을 이해하고 기본 기능에 대한 빠르고 가벼운 옵션을 즉시 제공하기 위해 위의 플러그인을 제공했습니다.

자세한 내용과 라이브 데모를 보려면 플러그인 설명서 페이지 를 참조하십시오 .