기본 그리드

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

그리드 마크업의 예

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

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

고정 레이아웃

거의 모든 사이트 또는 페이지를 위한 기본 940px 너비의 중앙 컨테이너 레이아웃입니다.

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

유체 레이아웃

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

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

제목 및 사본

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

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>

기타 집단

강조, 주소 및 약어 사용

<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.

구애

요소 는 address주소에 사용됩니다. 다음과 같이 표시됩니다.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 전화
: (123) 456-7890

참고: 의 각 줄은 스타일을 적용하지 않고 실생활에서 읽을 때 콘텐츠를 적절하게 구성하기 위해 address줄 바꿈( )으로 끝나야 합니다 .<br />

약어

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

인용구

<blockquote> <p> <cite>

blockquote당신의 주위 paragraph와 cite태그 를 포장해야 합니다. 출처를 인용할 때는 cite요소를 사용하세요. CSS는 자동으로 이름 앞에 전각 대시(—)를 붙입니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua...

줄리어스 히버트 박사

무순<ul>

• 제레미 빅스비
• 로버트 디저
• 조시 워싱턴
• 안톤 카프레시
• 내 팀 동료
  • 조지 카스탄자
  • 제리 사인펠드
  • 코스모 크레이머
  • 일레인 베니스
  • 새로운 남자
• 존 제이콥
• 폴 피어스
• 케빈 가넷

스타일이 없는<ul.unstyled>

• 제레미 빅스비
• 로버트 디저
• 조시 워싱턴
• 안톤 카프레시
• 내 팀 동료
  • 조지 카스탄자
  • 제리 사인펠드
  • 코스모 크레이머
  • 일레인 베니스
  • 새로운 남자
• 존 제이콥
• 폴 피어스
• 케빈 가넷

주문<ol>

1. 제레미 빅스비
2. 로버트 디저
3. 조시 워싱턴
4. 안톤 카프레시
5. 내 팀 동료
   1. 조지 카스탄자
   2. 제리 사인펠드
   3. 코스모 크레이머
   4. 일레인 베니스
   5. 새로운 남자
6. 존 제이콥
7. 폴 피어스
8. 케빈 가넷

설명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.

테이블 만들기

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

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

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

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

예: 기본 테이블 스타일

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

#	이름	성	언어
1	약간	하나	영어
2	조	식스팩	영어
삼	스투	훼손하다	암호

<테이블 클래스="공통 테이블"> 클래스 = "공통 테이블" >
  ...
</표>

예: 얼룩말 줄무늬

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

#	이름	성	언어
1	약간	하나	영어
2	조	식스팩	영어
삼	스투	훼손하다	암호

<table class="common-table zebra-striped"> class = "공통 테이블 얼룩말 줄무늬" >
...
</표>

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

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

#	이름	성	언어
1	당신의	하나	영어
2	조	식스팩	영어
삼	스투	훼손하다	암호

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

기본 스타일

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

예제 양식 범례

X-큰 입력

고르다

1 2 삼 4 5

고르다

1 2 삼 4 5

편집할 수 없는 입력

여기에 약간의 가치

비활성화된 입력

X-큰 입력

도움말 텍스트의 작은 스니펫

예제 양식 범례

추가된 텍스트

@

추가 확인란

추가된 체크박스

파일 입력

예제 양식 범례

옵션 목록

• 옵션 1은 이것과 저것입니다. 이것이 왜 훌륭한지를 포함해야 합니다.
• 옵션 2도 확인하고 양식 결과에 포함할 수 있습니다.
• 옵션 3도 확인하고 양식 결과에 포함할 수 있습니다.
• 옵션 4는 비활성화되어 있으므로 확인할 수 없습니다.

참고: 레이블은 훨씬 더 큰 클릭 영역과 더 유용한 양식에 대한 모든 옵션을 둘러쌉니다.

날짜 범위

에게 모든 시간은 태평양 표준시(GMT -08:00)로 표시됩니다.

텍스트 영역

필요한 경우 위의 필드를 설명하는 도움말 텍스트 블록.

옵션 목록

• 옵션 1은 이것과 저것입니다. 이것이 왜 훌륭한지를 포함해야 합니다.
• 옵션 2도 확인하고 양식 결과에 포함할 수 있습니다.

변경 사항을 저장하다 취소

누적 양식

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

예제 양식 범례

X-큰 입력

고르다

1 2 삼 4 5

예제 양식 범례

옵션 목록

• 옵션 1은 이것과 저것입니다. 이것이 왜 훌륭한지를 포함해야 합니다.
• 옵션 2도 확인하고 양식 결과에 포함할 수 있습니다.

참고: 레이블은 훨씬 더 큰 클릭 영역과 더 유용한 양식에 대한 모든 옵션을 둘러쌉니다.

변경 사항을 저장하다 취소

버튼

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

모든 버튼은 기본적으로 밝은 회색 스타일이지만 파란색 .primary클래스를 사용할 수 있습니다. 또한 자신의 스타일을 롤링하는 것은 쉽습니다.

예시 버튼

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

대체 크기

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

비활성화 상태

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

연결

버튼

뭐야

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

사용자 정의 가능

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

드롭다운 포함

기본 탐색의 일부로 탐색에 드롭다운을 추가할 수 있는 기능이 포함되었습니다. 위의 보조 탐색 메뉴(오른쪽 정렬)를 확인하여 수행 방법을 확인하세요.

탭과 알약

를 사용하여 간단한 보조 탐색을 만듭니다 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>

쪽수 매기기

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>

기본 알림

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

메시지 차단

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

모달

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

팝오버

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

Bootstrap은 보다 빠르고 쉬운 웹 개발을 위한 CSS 전처리 기인 Less 와 함께 사용할 믹스인 및 변수의 오픈 소스 팩인 Preboot 로 구축되었습니다.

부트스트랩에서 Preboot를 사용한 방법과 다음 프로젝트에서 Less를 실행하기로 선택한 경우 이를 어떻게 활용할 수 있는지 확인하십시오.

사용 방법

브라우저에서 자바스크립트를 통해 CSS에서 부트스트랩의 Less 변수, 믹스인 및 중첩을 최대한 활용하려면 이 옵션을 사용하십시오.

<link rel = "stylesheet/less" 유형 = "text/css" href = "less/bootstrap.less" 미디어 = "all" />     
<스크립트 유형 = "텍스트/자바스크립트" src = "js/less-1.0.41.min.js" ></script>  

.js 솔루션이 느껴지지 않습니까? Less Mac 앱 을 사용 하거나 Node.js 를 사용하여 코드를 배포할 때 컴파일하십시오.

포함된 항목

다음은 Bootstrap의 일부로 Twitter Bootstrap에 포함된 주요 내용입니다. Bootstrap 웹사이트 또는 Github 프로젝트 페이지로 이동하여 다운로드하고 자세히 알아보세요.

색상 변수

Less의 변수는 CSS 골칫거리를 무료로 유지하고 업데이트하는 데 적합합니다. 색상 값이나 자주 사용하는 값을 변경하고 싶을 때 한 곳에서 업데이트하면 설정이 완료됩니다.

// 연결
@linkColor : #8b59c2;         
@linkColorHover :     어둡게 ( @linkColor , 10 ); 
 
// 회색
@블랙 : #000;             
@grayDark :           밝게 ( @black , 25 %); 
@gray :               밝게 ( @black , 50 %); 
@grayLight :          밝게 ( @black , 70 %); 
@grayLighter :        밝게 ( @black , 90 %); 
@화이트 : #ffff ;             
 
// 강조 색상
@blue : #08b5fb;              
@그린 : #46a546 ;             
@빨간색 : #9d261d ;               
@노란색 : #ffc40d ;            
@오렌지 : #f89406 ;            
@핑크 : #c3325f ;              
@보라색 : #7a43b6 ;            
 
// 기준선
@기준선 : 20px ;          

댓글 달기

/* ... */Less는 CSS의 일반 구문 외에 또 다른 스타일의 주석을 제공 합니다.

// 이것은 주석입니다.
/* 이것도 주석 */

wazoo를 섞어

믹스인은 기본적으로 CSS에 대한 포함 또는 부분이므로 코드 블록을 하나로 결합할 수 있습니다. box-shadow, 브라우저 간 그라디언트, 글꼴 스택 등과 같은 공급업체 접두사 속성에 적합 합니다. 다음은 부트스트랩에 포함된 믹스인의 샘플입니다.

글꼴 스택

#폰트 {
  . 약식 ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    글꼴 크기 : @size ; _ 
    글꼴 - 무게 : @weight ; 
    라인 높이 : @lineHeight ; _ 
  }
  . 산세 리프 ( @weight : normal , @size : 14px , @lineHeight : 20px ) { _     
    글꼴 - 패밀리 : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    글꼴 크기 : @size ; _ 
    글꼴 - 무게 : @weight ; 
    라인 높이 : @lineHeight ; _ 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    글꼴 - 패밀리 : "Georgia" , Times New Roman , Times , sans - serif ;     
    글꼴 크기 : @size ; _ 
    글꼴 - 무게 : @weight ; 
    라인 높이 : @lineHeight ; _ 
  }
  . 고정 폭 ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , 고정 폭 ;   
    글꼴 크기 : @size ; _ 
    글꼴 - 무게 : @weight ; 
    라인 높이 : @lineHeight ; _ 
  }
}

그라디언트

#그라데이션 {
  . 수평 ( @startColor : #555, @endColor: #333) { 
    배경색 : @endColor ; _ _ 
    배경 - 반복 : 반복 - x ;
    배경 - 이미지 : - khtml - 그래디언트 ( 선형 , 왼쪽 상단 , 오른쪽 상단 , ( @startColor ) 에서 ( @endColor ) 까지 ); // 정복자   
    배경 - 이미지 : - moz - 선형 - 그래디언트 ( 왼쪽 , @startColor , @endColor ); // FF 3.6+    
    배경 이미지 : - ms - 선형 - 그래디언트 ( 왼쪽 , @startColor , @endColor ) ; // IE10    
    배경 - 이미지 : - 웹킷 - 그래디언트 ( 선형 , 왼쪽 상단 , 오른쪽 상단 , 색상 - 정지 ( 0 %, @startColor ), 색상 - 정지 ( 100 %, @endColor )); // 사파리 4+, 크롬 2+    
    배경 - 이미지 : - 웹킷 - 선형 - 그라디언트 ( 왼쪽 , @startColor , @endColor ); // 사파리 5.1 이상, 크롬 10 이상    
    배경 - 이미지 : - o - 선형 - 그래디언트 ( 왼쪽 , @startColor , @endColor ); // 오페라 11.10    
    - ms - 필터 : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    필터 : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 및 IE7 
    배경 이미지 : 선형 그라데이션 ( 왼쪽 , @startColor , @endColor ) ; _ // 르 표준   
  }
  . 수직 ( @startColor : #555, @endColor: #333) { 
    배경색 : @endColor ; _ _ 
    배경 - 반복 : 반복 - x ;
    배경 - 이미지 : - khtml - 그래디언트 ( 선형 , 왼쪽 상단 , 왼쪽 하단 , ( @startColor ) 에서 ( @endColor ) 까지 ); // 정복자   
    배경 - 이미지 : - moz - 선형 - 그래디언트 ( @startColor , @endColor ); // FF 3.6+   
    배경 - 이미지 : - ms - 선형 - 그래디언트 ( @startColor , @endColor ); // IE10   
    배경 - 이미지 : - 웹킷 - 그래디언트 ( 선형 , 왼쪽 상단 , 왼쪽 하단 , 색상 - 정지 ( 0 %, @startColor ), 색상 - 정지 ( 100 %, @endColor )); // 사파리 4+, 크롬 2+    
    배경 - 이미지 : - 웹킷 - 선형 - 그래디언트 ( @startColor , @endColor ); // 사파리 5.1 이상, 크롬 10 이상   
    배경 - 이미지 : - o - 선형 - 그래디언트 ( @startColor , @endColor ); // 오페라 11.10   
    - ms - 필터 : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    필터 : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 및 IE7 
    배경 이미지 : 선형 그라데이션 ( @startColor , @endColor ) ; _ // 표준  
  }
  . 방향성 ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . 수직 - 3 색 ( @startColor : #00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

운영 및 그리드 시스템

다음과 같이 유연하고 강력한 믹스인을 생성하기 위해 멋진 계산을 하고 수학을 수행하십시오.

// 격자도
@ 그리드 열 : 16 ;       
@그리드컬럼폭 : 40px ;   
@gridGutterWidth : 20px ;   
 
// 그리드 시스템
. 컨테이너 {
  너비 : @siteWidth ; 
  여백 : 0 자동 ;  
  . 클리어픽스 ();
}
. 열 ( @columnSpan : 1 ) {  
  표시 : 인라인 ; 
  플로트 : 왼쪽 ;
  너비 : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  여백 - 왼쪽 : @gridGutterWidth ; 
  &: 첫 번째 - 자식 {
    여백 - 왼쪽 : 0 ; 
  }
}
. 오프셋 ( @columnOffset : 1 ) {  
  여백 - 왼쪽 : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! 중요한 ;          
}