- 문서: 일반 구조, 예제 및 코드 조각에 대한 전반적인 주요 업데이트. 또한 새로운 미디어 쿼리에 응답했습니다.
- 문서: 모든 문서 페이지는 이제 Mustache 템플릿으로 구동되며 문자열은 Twitter 번역 센터에서 번역할 수 있도록 i18n 태그로 래핑됩니다. 문서에 대한 모든 변경 사항은 여기에서 수행한 다음 컴파일해야 합니다(CSS 및 LESS와 유사).
- Repo 디렉토리 구조: 문서 홈페이지에 있는 큰 직접 다운로드 링크를 위해 루트에서 컴파일된 CSS를 제거했습니다. 컴파일된 CSS는
/docs/assets/css/.
- 문서 및 리포지토리: 하나의 메이크 파일,
make터미널에 입력하고 업데이트된 문서와 CSS를 가져오기만 하면 됩니다.
그리드 시스템
- 업데이트된 그리드 시스템, 이제 16개 대신 12개 열
- 반응형 접근 방식은 프로젝트가 스마트폰, 태블릿 등에서 거의 즉시 사용할 수 있음을 의미합니다.
- 17-24개 열에 대한 사용되지 않는(기본적으로) 그리드 열 지원 제거
반응형(미디어 쿼리)
- 모바일 및 태블릿 장치 에서 기본 지원 을 위해 추가된 미디어 쿼리
- 반응형 CSS는 bootstrap-responsive.css로 별도로 컴파일됩니다.
타이포그래피
h4요소가 16px에서 14px로 감소했으며 기본값 line-height은 18px입니다.h5요소가 14px에서 12px로 떨어졌습니다.h6요소가 13px에서 11px로 떨어졌습니다.- 다음과 같은 경우 블록 인용에 대한 오른쪽 정렬 옵션
float: right;
암호
- 새로운 그래픽 스타일
<code>
- Google Code Prettify 스타일 업데이트(GitHub의 요점 기반)
테이블
colspan및 _rowspan- 스타일은 이제 새로운 기본 클래스로 제한됩니다.
.table
.table-필수 접두사로 표준화된 테이블 클래스- 사용하지 않는 테이블 색상 옵션 제거(작은 영향에 비해 너무 많은 코드)
- TableSorter에 대한 지원 중단
버튼
- 색상 및 크기에 대한 새로운 클래스, 모두 접두사
.btn-
- IE9: 그라디언트 제거 및 둥근 모서리 추가
- 버튼 그룹에서 스타일을 더 명확하게 만들고(신규) 사용자 지정 전환으로 더 보기 좋게 만들기 위해 활성 상태를 업데이트했습니다.
.buttonBackground버튼 그라디언트를 설정하는 새로운 믹스인 ,.secondary클래스는 연관된 스타일이 없었기 때문에 문서의 모달 예제에서 제거되었습니다 .
양식
- 기본 양식 스타일은 이제 더 적은 CSS를 사용하고 더 큰 유연성을 추가하기 위해 수직(스택)입니다.
.form-필수 접두사로 표준화된 양식 클래스- 검색, 인라인 및 가로 양식에 대한 새로운 기본 제공 양식 기본값
- 수평 양식의 경우 이전 클래스
.clearfix및 .input는 새 .control-group및 .controls.
- 새로운 옵션 클래스를 포함하여 모든 스타일에 대한 클래스가 포함된 보다 유연한 수평 양식 마크업
label
- 양식 상태: 새로운 LESS 변수를 통해 색상 업데이트 및 사용자 정의 가능
아이콘, Glyphicons 제공
- 새로운 Glyphicons Halflings 아이콘 세트가 흑백으로 스프라이트 형태로 추가되었습니다.
- 수많은 컨텍스트에서 아이콘에 필요한 간단한 마크업:
<i class="icon-cog"></>
.icon-white동일한 아이콘의 흰색 변형에 대해 다른 클래스 추가 ,
버튼 그룹 및 드롭다운
- 2.0의 두 가지 새로운 구성 요소: 버튼 그룹 및 버튼 드롭다운
- 종속성: 버튼 드롭다운은 버튼 그룹을 기반으로 하므로 모든 스타일이 필요합니다.
- 버튼 그룹,
.btn-group은 버튼 도구 모음을 사용하여 한 단계 더 높은 수준으로 그룹화할 수 있습니다..btn-toolbar
항해
.nav탭과 알약은 이제 새 기본 클래스 를 사용해야 <ul>하며 클래스 이름은 now .nav-pills및 .nav-tabs입니다.- 동일한 기본 클래스를 사용하는 새로운 탐색 목록 변형이 추가되었습니다.
.nav
- 세로 탭과 알약이 추가
.nav-stacked되었습니다.<ul>
- 알약은 기본적으로 덜 둥글도록 스타일이 변경되었습니다.
- 이제 알약에 드롭다운 메뉴가 지원됩니다(탭과 동일한 마크업 및 스타일 공유).
Navbar(이전의 topbar)
.topbar기본 클래스가 에서 로 변경됨.navbar- 이제 고정 위치(기본 동작, 고정되지 않음)를 지원하고 다음을 통해 뷰포트 상단에 고정됨
.navbar-fixed-top(이전에는 고정만 지원됨)
- 최상위 탐색에 세로 구분선을 추가했습니다.
- 탐색 모음에서 인라인 양식에 대한 지원이 향상되었습니다. 이제
.navbar-form의도한 양식으로만 스타일 범위를 적절하게 지정해야 합니다.
- Navbar 검색 양식은 이제
.navbar-search클래스를 사용하고 해당 입력에 .search-query. 검색 양식을 배치하려면 또는 를 사용해야 합니다 ..pull-left.pull-right
- 더 작은 해상도 및 장치에 대해 탐색 모음 콘텐츠를 축소하기 위한 선택적 반응형 마크업을 추가했습니다. 활용 방법 은 navbar 문서 를 참조하세요.
드롭다운 메뉴
.dropdown-menu간격을 좁히도록 업데이트됨- 이제
<span class="caret"></span>드롭다운 화살표를 표시하려면 추가해야 합니다.
- 이제
data-toggle="dropdown"토글 동작을 얻으려면 속성 을 추가해야 합니다.
- 탐색 모음(고정 상단 표시줄)에 새로운 드롭다운이 있습니다. 어두운 버전은 사라지고 위치를 명확하게 하기 위해 상단에 추가 캐럿이 있는 표준 흰색 버전이 그 자리에 있습니다.
라벨
- 양식 상태 색상과 일치하도록 업데이트된 레이블 색상
- 그래픽적으로 일치할 뿐만 아니라 동일한 새로운 변수에 의해 구동됩니다.
썸네일
- 이전에는
.media-grid, 지금은 그냥 .thumbnails, 우리는 기본적으로 전반적인 단순성을 유지하면서 더 많은 용도를 위해 이 구성 요소를 철저히 확장했습니다.
- 개별 썸네일에는 이제
.thumbnail수업 이 필요합니다.
경고
- 새 기본 클래스:
.alert대신.alert-message
- 다른 옵션에 대해 표준화된 클래스 이름, 이제 모두 다음으로 시작
.alert-
- 기본 경고와 블록 수준 경고를 하나로 결합하도록 재설계된 기본 경고 스타일
- 블록 수준 경고 클래스 변경됨:
.alert-block대신.block-message
진행률 표시줄
- 2.0의 새로운 기능
- CSS3를 통한 줄무늬 및 애니메이션 변형을 포함하여 클래스를 통해 여러 스타일을 제공합니다.
기타 구성 요소
- 우물 구성 요소 및 닫기 아이콘에 대한 문서 추가(모달 및 경고에 사용됨)
툴팁
- 플러그인 메소드의 이름 이 에서
twipsy()로 tooltip()변경되었으며 클래스 이름이 에서 로 변경 twipsy되었습니다 tooltip.
- 이전 의
placement옵션 값 below은 이제 bottom이고 above지금은 top입니다.
animate옵션 이름이 으로 변경 되었습니다 animation.- 도구 설명이
html지금 HTML을 허용하도록 기본 설정되어 있으므로 옵션이 제거되었습니다.
팝오버
- 이제 자식 요소의 이름이 올바르게 지정되었습니다.
.titleto .popover-title, .innerto .popover-inner및 .contentto .popover-content.
- 이전 의
placement옵션 값 below은 이제 bottom이고 above지금은 top입니다.
새로운 플러그인