如何解決bootstrap 圖示不顯示的問題-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

如何解決bootstrap 圖示不顯示的問題

藏色散人

Dec 17, 2020 am 09:13 AM

bootstrap

bootstrap圖示不顯示的解決方法：先把從網路上下載的整個bootstrap放到eclipse中；然後把jQuery的引用放在bootstrap引用前即可。

如何解決bootstrap 圖示不顯示的問題

本教學操作環境：Windows7系統、bootsrap3.3.7版，此方法適用於所有品牌電腦。

推薦：《bootstrap教學》《css影片教學》

Bootstrap字體圖示不顯示問題

#問題:

bootstrap使用字體圖示時只顯示一個框，不顯示圖示。

問題分析：

出現的原因是：bootstrap.css檔案沒有正確關聯上字體檔案glyphicons-halflings-regular.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

解決方法：

把從網路下載的整個bootstrap丟到eclipse中。如圖

如何解決bootstrap 圖示不顯示的問題

在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的引用要放在bootstrap引用前，否則會報Uncaught Error: Bootstrap's JavaScript requires jQuery的錯誤

更多程式相關知識，請造訪：程式設計教學！！

以上是如何解決bootstrap 圖示不顯示的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7446

CakePHP 教程

1374

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 實現垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 類，將元素置於 flexbox 容器內。 align-items-center 類法：對於不支持 flexbox 的瀏覽器，使用 align-items-center 類，前提是父元素具有已定義的高度。

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。