확장 · 부트스트랩 한국어로

Bootstrap은 우리의 좋은 친구 Alexis Sellier 가 만든 동적 스타일시트 언어인 LESS를 핵심으로 하여 만들어졌습니다 . 시스템 기반 CSS를 더 빠르고 쉽고 재미있게 개발할 수 있습니다.

왜 적게?

Bootstrap의 제작자 중 한 명이 이에 대한 간단한 블로그 게시물을 작성했으며 여기에 요약되어 있습니다.

Bootstrap은 Sass에 비해 Less로 더 빠르게 ~6배 더 빠르게 컴파일합니다.
Less는 JavaScript로 작성되어 Ruby with Sass와 비교하여 더 쉽게 파고들고 패치할 수 있습니다.
적은 것이 더 많습니다. 우리는 CSS를 작성하고 부트스트랩을 모든 사람이 접근할 수 있도록 만드는 것처럼 느끼기를 원합니다.

무엇이 포함되어 있습니까?

CSS의 확장인 LESS에는 변수, 재사용 가능한 코드 스니펫용 믹스인, 간단한 수학 연산, 중첩 및 색상 기능도 포함됩니다.

더 알아보기

자세한 내용은 공식 웹사이트 http://lesscss.org/ 를 방문하십시오.

CSS는 Less로 작성되고 변수와 믹스인을 활용하므로 최종 프로덕션 구현을 위해 컴파일해야 합니다. 방법은 다음과 같습니다.

참고: 수정된 CSS를 사용하여 GitHub에 pull 요청을 제출하는 경우 이러한 방법을 통해 CSS를 다시 컴파일 해야 합니다 .

컴파일 도구

명령줄

명령줄을 통해 컴파일하려면 GitHub 의 프로젝트 추가 정보에 있는 지침을 따르세요 .

자바스크립트

최신 Less.js를 다운로드하고 해당 경로(및 부트스트랩)를 <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less 파일을 다시 컴파일하려면 파일을 저장하고 페이지를 다시 로드하면 됩니다. Less.js는 이를 컴파일하여 로컬 저장소에 저장합니다.

비공식 Mac 앱

비공식 Mac 앱 은 .less 파일의 디렉토리를 감시하고 감시된 .less 파일을 저장할 때마다 코드를 로컬 파일로 컴파일합니다. 원하는 경우 자동 축소를 위한 앱의 기본 설정과 컴파일된 파일이 끝나는 디렉터리를 전환할 수 있습니다.

더 많은 애플 리케이션

결정적 시기

Crunch는 Adobe Air를 기반으로 구축된 멋진 LESS 편집기 및 컴파일러입니다.

코드킷

비공식 Mac 앱과 같은 사람이 만든 CodeKit은 LESS, SASS, Stylus 및 CoffeeScript를 컴파일하는 Mac 앱입니다.

단순함

LESS 파일의 드래그 앤 드롭 컴파일을 위한 Mac, Linux 및 Windows 앱. 또한 소스 코드는 GitHub에 있습니다 .

컴파일되거나 축소된 CSS 및 JS를 드롭하여 웹 프로젝트를 빠르게 시작 하십시오. 손쉬운 업그레이드 및 유지 관리를 위해 사용자 정의 스타일을 별도로 레이어링하십시오.

설정 파일 구조

최신 컴파일된 부트스트랩을 다운로드하고 프로젝트에 배치합니다. 예를 들어 다음과 같을 수 있습니다.

  앱/
      레이아웃/
      템플릿/
  공공의/
      CSS/
          bootstrap.min.css
      js/
          부트스트랩.min.js
      이미지/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

스타터 템플릿 활용

시작하려면 다음 기본 HTML을 복사하세요.

<html>
  <머리>
    <title> 부트스트랩 101 템플릿 </title>
    <!-- 부트스트랩 -->
    <link href = "public/css/bootstrap.min.css" rel = "스타일시트" >  
  </head>
  <본체>
    <h1> 안녕하세요, 여러분! </h1>
    <!-- 부트스트랩 -->
    <스크립트 src = "공개/js/bootstrap.min.js" ></script> 
  </바디>
</html>

사용자 정의 코드의 레이어

사용자 정의 CSS, JS 등에서 작업하여 별도의 CSS 및 JS 파일을 사용하여 Bootstrap을 고유하게 만드십시오.

<html>
  <머리>
    <title> 부트스트랩 101 템플릿 </title>
    <!-- 부트스트랩 -->
    <link href = "public/css/bootstrap.min.css" rel = "스타일시트" >  
    <!-- 프로젝트 -->
    <link href = "public/css/application.css" rel = "스타일시트" >  
  </head>
  <본체>
    <h1> 안녕하세요, 여러분! </h1>
    <!-- 부트스트랩 -->
    <스크립트 src = "공개/js/bootstrap.min.js" ></script> 
    <!-- 프로젝트 -->
    <스크립트 src = "공개/js/application.js" ></script> 
  </바디>
</html>

부트스트랩 확장

LESS로 구축