bootstrapとlessの間にはどのような関係があるのでしょうか?-ブートストラップのチュートリアル-php.cn

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

WBOY

リリース： 2022-03-09 17:22:00

オリジナル

3242 人が閲覧しました

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

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

このチュートリアルの動作環境: 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