詳解Bootstrap實現基本佈局的方法

時間 2019-11-18

標籤詳解 bootstrap 實現基本佈局方法欄目 Bootstarp 简体版

原文原文鏈接

看到了一篇 20 分鐘打造 Bootstrap 站點的文章，內容有點老，從新使用bootstrap教程實現一下，將涉及的內容也儘量詳細說明。javascript

1. 建立基本的頁面
咱們先建立一個基本的 HTML 模板頁面，使用 sublime + emmet 能夠直接建立這個頁面。php

1.1 新建一個文件， Ctrl + Ncss

1.2 保存到頁面文件中，Ctrl + S，命名爲 index.htmlhtml

1.3 在這個空白頁面中，輸入 html:5，而後直接按製表鍵 Tab，就應該能夠看到一個基本的 HTML5 模板頁面了。java

1.4 再次保存，按 Ctrl + S.jquery

頁面內容應該以下：bootstrap

1ui

2spa

3code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
   
</body>
</html>

2. 添加 Bootstrap 文件引用

在 index.html 文件所在的文件夾中，建立 css 文件夾，用來保存全部的樣式文件，在 css 子文件夾中建立一個名爲 bootstrap 的文件夾，用來保存咱們的 bootstrap 文件。

從 bootstrap 官網能夠下載到 bootstrap 的包，其中有一個 dist 的文件夾，這個文件夾中包含了三個子文件夾：css, font 和 js。將這三個子文件夾複製到你的 css/bootstrap 文件夾中。

在頁面中會涉及兩部份內容，樣式和腳本。

2.1 添加樣式引用
在 header 中添加 bootstrap 的樣式引用。注意路徑。

1 2	`<link href="css/bootstrap/css/bootstrap.min.css"` `rel="stylesheet"/>` `<link href="css/bootstrap/css/bootstrap-theme.min.css"` `rel="stylesheet"/>`

bootstrap.min.css 是 bootstrap 的樣式文件，包含了全部的 bootstrap 樣式定義，bootstrap-theme.min.css 則是主題定義。

2.2 添加腳本引用
因爲 bootstrap 使用了 jQuery 的腳本，因此，你還須要下載 jquery 腳本庫。

在你的 index.html 文件所在目錄中，建立一個名爲 lib 的子目錄，用來保存之後使用的腳本庫，將下載獲得的 jquery.min.js 複製到這個目錄中。

在緊鄰你的 </body> 之間添加 jquery 和 bootstrap 腳本庫引用。

<script type="text/javascript" src="lib/jquery.min.js"></script>
 <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
</body>

3. 添加 bootstrap 容器

bootstrap的 .container 類是很是有用的，它能在頁面中建立一個居中的區域，而後咱們可以把其餘位置的內容放到裏面。container類等價於建立了一個具備靜態寬度而且magin值爲auto的一個居中的p框。twitter bootstrap的 container類的優勢在於它是響應式的，它會以當前屏幕的寬度爲基礎計算出最佳的寬度予以使用。

.container-fluid 則是一個全寬的容器，使用整個寬度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。