Bootstrap 安裝

2020-07-15 09:57 更新

在本教程中,我們將學(xué)習(xí)如何使用Twitter Bootstrap v3.0編譯版本創(chuàng)建一個基本的Bootstrap模板。

下載引導(dǎo)程序文件

Bootstrap有兩個版本可供下載,編譯的Bootstrap和Bootstrap源文件。

編譯下載包含CSS和JavaScript文件的編譯和縮小版本以及字體格式的圖標(biāo),用于更快的Web開發(fā)

源版本包含所有CSS和JavaScript的原始源文件,以及文檔的本地副本。

我們將使用編譯的Bootstrap文件。 這里是下載鏈接。

http://getbootstrap.com/

文件結(jié)構(gòu)

一旦下載編譯的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。

使用Bootstrap創(chuàng)建Web頁面

打開代碼編輯器并創(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)頁的性能。
注意css和Javascript的相對路徑。

Staticfile CDN 推薦

國內(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>


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號