ブートストラップアイコンが表示されない問題の解決方法-ブートストラップのチュートリアル-php.cn

ブートストラップアイコンが表示されない問題の解決方法

藏色散人

リリース： 2021-01-08 14:36:14

オリジナル

6033 人が閲覧しました

ブートストラップアイコンが表示されない問題の解決策: まず、インターネットからダウンロードしたブートストラップ全体を Eclipse に配置し、次に jQuery リファレンスをブートストラップリファレンスの前に配置します。

ブートストラップアイコンが表示されない問題の解決方法

このチュートリアルの動作環境: Windows 7 システム、ブートラップバージョン 3.3.7。この方法は、すべてのブランドのコンピューターに適しています。

推奨: 「bootstrap チュートリアル」「css ビデオチュートリアル」

Bootstrap フォントアイコンに問題が表示されない

問題:

ブートストラップでフォントアイコンを使用すると、ボックスのみが表示され、アイコンは表示されません。

問題分析:

その理由は、bootstrap.css ファイルがフォントファイル glyphicons-halflings-regulator.eot に正しく関連付けられていないためです。

bootstrap.css ソースコードを見ると、次のことがわかります:

`@font-face {
  font-family: &#39;Glyphicons Halflings&#39;;
  src: url(&#39;../fonts/glyphicons-halflings-regular.eot&#39;);
  src: url(&#39;../fonts/glyphicons-halflings-regular.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), url(&#39;../fonts/glyphicons-halflings-regular.woff2&#39;) format(&#39;woff2&#39;), url(&#39;../fonts/glyphicons-halflings-regular.woff&#39;) format(&#39;woff&#39;), url(&#39;../fonts/glyphicons-halflings-regular.ttf&#39;) format(&#39;truetype&#39;), url(&#39;../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular&#39;) format(&#39;svg&#39;);
}`

ログイン後にコピー

URL に注意してください

解決策:

ダウンロードしたブートストラップ全体をスローしますインターネットから Eclipse へ。図

ブートストラップアイコンが表示されない問題の解決方法

jsp ページの参照:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>bootStrap表单</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>

ログイン後にコピー

注: jQuery への参照はブートストラップ参照の前に配置する必要があります。そうしないと、キャッチされないエラーが発生します。 : ブートストラップは報告されます JavaScript には jQuery エラーが必要です

プログラミング関連の知識の詳細については、プログラミングチュートリアルをご覧ください。！

以上がブートストラップアイコンが表示されない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。