ブートストラップ

ブートストラップの拡張

Bootstrap を拡張して、含まれているスタイルとコンポーネント、および LESS 変数と mixin を利用します。

LESSで構築

少ないCSS

Bootstrap は、私たちの良き友人であるAlexis Sellierによって作成されたダイナミック スタイルシート言語である LESS をコアに使用して作成されています。これにより、システムベースの CSS の開発がより速く、より簡単に、より楽しくなります。

なぜ少ないのですか？

Bootstrap の作成者の 1 人が、これについて簡単なブログ投稿を書きました。概要は次のとおりです。

  • Bootstrap のコンパイルは、Sass と比較して Less の方が約 6 倍高速です
  • Less は JavaScript で記述されているため、Sass を使用する Ruby と比較して、簡単に使用してパッチを適用できます。
  • 少ないほうがいいですね; CSS を書いて、Bootstrap を誰にとっても親しみやすいものにしているように感じたいのです。

何が含まれていますか？

CSS の拡張として、LESS には、変数、再利用可能なコード スニペット用の mixin、単純な数学、ネスト、さらにはカラー関数の演算が含まれています。

もっと詳しく知る

詳細については、 http://lesscss.org/の公式 Web サイトにアクセスしてください。

Less で Bootstrap をコンパイルする

私たちの CSS は Less で書かれており、変数と mixin を使用しているため、最終的な製品実装のためにコンパイルする必要があります。方法は次のとおりです。

注: CSS を変更して GitHub にプル リクエストを送信する場合は 、これらのいずれかの方法で CSS を再コンパイルする 必要があります。

コンパイル用ツール

メイクファイルを含むノード

次のコマンドを実行して、npm を使用して LESS コマンド ライン コンパイラ、JSHint、Recess、および uglify-js をグローバルにインストールします。

$ npm install -g less jshint 凹部 uglify-js

インストールしたらmake、bootstrap ディレクトリのルートから実行するだけで準備完了です。

さらに、watchrがインストールされmake watchている場合、bootstrap lib 内のファイルを編集するたびに、bootstrap を自動的に再構築するように実行できます (これは必須ではなく、便利な方法です)。

コマンドライン

Node 経由で LESS コマンド ライン ツールをインストールし、次のコマンドを実行します。

$ lessc ./less/bootstrap.less > bootstrap.css

--compressバイトを節約しようとしている場合は、そのコマンドに必ず含めてください!

JavaScript

最新の Less.jsをダウンロードし、そのパス (および Bootstrap) を に含めます<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 をドロップすることで、Web プロジェクトをすばやく開始できます。簡単なアップグレードと今後のメンテナンスのために、カスタム スタイルを個別に重ねます。

セットアップファイル構造

最新のコンパイル済み Bootstrap をダウンロードして、プロジェクトに配置します。たとえば、次のようなものがあります。

  アプリ/
      レイアウト/
      テンプレート/
  公衆/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      画像/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

スターター テンプレートを利用する

開始するには、次のベース HTML をコピーします。

  1. <html>
  2.   <頭>
  3.     <title> Bootstrap 101 テンプレート</title>
  4.     <!-- ブートストラップ -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "スタイルシート" >  
  6.   </head>
  7.   <本体>
  8.     <h1>ハロー、ワールド！</h1>
  9.     <!-- ブートストラップ -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

カスタムコードのレイヤー

カスタム CSS や JS などを必要に応じて操作して、独自の個別の CSS および JS ファイルを使用して独自の Bootstrap を作成します。

  1. <html>
  2.   <頭>
  3.     <title> Bootstrap 101 テンプレート</title>
  4.     <!-- ブートストラップ -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "スタイルシート" >  
  6.     <!-- プロジェクト -->
  7.     <link href = "public/css/application.css" rel = "スタイルシート" >  
  8.   </head>
  9.   <本体>
  10.     <h1>ハロー、ワールド！</h1>
  11.     <!-- ブートストラップ -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- プロジェクト -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>