Webフロントエンド

開発者が犯す10の最も一般的なブートストラップの間違い

一目見ただけで、ブートストラップは非常に単純なようです。そして確かに、Bootstrapの使用を開始することは難しくありません。非常によく書かれていますブートストラップドキュメント多くのHTML、CSS、およびJavaScriptのコード例があります。重要な落とし穴のほとんどはそこで言及されていますが、それでもいくつかの間違いはかなり微妙であるか、あいまいな原因があります。 Bootstrapは非常にシンプルで使いやすいように見えるため、多くの開発者がフレームワークに突入しており、ミスが発生します。

ブートストラップの間違い

開発者がBootstrapを使い始めたときに、最も一般的なBootstrapの間違い、問題、誤解の10を見ていきます。

Scalaは何に適していますか

よくあるブートストラップの間違い＃1：フレームワークに関する基本的な誤解

についていくつかの基本的な誤解がありますブートストラップフレームワーク人々が持っている。これは、ブートストラップサイトで明確に宣伝されていないか、ドキュメントを読むのに十分な時間がないことが原因である可能性があります。事実、開発者がコーナーで間違ったことをしてしまい、フレームワークのせいにすることがあります。それでは、いくつかの基本的な事実を明確にしましょう。

ブートストラップは包括的ですが、巨大でも巨大でもありません。 Bootstrapには、多くの一般的なUIコンポーネントを含む基本的なHTMLおよびCSSデザインテンプレートがバンドルされています。これらには、タイポグラフィ、テーブル、フォーム、ボタン、グリフィコン、ドロップダウン、ボタンと入力グループ、ナビゲーション、ページ付け、ラベルとバッジ、アラート、プログレスバー、モーダル、タブ、アコーディオン、カルーセルなどが含まれます。それらのいくつかを選択して選択でき、デフォルトの構成で、複数のブラウザー、デバイス、および解像度を適切な形式で処理するUIをすばやく生成します。

Bootstrapはすべてを実行できるわけではありませんが、選択可能な一連の妥当なデフォルトを提供し、開発者がデザインについて心配するよりも開発作業に集中できるようにし、見栄えの良いWebサイトをすばやく立ち上げて実行できるようにします。ラピッドプロトタイピングが可能ですが、開発者を制限するものではありません。

誰でも自分のニーズに合うように調整できるほど十分に拡張可能です。当初、Bootstrapにはいくつかの制限があり、当時はデフォルトのスタイルを拡張するのが複雑でした。しかし、フレームワークが成熟するにつれて、拡張性も向上しました。

よくあるブートストラップの間違い＃2：ブートストラップを使用するためにCSSを知る必要はなく、デザイナーも必要ないと考える

Bootstrapを使用している場合、CSSを知る必要がないと考えている場合は、非常に間違っています。フロントエンド開発者は、CSSとHTML5を学ぶ必要があります。 Bootstrapは、開発者の肩から多くのトリッキーなCSSパーツ（ベンダー固有のプレフィックスなど）を削除し、基本的なデフォルトのスタイルを提供していますが、CSSを理解する必要があります。メディアクエリがどのように機能するかを知る必要はありませんが、レスポンシブデザインがどのように機能するかを理解する必要があります。ブートストラップはCSSを教えることを意図したものではありませんが、必要に応じて役立ちます。 LESSまたはSASSでソースコードを調べることは素晴らしい出発点です。

同様のトピックについては、デザイナーである必要はありません。また、Bootstrapを使用するデザイナーは必要ないと主張することもできます。ただし、可能であれば、設計者の助けを借りてください。 Bootstrapに対する一般的な不満は、すべてのBootstrapサイトが同じように見え、他のBootstrapサイトと同じように見えるWebサイトになってしまうことです。しかし、これは真実である必要はありません。 Web全体で何百万ものWebサイトがBootstrapで構築されています。さまざまなデザインを実現する方法の優れたショーケースは、ブートストラップエキスポ、Bootstrapで構築されたサイトを収集します。見て、インスピレーションを得て、独自のデザインバリエーションの構築を開始してください。

よくあるブートストラップの間違い＃3：ブートストラップCSSファイルの変更

わかりやすくシンプルにするには：ない bootstrap.cssを変更しますファイル。

bootstrap.cssに変更を加えた場合ファイル、物事は非常に速く複雑になります。 Bootstrapファイルをアップグレードする場合、デザイン全体が壊れます。独自のスタイルシートで、デフォルトのブートストラップの色、スタイル、余白、パディングなどすべてを上書きできます。 bootstrap.cssに触れる必要はありませんまったくスタイルシート。

LESSまたはSASSを知りませんか？問題ありません。独自のCSSファイルを作成して、元のファイルから必要なものを上書きできますbootstrap.cssスタイルシート。前の間違いで述べたように、CSSを知ることは必須です。新しいCSSセレクターを作成し、HTMLで使用します。ブートストラップスタイルの後にCSSクラスを宣言している限り、定義によってブートストラップのデフォルトが上書きされます。

それでももっと知りたい、もっと深く掘り下げたいですか？そうすることを強くお勧めします。 BootstrapLESSソースコードを使用します。静的CSSではなくLESSソースを使用すると、何が起こっているのか、どこで何が起こっているのかをよりよく理解できるようになります。

よくあるブートストラップの間違い＃4：ブートストラップが提供するすべてのものを使用する

前に述べたように、Bootstrapは包括的です。多くのUIコンポーネント、HTMLおよびCSSデザインテンプレート、JavaScriptプラグインを提供します。ただし、選択してください。 Bootstrapのすべての機能を使用する必要はありません。

これは特にプラグインに当てはまります。意味のあるプラグインのみを選択してください。見た目が良くてかっこいいので、すべてを使用するわけではありません。あなたのウェブサイトは簡単にやり過ぎになる可能性があります。 bootstrap.jsを含めないスタートを検討してくださいファイルを作成し、プレーンなHTMLとCSSだけを使用してサイトを作成します。次に、特定の役割に必要な場合にのみ、コンポーネントを1つずつ追加します。

ブートストラップモーダルは、必要最小限の機能を備えた柔軟なダイアログプロンプトを提供し、スマートなデフォルトが付属しています。モーダルは使いやすく、豊富なカスタマイズを提供しますが、一般的な誤用を避けるために留意する必要があることがいくつかあります。

ブートストラップは、重複するモーダルをサポートしていません。一度に表示できるモーダルは1つだけです。一度に複数のモーダルを表示することはできますが、これを適切に処理するにはカスタムコードを作成する必要があります。

モーダルコンテナまたはその親要素の位置が固定または相対である場合、モーダルは正しく表示されません。モーダルコンテナとその親要素に特別な配置が適用されていないことを常に確認してください。ベストプラクティスは、モーダルのHTMLを終了タグの直前に配置するか、開始タグの直後のドキュメントの最上位に配置することです。これは、モーダルの外観と機能に影響を与える他のコンポーネントを回避するための最良の方法です。

でモーダルを扱うときに開発者が知っておく必要があるいくつかの警告があります仮想キーボードを備えたモバイルデバイス。これは特に iOSデバイス、仮想キーボードがトリガーされたときに固定要素の位置を更新しないレンダリングバグが存在する場合。これはBootstrapによって処理されないため、問題のアプリケーションに最適な方法でコード内のこれらの状況を処理するのは開発者の責任です。

リフト対ユーバーの市場シェア

一般的なブートストラップの間違い＃6：ファイル入力ボタンコンポーネントの問題

Bootstrapには、ファイルアップロードボタン用に指定されたコンポーネントがありません。 HTMLとCSSのみを使用するシンプルでエレガントなソリューションは、次のサンプルコードで実現できます。

Browse

.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

同様の効果を得る方法の例はたくさんあります。このコード例はCoryLaViskaから借用したものであり、彼のサイトでより詳細な情報を読むことができます。この問題の説明。追加のJavaScriptコードを使用する、より多くの機能を備えた拡張例もあります。

最初にcまたはc ++

よくあるブートストラップの間違い＃7：JavaScriptを過度に複雑にし、「data-」属性を無視する

デザイナー、またはJavaScriptの初心者の開発者は、非常に簡単にWeb開発に飛び込み、HTML、CSS、およびBootstrapのみを使用してWebページを作成できます。コーディングがあまり得意でない場合は、JavaScriptを誤用したり、単純に複雑にしすぎたりするという罠に陥る可能性があります。すべてのBootstrapプラグインは純粋にマークアップAPIを介して使用できることを述べることが重要です。なし書く単線 JavaScriptの。これはBootstrapのファーストクラスAPIであり、プラグインを使用する際の最初の考慮事項です。

たとえば、data-toggle='modal'を設定するだけで、JavaScriptを記述せずにモーダルダイアログをアクティブ化できます。ボタンやアンカーなどのコントローラー要素で、data-を使用して追加のパラメーターを渡します。属性。以下のコードでは、IDが#myModalのHTMLコードをターゲットにしています。 data-backdropを使用して、ユーザーがモーダルの外側をクリックしてもモーダルが閉じないように指定しました。オプションで、data-keyboardでモーダルを閉じるエスケープキーイベントを無効にしましたオプション。オールインワンのHTML行のコード：

Launch my modal

よくあるブートストラップの間違い＃8：ブートストラップの開発を容易にするツールを無視する

間違いが起こり、すべての開発者が時折間違いを犯します。これは避けられないことですが、重要なのは間違いへの対処方法です。 Bootstrapチームは、課題追跡システムを見て、人々がより頻繁にいくつかの間違いをしていることに気づきました。そのため、彼らは開発プロセスを自動化しようとしました。結果は Bootlint 、Bootstrapプロジェクト用のHTMLリンティングツール。 Bootlintは、ブラウザー内またはNode.jsを介したコマンドラインから使用でき、BootstrappedWebページで一般的なBootstrapの使用ミスがないか自動的にチェックします。 BootlintをWeb開発ツールチェーンに追加すると、通常はプロジェクトの開発を遅らせる多くの一般的な間違いを排除できます。

Bootstrapプロジェクトに貢献したい場合は、チェックする価値がありますロールシャッハ。ロールシャッハは、ブートストラッププルリクエストの健全性チェッカーボットであり、新しいプルリクエストごとにいくつかのチェックを実行します。健全性チェックが失敗した場合、プルリクエストに誤りとその修正方法を説明する有益なコメントを残し、プルリクエストを閉じます。

よくあるブートストラップの間違い＃9：IE8とそれ以前のブラウザーの非互換性の問題

Bootstrapは、最新のデスクトップおよびモバイルブラウザで最高の状態で動作するように構築されています。古いブラウザでは、コンポーネントや要素のスタイルが異なる場合がありますが、すべてが完全に機能する必要があります。サポートにはInternetExplorer 8および9が含まれますが、一部のCSS3プロパティおよびHTML5要素はこれらのブラウザーでは完全にはサポートされていないことに注意してください。

Internet Explorer 8およびその他の古いブラウザーを完全にサポートするには、CSS3メディアクエリにポリフィルを使用する必要があります。 Respond.js 、 HTML5シムこれにより、HTML5要素とHTMLヘッド内の適切なIEtagを使用して、IEが互換モードで実行されていないことを確認できます。最終的にHTMLヘッドは次のようになります。

...

Respond.jsの場合、次の点に注意してください。警告開発環境と本番環境で。

よくあるブートストラップの間違い＃10：ベストプラクティスを無視する

Stack Overflowでよくある質問の1つは、ブートストラップメニューのドロップダウンをクリックではなくホバーで開く方法です。この質問の解決策は複雑ではなく、CSSのみを使用して実行できますが、お勧めしません。この機能は意図的にフレームワークから除外されており、これは開発チームによって行われた設計上の決定です。繰り返しになりますが、それは可能ですが、特にモバイルファーストフレームワークの場合、影響を理解し、ベストプラクティスが存在することを理解する必要があります。この特定の問題の背後にある理由は、ホバーで動作するようにすることは、タッチデバイスを持っているユーザーには役立たないということです。このようなデバイスでは、ホバーはなく、タッチイベントのみです。したがって、これはタッチ対応デバイスでは正しく機能しません。

ブートストラップの間違い結論

この短いブートストラップガイドが、よくある間違いのいくつかを回避し、通常の誤解を取り除き、フレームワークのほとんどを取得するのに役立つことを願っています。 Bootstrapはすべての人に適しているわけではなく、すべてのプロジェクトに適しているわけでもありません。フレームワークを選択するときは、ドキュメントを読むのに少し時間がかかる必要があります。また、フレームワークがどのように機能するかをよりよく理解するために、フレームワークをいじるのに時間をかける必要があります。これはBootstrapにも有効です。

読むドキュメンテーション、サンプルを試してみて、基本を正しく理解し、新しくて美しいデザインの作成を楽しんでください。