當前位置:編程學習大全網 - 源碼下載 - bootstrap框架怎麽在html頁面加載使用

bootstrap框架怎麽在html頁面加載使用

bootstrap框架是目前流行的開源框架,如何使得框架能夠在頁面中正常加載並使用,下面的方法將詳細為大家講解壹下步驟。

到bootstrap官方網站下載,對於我們開發者來說,直接下載編譯和壓縮後的CSS、JavaScript文件,另外還包含字體文件,但是不包含文檔和源碼文件。打開解壓包之後可以發現包含三個文件夾 css、fonts、js。這是最基本的Bootstrap組織形式:未壓縮版的文件可以在任意web項目中直接使用。我們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS文件。字體圖標文件來自於Glyphicons

所有Bootstrap插件都依賴jQuery。而且在正式的項目當中我們推薦使用壓縮之後的版本,因為它的體積很小,到官網下載jQuery支持,如圖:

將下載後的就jQuery放到bootstrap中的js目錄下,如圖:

在bootstrap的根目錄下新建壹個demo.html文件,(註意,必須在根目錄下面新建,因為後面的步驟中要將bootstrap框架中的css和js文件鏈接到創建的demo中)

編輯demo.html文件,添加對bootstrap框架中css和js的引用,內容如下,圖片有註釋說明,這樣,我們就基本上建立了對bootstrap框架的基本使用架構

涉及到的源碼

<!doctype?html>

<html>

<head>

<meta?charset="utf-8">

<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">

<!--?viewport的<meta>標簽,這個標簽可以修改在大部分的移動設備上面的顯示,為了確保適當的繪制和觸屏縮放。-->

<title>無標題文檔</title>

<!--樣式文件引用-->

<link?href="css/bootstrap.min.css"?rel="stylesheet"?type="text/css">

<!--?HTML5?Shim?and?Respond.js?IE8?support?of?HTML5?elements?and?media?queries?-->

<!--?WARNING:?Respond.js?doesn't?work?if?you?view?the?page?via?file://?-->

<!--[if?lt?IE?9]>

<script?src="/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script?src="/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]

IE9以下的瀏覽器並不支持這些標簽,也不能為這些標簽進行添加樣式。那麽修復這個問題我們需要鏈接引用的文件

意思就是說如果用戶IE瀏覽器的版本小於IE9,那麽就會加載這兩個js文件庫,現在就可以使用這些新的標簽,並且可以在這些標簽上添加樣式了

-->

</head>

<body>

<!--JavaScript插件都是依賴與jQuery庫-->

<script?type="text/javascript"?src="js/jquery-2.1.3.min.js"></script>

<script?type="text/javascript"?src="js/bootstrap.min.js"></script>

</body>

</html><link?href="/bootstrap/3.0.3/css/bootstrap.min.css"?rel="stylesheet">

<script?src="/jquery/2.0.0/jquery.min.js"></script>

<script?src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>

另外,bootstrap官方提供了鏈接服務,永久免費,即使妳不下載bootstrap框架文件到 ? 本地,也可以直接在html中使用,要使用上面的代碼

  • 上一篇:3月4號DNF更新後無法登陸,求解決辦法
  • 下一篇:求詳細的MA和ASI計算方法
  • copyright 2024編程學習大全網