なぜブートストラップを使わないのか

Jul 17, 2019 am 10:18 AM
bootstrap

Twitter Bootstrap には多くの欠点があります。これらの主要な問題を見てみましょう:

なぜブートストラップを使わないのか

ベスト プラクティスに従っていない (推奨学習: Bootstrap ビデオ チュートリアル)

Twitter Bootstrap を使用するときに遭遇する最大の問題の 1 つは、DOM 要素が多数のクラスで混雑することです。これは、優れた Web デザインの基本ルールの 1 つを破り、HTML にはセマンティクスがなくなり、コンテンツとプレゼンテーションが分離されなくなります。フロントエンドの純粋主義者はこれをかなり煩わしく感じ、スケーラビリティ、再利用性、メンテナンスがより困難になると主張するでしょう。プレゼンテーションとインタラクションはコンテンツから独立しなくなり、Twitter Bootstrap でさらに強化されました。

これは私の既存の設定と衝突します

あなたが大規模な中途半端なプロジェクトにエアドロップされ、Twitter Bootstrappy を使用してその内容をすべて楽しみたい場合メリット?

最悪の場合、多くの問題が発生し、HTML、CSS、JavaScript の生成で競合が発生することになります。さらにリソースもあり、プロジェクトの暗い部分を掘り下げて、どのスクリプトやスタイルを削除または置き換える必要があるかを判断する必要があります。 Twitter Bootstrap では余分な作業が発生する可能性があり、プロジェクトに深く入り込むと必然的に奇妙なバグを見つけて修正することになり、自分を正当化する理由によってそもそも Twitter Bootstrap を使用する目的が台無しになってしまいます。

Twitter Bootstrap は重すぎます

率直に言って、Twitter Bootstrap には 126kb の CSS と 29kb の JavaScript が含まれています。 Twitter Bootstap のすべての機能を使用したい場合は、リソースの読み込み時間を慎重に考慮する必要があります。もちろん、場所によってはこれが問題にならない場合もありますが、ニュージーランドではインターネットは太平洋を越える必要があり、データが到着するまでに時間がかかります。したがって、ターゲット市場を考慮してください。 Twitter Bootstrap は、魅力的で応答性の高い Web サイトを構築するのに役立ちますが、一部のモバイル ユーザーは、読み込み時間の遅さやバッテリーを大量に消費するスクリプトのせいで嫌になってしまうでしょう。

気絶した!私の新しいウェブサイトは他のウェブサイトと同じように見えます。 「

Twitter Bootstrap は非常に人気があるため、ほぼすべての開発者がこれを使用しています。アプリや Web サイトのデザインをカスタマイズするために後で使用できることは確かですが、時間の制約により、バニラのブートストラップ スタイルがたくさんあります。これにより、似たような汎用的で記憶に残るウェブサイトを誤って大量に作成してしまう可能性があります。Twitter ブートストラップをすぐに使用するのは非常に迅速かつ簡単であるため、時間的制約が厳しい場合、その結果、イノベーションが放棄されることがよくあります。 . 、Bootstrap の構造化された環境では、独特の革新的なデザインを実現するのは困難です。

Bootstrap に関連するその他の技術記事については、Bootstrap チュートリアル 列にアクセスして学習してください!

以上がなぜブートストラップを使わないのかの詳細内容です。詳細については、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プロパティを使用して、カスタムスタイルのスプリットラインを作成します。

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

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

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

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

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

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

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 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