1. 程式人生 > >【BootStrap】Bootstrap簡介、環境安裝與基本模板

【BootStrap】Bootstrap簡介、環境安裝與基本模板

BootStrap簡介

什麼是BootStrap

它由Twitter的設計師Mark Otto和Jacob Thornton合作開發。
基於 HTML、CSS、JAVASCRIPT。
主要是前端的框架(HTML、CSS、JS)。
(使用BootStrap前需要先匯入JQurey)

Bootstrap有什麼樣的特點?

學習比較簡單,只要有了一定的HTML、CSS、JS基礎,就可以學習。
響應式佈局。
移動裝置優先。

Bootstrap環境安裝

下載網址:

下載完後解壓:

我們一般需要的就是:
CSS

JS

要想使用Bootstrap必須要先載入jquery。

Bootstrap基本模板

HTML5文件型別定義

Boostrap的文件是基於HTML5的。因此,要使用HTML5的文件型別定義(DTD)。

<!DOCTYPE html>

字符集設定

<meta charset="utf-8">

設定移動裝置優先

<meta name="viewport" content="window=device-width,initial-scale=1">

引入CSS和JS檔案

<!DOCTYPE html>
<html>
<head>
    <title
>
BootStrap基礎入門</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery.slim.min.js" ></script> <script
type="text/javascript" src="bootstrap3/js/bootstrap.min.js" >
</script> </head> <body></body> </html>

好了,上面那個就是一個最簡單的模板了,然後你可以直接使用bootstrap的樣式了哦。


本文章由[諳憶]編寫, 所有權利保留。
歡迎轉載,分享是進步的源泉。