實戰web前端之:Bootstrap框架windows下安裝與使用


Bootstrap是前端開發中比較受歡迎的框架,簡潔且靈活。它基於HTML、CSS和JavaScript,HTML定義頁面元素,CSS定義頁面布局,而JavaScript負責頁面元素的響應。Bootstrap將HTML、CSS和JavaScript封裝成一個個功能組件,用起來簡單,粗暴,是由美國麻省理工學院的Mark Otto和Jacob Thornton合作開發。由於筆者的室友在三天半之內就學完了html5+css3+javascript+bootstrap框架,這讓我感到壓力巨大。尤其是這幾天課程比較多,又不敢逃課,
 
學習真正的知識進度緩慢。所以筆者也開始進入了Bootstrap領域進行研究。
 

 

1.登錄Bootstrap官網

 

點擊Download.

2.下載Bootstrap

Download Bootstrap:下載預編譯和壓縮版Bootstrap(不含文檔和源碼)。

Download code:Bootstrap源碼,如官網介紹,需要編譯Less文件 和一些安裝。

剛接觸Bootstrap的話建議下載第一個,下載下來直接用。

使用Bootstrap進行前端開發
開發環境:WAMP(windows下的Apache + MySQL + PHP)

編輯器:DW

Step 1: 將下載下來的壓縮包解壓,將里面的css,和js文件夾放到你的工程目錄中(即您wamp下的網站根目錄了)。在工程根目錄中新建了一個”index.html”,用來測試Bootstrap。

Step 2: 編輯”index.html”,使用Bootstrap封裝的功能部件。

編寫代碼:

 

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8"> 

   <title>在線嘗試 Bootstrap 實例</title>

   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  

   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

 

      <h1>Hello, world!</h1>

 

</body>

</html>

Step 3: 在瀏覽器中打開我們編寫好的”index.html”查看。

如果發現有大寫的Hello,world!則說明您的Bootstrap安裝成功了!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM