역사

Twitter 초창기에는 엔지니어들이 프론트엔드 요구 사항을 충족하기 위해 익숙한 거의 모든 라이브러리를 사용했습니다. Bootstrap은 Twitter의 첫 번째 Hackweek 동안 제기된 문제와 개발이 빠르게 가속화된 문제에 대한 답으로 시작되었습니다.

Twitter의 많은 엔지니어들의 도움과 피드백으로 Bootstrap은 기본 스타일뿐만 아니라 더욱 우아하고 내구성 있는 프런트 엔드 디자인 패턴을 포함하도록 크게 성장했습니다.

dev.twitter.com 에서 더 읽어보기 ›

브라우저 지원

부트스트랩은 Chrome, Safari, Internet Explorer 및 Firefox와 같은 주요 최신 브라우저에서 테스트 및 지원됩니다.

• 최신 사파리
• 최신 구글 크롬
• 파이어폭스 4+
• 인터넷 익스플로러 7 이상
• 오페라 11

포함된 항목

부트스트랩은 컴파일된 CSS, 컴파일되지 않은 템플릿 및 예제 템플릿과 함께 제공됩니다.

• 모든 원본 .less 파일
• 완전히 컴파일되고 축소된 CSS
• 완전한 스타일 가이드 문서
• 예제 페이지 템플릿(곧 추가 예정)

기본 그리드

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

그리드 마크업의 예

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

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

고정 레이아웃

기본 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>가까운 조상 또는 전체 작업 본문에 대한 연락처 정보에 사용됩니다. 다음과 같이 표시됩니다.

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

참고: 의 각 줄은 <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.

줄리어스 히버트 박사

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

테이블 만들기

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

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

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

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

예: 기본 테이블 스타일

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

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

<표>
  ...
</표>

예: 얼룩말 줄무늬

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

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

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

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

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

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

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

<스크립트 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는 다른 것이므로 선택하면 옵션 1이 선택 해제됩니다.

  취소

누적 양식

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

예제 양식 범례

X-큰 입력

고르다

1 2 삼 4 5

예제 양식 범례

X-큰 입력

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

옵션 목록

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

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

변경 사항을 저장하다  취소

버튼

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

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

예시 버튼

버튼 스타일은 적용된 모든 것에 적용할 수 있습니다 .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>

기본 알림

div.alert-message

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

메시지 차단

div.alert-message.block-message

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

모달

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

도구 팁

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

팝오버

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

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

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

사용 방법

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" 미디어 = "all" />    
<script src = "js/less-1.1.3.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 ;            
 
// 베이스라인 그리드
@basefont : 13px ;          
@ 기준선 : 18px ;          

댓글 달기

/* ... */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    
    배경 이미지 : 선형 그라데이션 ( 왼쪽 , @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   
    배경 이미지 : 선형 그라데이션 ( @startColor , @endColor ) ; _ // 표준  
  }
  . 방향성 ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . 수직 - 3 색 ( @startColor : #00b3ee , @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

운영 및 그리드 시스템

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

// 격자도
@ 그리드 열 : 16 ;       
@그리드컬럼폭 : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// 그리드 시스템
. 컨테이너 {
  너비 : @siteWidth ; 
  여백 : 0 자동 ;  
  . 클리어픽스 ();
}
. 열 ( @columnSpan : 1 ) {  
  너비 : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. 오프셋 ( @columnOffset : 1 ) {  
  여백 - 왼쪽 : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}