Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, eros에서 전정.
Bootstrap은 웹 앱 및 사이트 개발을 시작하기 위해 설계된 Twitter의 툴킷입니다.
여기에는 타이포그래피, 양식, 버튼, 테이블, 그리드, 탐색 등을 위한 기본 CSS 및 HTML이 포함됩니다.
괴상한 경고: Bootstrap은 Less로 구축 되었으며 최신 브라우저를 염두에 두고 즉시 작동하도록 설계되었습니다.
가장 빠르고 쉬운 시작을 위해 이 스니펫을 웹페이지에 복사하세요.
Less를 사용하는 팬입니까? 문제 없습니다. 리포지토리를 복제하고 다음 줄을 추가하기만 하면 됩니다.
Twitter 초창기에는 엔지니어들이 프론트엔드 요구 사항을 충족하기 위해 익숙한 거의 모든 라이브러리를 사용했습니다. Bootstrap은 Twitter의 첫 번째 Hackweek 동안 제기된 문제와 개발이 빠르게 가속화된 문제에 대한 답으로 시작되었습니다.
Twitter의 많은 엔지니어들의 도움과 피드백으로 Bootstrap은 기본 스타일뿐만 아니라 더욱 우아하고 내구성 있는 프런트 엔드 디자인 패턴을 포함하도록 크게 성장했습니다.
dev.twitter.com 에서 더 읽어보기 ›
부트스트랩은 Chrome, Safari, Internet Explorer 및 Firefox와 같은 주요 최신 브라우저에서 테스트 및 지원됩니다.
부트스트랩은 컴파일된 CSS, 컴파일되지 않은 템플릿 및 예제 템플릿과 함께 제공됩니다.
Bootstrap의 일부로 제공되는 기본 그리드 시스템은 940px 너비의 16열 그리드입니다. 인기 있는 960 그리드 시스템의 특징이지만 왼쪽과 오른쪽에 추가 여백/패딩이 없습니다.
여기에 표시된 것처럼 기본 레이아웃은 그리드 시스템의 일부로 정의한 16개의 기본 열에 걸쳐 있는 두 개의 "열"로 만들 수 있습니다. 더 많은 변형을 보려면 아래의 예를 참조하십시오.
- <div 클래스="행"> 클래스 = "행" >
- <div 클래스 = "span6 열" >
- ...
- </div>
- <div 클래스 = "span10 열" >
- ...
- </div>
- </div>
거의 모든 사이트 또는 페이지를 위한 기본 940px 너비의 중앙 컨테이너 레이아웃입니다.
- <본체>
- <div 클래스 = "컨테이너" >
- ...
- </div>
- </바디>
최소 및 최대 너비와 왼쪽 사이드바가 있는 유연한 유동적 또는 유동적 페이지 구조입니다. 앱에 적합합니다.
- <본체>
- <div 클래스 = "컨테이너 유체" >
- <div 클래스 = "사이드바" >
- ...
- </div>
- <div 클래스 = "콘텐츠" >
- ...
- </div>
- </div>
- </바디>
웹 페이지를 구성하기 위한 표준 인쇄 체계 계층입니다.
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>
—
Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
줄리어스 히버트 박사
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
테이블은 많은 것을 위해 훌륭합니다. 그러나 훌륭한 테이블은 (코드 수준에서) 유용하고, 확장 가능하고, 가독성이 좋기 위해 약간의 마크업에 대한 애정이 필요합니다. 다음은 도움이 될 몇 가지 팁입니다.
<thead>
계층 구조가 <thead>
>> 가 되도록 항상 열 머리글을 래핑 <tr>
하십시오 <th>
.
<tbody>
열 헤더와 유사하게 모든 테이블의 본문 내용은 계층 구조가 <tbody>
> <tr>
> 가 되도록 래핑되어야 합니다 <td>
.
모든 테이블은 가독성을 보장하고 구조를 유지하기 위해 필수 테두리만 사용하여 자동으로 스타일이 지정됩니다. 추가 클래스나 속성을 추가할 필요가 없습니다.
# | 이름 | 성 | 언어 |
---|---|---|---|
1 | 약간 | 하나 | 영어 |
2 | 조 | 식스팩 | 영어 |
삼 | 스투 | 훼손하다 | 암호 |
- <테이블 클래스 = "공통 테이블" >
- ...
- </표>
얼룩말 줄무늬를 추가하여 테이블을 멋지게 꾸며 보세요 .zebra-striped
. 클래스를 추가하기만 하면 됩니다.
# | 이름 | 성 | 언어 |
---|---|---|---|
1 | 약간 | 하나 | 영어 |
2 | 조 | 식스팩 | 영어 |
삼 | 스투 | 훼손하다 | 암호 |
참고: Zebra 스트라이핑은 IE8 이하와 같은 이전 브라우저에서는 사용할 수 없는 점진적 개선 기능입니다.
- <테이블 클래스 = "공통 테이블 얼룩말 줄무늬" >
- ...
- </표>
이전 예에서 jQuery 및 Tablesorter 플러그인 을 통해 정렬 기능을 제공하여 테이블의 유용성을 향상시킵니다 . 정렬을 변경하려면 열의 머리글을 클릭합니다.
# | 이름 | 성 | 언어 |
---|---|---|---|
1 | 당신의 | 하나 | 영어 |
2 | 조 | 식스팩 | 영어 |
삼 | 스투 | 훼손하다 | 암호 |
- <스크립트 src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <스크립트 >
- $ ( 함수 () {
- $ ( "table#sortTableExample" ). 테이블 분류기 ({ sortList : [[ 1 , 0 ]] });
- });
- </스크립트>
- <테이블 클래스 = "공통 테이블 얼룩말 줄무늬" >
- ...
- </표>
모든 양식에는 읽기 가능하고 확장 가능한 방식으로 표시할 수 있는 기본 스타일이 제공됩니다. 텍스트 입력, 선택 목록, 텍스트 영역, 라디오 버튼 및 확인란, 버튼에 대한 스타일이 제공됩니다.
양식의 HTML에 추가 .form-stacked
하면 필드 왼쪽 대신 필드 상단에 레이블이 표시됩니다. 양식이 짧거나 더 무거운 양식에 대한 두 개의 입력 열이 있는 경우에 유용합니다.
일반적으로 버튼은 작업에 사용되는 반면 링크는 개체에 사용됩니다. 예를 들어 "다운로드"는 버튼이 될 수 있고 "최근 활동"은 링크가 될 수 있습니다.
모든 버튼은 기본적으로 밝은 회색 스타일이지만 파란색 .primary
클래스를 사용할 수 있습니다. 또한 자신의 스타일을 롤링하는 것은 쉽습니다.
작업의 실패, 가능한 실패 또는 성공을 강조 표시하는 한 줄 메시지입니다. 특히 양식에 유용합니다.
약간의 설명이 필요한 메시지의 경우 단락 스타일 경고가 있습니다. 이는 더 긴 오류 메시지를 버블링하거나, 보류 중인 작업에 대해 사용자에게 경고하거나, 페이지를 더 강조하기 위해 정보를 제공하는 데 적합합니다.
모달(대화 상자 또는 라이트박스)은 배경 컨텍스트를 유지하는 것이 중요한 상황에서 컨텍스트 작업에 적합합니다.
멋진 몸매 하나...
Twipsies는 혼란스러운 사용자를 돕고 올바른 방향으로 안내하는 데 매우 유용합니다.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architectureto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed sed dictavolta quae accusantup
팝오버를 사용하여 레이아웃에 영향을 주지 않고 페이지에 하위 텍스트 정보를 제공합니다.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, eros에서 전정.
Bootstrap은 보다 빠르고 쉬운 웹 개발을 위한 CSS 전처리 기인 Less 와 함께 사용할 믹스인 및 변수의 오픈 소스 팩인 Preboot 로 구축되었습니다.
부트스트랩에서 Preboot를 사용한 방법과 다음 프로젝트에서 Less를 실행하기로 선택한 경우 이를 어떻게 활용할 수 있는지 확인하십시오.
브라우저에서 자바스크립트를 통해 CSS에서 부트스트랩의 Less 변수, 믹스인 및 중첩을 최대한 활용하려면 이 옵션을 사용하십시오.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" 미디어 = "all" />
- <script 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의 일반 구문 외에 또 다른 스타일의 주석을 제공 합니다.
- // 이것은 주석입니다.
- /* 이것도 주석 */
믹스인은 기본적으로 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 )) ! 중요한 ;
- }