W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
在本教程中,我們將學(xué)習(xí)如何使用Twitter Bootstrap v3.0編譯版本創(chuàng)建一個基本的Bootstrap模板。
Bootstrap有兩個版本可供下載,編譯的Bootstrap和Bootstrap源文件。
編譯下載包含CSS和JavaScript文件的編譯和縮小版本以及字體格式的圖標(biāo),用于更快的Web開發(fā)
源版本包含所有CSS和JavaScript的原始源文件,以及文檔的本地副本。
我們將使用編譯的Bootstrap文件。 這里是下載鏈接。
http://getbootstrap.com/一旦下載編譯的Bootstrap,解壓縮壓縮文件夾。你將找到以下文件結(jié)構(gòu)和內(nèi)容。
bootstrap/ +-- css/ | +-- bootstrap.css | |-- bootstrap.min.css | |-- bootstrap-theme.css | |-- bootstrap-theme.min.css +-- js/ | |-- bootstrap.js | |-- bootstrap.min.js +-- fonts/ |-- glyphicons-halflings-regular.eot |-- glyphicons-halflings-regular.svg |-- glyphicons-halflings-regular.ttf |-- glyphicons-halflings-regular.woff
Bootstrap的編譯版本提供了編譯的CSS和JS文件(bootstrap.*),以及編譯和縮小CSS和JS(bootstrap.min.*)。
在fonts文件夾中有四個字體文件(glyphicons-halflings-regular.*)。這些字體文件包括Glyphicon Halflings集中的200個圖標(biāo)。
請注意,所有JavaScript插件都需要包含jQuery。
打開代碼編輯器并創(chuàng)建一個新的HTML文件,如下。
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world! W3Cschool !</h1>
</body>
</html>
要使此HTML文件成為Bootstrap模板,需包括相應(yīng)的Bootstrap CSS和JS文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world! W3Cschool !</h1>
<script src="http://code.jquery.com/jquery.min.js" rel="external nofollow" ></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
我們在頁面底部包含JavaScript文件 - 在關(guān)閉<body>標(biāo)簽(即</body>)之前,以提高網(wǎng)頁的性能。
國內(nèi)推薦使用 Staticfile CDN 上的庫:
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="external nofollow" target="_blank" rel="stylesheet">
<!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js" rel="external nofollow" ></script>
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: