ユーザ用ツール

サイト用ツール

Writing /var/www/vhosts/w629.ws.domainking.cloud/enjoy-lei.com/lei_wiki/data/cache/7/7dfeabec4252ab3b3b9c1ebcaa20d097.i failed
Unable to save cache file. Hint: disk full; file permissions; safe_mode setting.
Writing /var/www/vhosts/w629.ws.domainking.cloud/enjoy-lei.com/lei_wiki/data/cache/7/7dfeabec4252ab3b3b9c1ebcaa20d097.metadata failed

webデザイン
Writing /var/www/vhosts/w629.ws.domainking.cloud/enjoy-lei.com/lei_wiki/data/cache/7/7dfeabec4252ab3b3b9c1ebcaa20d097.i failed
Unable to save cache file. Hint: disk full; file permissions; safe_mode setting.
Writing /var/www/vhosts/w629.ws.domainking.cloud/enjoy-lei.com/lei_wiki/data/cache/7/7dfeabec4252ab3b3b9c1ebcaa20d097.xhtml failed

WEBデザイン「Twitter Bootstrap」

LINUX コマンド雑集

Twitter BootstrapのCSSフレームワーク

http://twitter.github.io/bootstrap/index.html

1. 準備

Bootstrapの準備 http://twitter.github.com/bootstrap/getting-started.html

上記のページのDownload Bootstrap sourceからzipをダウンロード、展開しておきます。

SimpLESS(LESSコンパイラ)の準備 http://wearekiss.com/simpless 上記のページのDownload SimpLESS now!からzipをダウンロード、展開します。~ SimpLESS.exeを実行し、モジュールインストール行われた後、使用可能になります。~ 2回目以降の起動もSimpLESS.exeから実行します。

less.jsのバージョンアップ SimpLESSはそのままだとBootstrapをコンパイルできないので、コンパイラ本体を更新します。 https://gist.github.com/hlop/4951717/raw/12c67af95fd123dc0a46943a061f3dc91dd6b720/less.js 上記URLからless.jsをダウンロードし、以下のファイルに上書きコピーしてください。 <SimpLESS展開フォルダ>\Resources\app\3p\less.js

LESSの編集

BootstrapのLESS構造 BootstrapのLESSファイルは、以下のパスに全て展開されています。~ <Bootstrapソース展開フォルダ>\less\

コンパイル対象 【詳しくは後述】SimpLESSに読み込ませるファイルは bootstrap.less のみでOKです。~ ※ bootstrap.less は他のcssを全て読み込む起点ファイルです。

デザイン変更 デザインに関する設定は、全LESSファイルで一貫して変数等で定義されています。 主に色や書体、サイズの調整を行う際は、variables.less 内の変数を編集して下さい。

LESSのコンパイル LESSファイルのコンパイルにはSimpLESSを用います。

SimpLESSの起動と設定 SimpLESSは起動すると画面が表示されます。~ D&DでLESSファイルを登録するとSimpLESSは更新の監視を開始し、ファイルに何らかの変更があれば自動的にコンパイルされます。~ ここには bootstrap.less を登録してください。importされる全てlessファイルも同時に監視されます。 ※ importされるファイル数は、ファイル名の横の(+34)の数字で確認できます。 ※ 更新マークをクリックすると、任意でコンパイルを実行できます。

コンパイルエラーについて LESSLESSファイルの記述にエラーがあれば、SimpLESSはポップアップで知らせます。 エラーがあったファイル名と行番号が表示されます。

コンパイル後の作業 コンパイルに成功すると、bootstrap.cssがbootstrap.lessと同じフォルダに作成されます。~ このCSSファイルをメインプロジェクト内のBootstrapのCSSに置き換えればOKです。

参考URL

Bootstrap - http://twitter.github.com/bootstrap/

SimpLESS - Your LESS CSS Compiler - http://wearekiss.com/simpless

twitter bootstrap メイリオで文字を見やすく - http://www.matomater.com/560/

Getting compile error in mixins.less (line 578) with Bootstrap 2.3.0 - https://github.com/Paratron/SimpLESS/issues/97

webデザイン.txt · 最終更新: 2013/12/02 11:00 by luis_lee