-1

custom.lessファイルを作成します。Bootstrapの使用を開始するには、どのファイルをインポート（@import）する必要がありますか？

BootstrapとLESSを使い始める方法は?? チュートリアルが見つかりません...

4

4 に答える 4

2

必要なものは次のとおりです。

  • Bootstrapの.cssおよび.jsファイル
  • less.jsファイル
  • jquery.js

それらをあなたのサイトにリンクする：

Webサイトを最適化するために、すでに存在するいくつかのコンテンツ配信ネットワーク（CDN）を利用してください。次の行は、ブートストラップとjqueryを取得します。

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>

Less CDNがないため、ここでless.jsファイルをダウンロードしてから、カスタム.lessファイルと一緒に静的メディアを介して提供する必要があります。

<script type="text/javascript" src="{{ STATIC_URL }}js/less-1.3.0.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}css/custom.less">
于 2012-10-11T19:14:58.530 に答える
1

BootstrapLESSファイルはGitHubからダウンロードできます。

多くの場合、各ファイルは対応するコンポーネントと同じように名前が付けられています。Bootstrapコンポーネントのリストを確認してください。

したがって、必要に応じて必要なファイルをインポートできます。

お役に立てば幸い

于 2012-10-11T16:20:26.177 に答える
1

Twitter Bootstrapリポジトリのコンテンツを複製またはダウンロードします：https ：//github.com/twitter/bootstrap/

less/bootstrap.less次に、、およびオプションでをインポートしますless/responsive.less。これにより、TwitterBootstrapによって定義されたすべてのミックスインと変数を独自のLESSファイルで利用できるようになります。

于 2012-10-11T16:39:16.000 に答える
1

これが私の提案です。BootstrapでLESSをコンパイルしようとする前に、そのフォルダーを少し取っておき、LESSを機能させるためのテストプロジェクトを作成してください。このように開始します：

  1. ノードをダウンロードしてインストールします
  2. これを機能させるためだけに、「less-build」のようなフォルダを作成します
  3. Windowsで、Shiftキーを押しながら右クリックして（Macが何であるかわからない）、[ここでコマンドウィンドウを開く]を選択します。入力してEnterキーを押すと、コンピュータにLESSnpm install less -gが「グローバルに」インストールされます
  4. ここで、「npm install less」と入力して、LESSを「ローカル」にインストールします。すべてが順調であれば、less-buildフォルダー内に「node_modules」というフォルダーが表示されます。node_modulesをクリックすると、より少ないフォルダが表示されます。
  5. 次に、less-buildフォルダーにstyles.lessというファイルを作成します。そのファイル内に次のコードを追加します。

@backgroundColor: #900;

.block {
  background: @backgroundColor;
}
  1. ファイルを保存して閉じます。
  2. ここで、もう一度コマンドプロンプトに次のように入力します。

lessc --compile styles.less > styles.css

  1. すべてが順調であれば、ファイルstyles.cssが表示されます。それを開き、ファイルに有効なcssがあることを確認します。

それが機能する場合は、Bootstrapフォルダーを開き、lessフォルダーを見つけると、bootstrap.lessというファイルが見つかります。bootstrap.lessで説明したプロセスを使用します。これはあなたに有利なスタートを与えるはずです。

于 2012-10-12T04:59:11.927 に答える