ブートストラップ

ブートストラップの拡張

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 を再コンパイルする 必要があります。

コンパイル用ツール

コマンドライン

コマンド ライン経由でコンパイルするには、GitHubのプロジェクトの readme の指示に従います。

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>