Twitter Bootstrap을 사용하여 웹 애플리케이션에 반응 형 디자인 기능을 추가해야합니다. 나는 단지 반응 형 동작을 원하고 타이포그래피, 구성 요소 또는 부트 스트랩에 포함 된 다른 것들에 관심이 없습니다.
내가 가지고 사용자 정의 부트 스트랩 버전 바로 그리드 시스템을 선택합니다. 그러나 생성 된 CSS를 애플리케이션에 추가하면 모든 스타일 (헤더, 링크 및 기타)이 엉망이됩니다. 왜 그럴까요? 그리드 시스템만으로 부트 스트랩 CSS를 얻으려면 어떻게해야합니까? 부트 스트랩 파일의 수동 수정을 피하고 싶습니다.
답변:
http://getbootstrap.com/customize/로 이동 하여 BS3 프레임 워크에서 원하는 것을 전환 한 다음 "컴파일 및 다운로드"를 클릭하면 선택한 CSS 및 JS를 얻을 수 있습니다.
CSS를 열고 그리드를 제외하고 모두 제거합니다. 여기에는 일부 정규화 항목도 포함됩니다. 그리고 사이트의 모든 스타일을 box-sizing : border-box- http ://www.w3schools.com/cssref/css3_pr_box-sizing.asp로 조정해야합니다.
체크 아웃 zirafa / 부트 스트랩 그리드 전용 . 여기에는 필요한 부트 스트랩 그리드 와 반응 형 유틸리티 만 포함되어 있으며 (재설정 또는 기타 없음) LESS 파일로 직접 작업 하는 복잡성 을 단순화 합니다 .
Grid system"반응 형 유틸리티"를 선택 하고 다음을 제공합니다. http://jsfiddle.net/7LVzs/
Bootstrap 3.3.5 그리드로만 Grunt 빌드를 만들었습니다.
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
최대 10KB가 최소화되었습니다.
Bootstrap에서 다른 부분이 필요하면 /src/less/bootstrap.less에 포함하십시오.
대신 MDO의 http://getpreboot.com/을 사용하는 것이 좋습니다 . v2 preboot부터는 부트 스트랩 3.0 그리드 시스템을 만드는 데 사용되는 LESS 믹스 인 / 변수를 백 포트하며 CSS 생성기를 사용하는 것보다 훨씬 가볍습니다. 사실, 포함 preboot.less만하면 전체 파일이 믹스 인 / 변수로 구성되어 있으므로 최종 출력이 아닌 사전 컴파일에만 사용되므로 오버 헤드가 없습니다.
이 질문을 한 지 오래되었지만 이제는 Bootstrap을 완전히 포기하고 CSS Grid를 사용할 수 있습니다! (더 간단하고 깔끔하며 더 유연하고 빠릅니다). 이 멋진 기사를 참조하십시오 : 부트 스트랩 사용 중지 — 구성 요소 기반 UI를위한 실용적인 CSS 그리드 템플릿 만들기