ブートストラップレスとは何ですか

Nov 09, 2020 am 09:28 AM
bootstrap

bootstrapless は、CSS を動的にする CSS プリプロセッサです。他のいくつかのless ファイルが bootstrap.less ファイルにインポートされます。このファイルにはコードはなく、forms.less ファイルにはフォームが含まれています。レイアウト、入力ボックスの種類のスタイルなど。

ブートストラップレスとは何ですか

このチュートリアルの動作環境: Windows10 システム、bootstrap3.0 この記事は、すべてのブランドのコンピューターに適用されます。

推奨: "bootstrap チュートリアル "

Bootstrap LESS

Less は、CSS を動的にセックスする CSS プリプロセッサです。

一方、Bootstrap は、Web アプリやサイトを迅速に開発するためのツールキットです。

このチュートリアルでは、CSS を減らしてブートストラップを使用する方法について説明します。このようにして、Bootstrap の Less 変数、ミックスイン、CSS のネストを使用できます。

Bootstrap と Less CSS を入手

Bootstrap 公式 Web サイト: http://getbootstrap.com/

Less 公式 Web サイト: http://lesscss .org /

含まれるもの

Bootstrap をダウンロードし、ファイルを解凍します。 Bootstrap の Less コンポーネントは「lib」ディレクトリにあります。 Bootstrap v1.4.0 以降、ファイルが 9 つ減りました。これら 9 つのファイルのそれぞれに何が含まれているかを見てみましょう。

bootstrap.less

これはメインの Less ファイルです。このファイルは、他のいくつかのファイルをインポートします。このファイルにはコードがありません。

forms.less

この Less ファイルには、フォーム レイアウトと入力ボックスの種類のスタイルが含まれています。

mixins.less

この Less ファイルにより、CSS コードが再利用可能になります。

patterns.less

この Less ファイルには、スキャフォールディング Less ファイルにある基本スタイルによってオーバーライドされない、繰り返しのユーザー インターフェイス要素の CSS コードが含まれています。

reset.less

この Less ファイルには CSS リセットが含まれています。これは Eric Meyer の CSS Reset のアップデートです。 dfn、samp などの一部の HTML 要素のリセットは免除されます。

scaffolding.less

この Less ファイルには、グリッド システム、構造化レイアウト、ページ テンプレートの作成に必要な基本スタイルが保存されます。

tables.less

この Less ファイルには、テーブルを作成するためのスタイルが含まれています。

type.less

植字関連のスタイルは、この Less ファイルの下にあります。タイトル、段落、リスト、コードなどのスタイルはこのファイルにあります。

variables.less

この Less ファイルには、Bootstrap の外観と操作性をカスタマイズするための変数が含まれています。

使用方法

使用したい場合は、HTML ページに次のコードを含めてください:

<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />
<script src="js/less-1.1.5.min.js"></script>
ログイン後にコピー

less-1.1.5.min であることに注意してください。 js は js フォルダーにありません。ダウンロードして指定されたフォルダーに配置する必要があります。

以上がブートストラップレスとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ブートストラップ検索バーを取得する方法 ブートストラップ検索バーを取得する方法 Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法:検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ブートストラップの垂直センタリングを行う方法 ブートストラップの垂直センタリングを行う方法 Apr 07, 2025 pm 03:21 PM

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド:D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法:FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

See all articles