bootstrapとlessの間にはどのような関係があるのでしょうか?

ブートストラップでは、多くのスレッド化されたスタイル コンポーネントが提供されます。これらのスタイルは、less によって作成されます。ブートストラップを使用するために、less を知る必要はありません。Less には、対応する CSS ファイルを生成するためのカスタム構文とパーサーのセットが含まれています。 。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップ間の関係は何ですか? andless

ブートストラップでは、多くのスレッド化されたスタイル コンポーネントが提供されます。これらのスタイルは、less によって作成されます。ブートストラップを使用するために、less のことを知る必要はありません。

ブートストラップ プロジェクト アーキテクチャ

レイアウト システムとコンテンツの実装

1) グリッド システムの設計補足コンテンツ: 列ソートcol-md-push- 4

2) セルのコンテンツを完成させます

スタイルのカスタマイズ

• less

• ブートストラップ ソースを変更しますCode

#less

#css は構文が単純で学習難易度が低いマークアップ言語ですが、CSS は一見非論理的に見えるコードを大量に記述する必要があり、不便です。これらの困難の大きな理由は、CSS が非手続き型言語であり、変数、関数、SCOPE (スコープ) などの概念がないことです。

LESS には、一連のカスタム文法とパーサーが含まれています。ユーザーはこれらの文法に基づいて独自のスタイル ルールを定義します。これらのルールは最終的にパーサーによってコンパイルされ、対応する CSS ファイルが生成されます。

LESS は、CSS の本来の機能を切り取ったり、CSS を置き換えたりするのではなく、既存の CSS 構文に基づいて手続き型言語機能を CSS に追加します。 Less は CSS の構文に基づいており、変数、Mixin (混合)、演算、関数などの機能を導入しているため、CSS の記述が大幅に簡素化され、CSS の保守コストが削減されます。またはブラウザ側。

方法1 - クライアント上でless変換プログラムを実行する

xx.lessをhtmlに導入し、クライアントのブラウザで実行できるless.jsを導入する コンパイラプログラム-- 効率が低いため、推奨されません。方法 2 - サーバー側での変換プログラムの実行を減らす - 推奨

1) サーバー側の JS インタープリター -nodejs をダウンロードしてインストールします。

2) lessc ファイル変換プログラムlessc --js script

3) サーバー側の JS インタープリターでlessc コンバーターを実行して、作成した .less ファイルを CSS ファイルに変換します

a) 次のことができます。コマンドラインで変換プログラムを使用します

    node.exe lessc my.less my.css

b) hbuilderで変換プログラムを使用します

4) htmlファイルで、コンパイルされたcssファイルを参照します

2. Less構文の学習

less は CSS 構文を完全にサポートします

lss は単一行のコメントと複数行のコメントをサポートしますが、複数行のコメントのみが CSS ファイルに変換されます

less変数をサポートします (変数)

^ @変数名: 値

^ 使用: selector {スタイル: @変数名}

less はスタイルの混合をサポートします 別のスタイルはスタイルで参照

 .class1(){...}
 .class2{
     ...
     .class1
     ...
 }

パラメータと混合

 .class()(@参数1，@参数2，。。。){....}
 .class2 {
     ...
     .class(参数1，参数2);
     ...
 }

ネストされたルール

 .class1{
    ...
   .class2 {}
 }

変換の結果

 .class1{  }
 .class1 .class2{ }

lessは変数と定数に対して実行可能 算術演算操作

less は、スタイル用の多数のアプリケーション関数を提供します

lighten(color, Brightness value): 指定した色を指定したパーセンテージだけ明るくします

darken(color , Brightness value) : 指定した色を指定したパーセンテージだけ暗くします

floor(number) ログ値切り捨て

ceil(number) ログ値切り上げ

Page import

CSS ファイルで @import ディレクティブを使用しないようにしてください。HTTP リクエストの数が増加します。

スタイル ファイルを複数の小さなスタイル ファイルに分割するため、複数の人が同時にそれを使用できます。書き込み時に、less で @import-less を使用して、他のless ファイルをインポートできます。変換中に、大きくて完全な CSS スタイル ファイルが結合されるため、他のless ファイルをless

<code> @import "xx.less"</code>

でインポートすることをお勧めします。 **大規模プロジェクト 中程度のファイル構造 **

variable.less - すべての変数を配置します

mixin.less - すべての mixin を配置します

replace.less - HTML 要素を配置します リセットstyle

navbar.less - ナビゲーション バー関連

footer.less - フッター関連 style

js.less - かなり少ないファイル

3. bootstrap のless ソース ファイルを変更してスタイルのカスタマイズを実現します。

カルーセル広告/モーダル ボックスなどの不要なスタイルを削除します。

bootstrap.less ファイルで、コメントを追加します。不要な @import## を削除するだけです。

#ナビゲーション バーのデフォルトの背景色の変更など、必要なコンポーネントのデフォルト スタイルをカスタマイズします。

variables.less ファイル内の変数を変更するだけです

新規作成ブートストラップによって提供されるデフォルトのスタイルに基づくスタイル（ドロップダウンのディバイダーのスタイルのカスタマイズなど） - コンポーネントの詳細なカスタマイズ

コンポーネントに対応するlessファイルを変更します

関連する推奨事項: ブートストラップ チュートリアル

以上がbootstrapとlessの間にはどのような関係があるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。