Bootstrap筆記《一》

Bootstrap是twitter開源的一個集html、css、javascript的前端框架。

Sleek, intuitive, and powerful front-end framework for faster and easier web development.


時髦的，直觀的，強大的前端開發框架，使得web開發更快速，更容易。

By nerds, for nerds.

書呆子發明，給書呆子用。

Made for everyone.

不僅給桌面的瀏覽器用，而且可以給pad和手機客戶端用，只要開啟responsive css。

 

1. <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> 
2. <link href=“assets/css/bootstrap-responsive.css” rel=“stylesheet”> 

就是根據客戶端的不同，css做出自適應的變化，響應式css。

修改網格中列的寬度。

在需要的時候，將元素stack而不是float。由於移動裝置的螢幕相比桌面瀏覽器要小，所以需要調整元素的佈局。

重新調整字型的大小來適應移動裝置。

 

全域性字型14px，行高20px。

p標籤，段落下面的margin是一半的行高10px。

.lead類用來突出一個段落。

 

 

 

bootstrap為我們定製了常用html標籤的樣式，段落，按鈕，導航，表格，網格，輸入框等等。

還定義了一些常用的按鈕樣式，佈局樣式，網格樣式。

定製了排版，表格，表單，按鈕等等。

還定製了很多的component，下拉選單，按鈕組，tab，breadcrumbs導航，分頁，字型，進度條，警告資訊等等。

常用的javascript操作，需要注意的是需要JQuery，是基於jquery做的擴充套件。

 

一個有意思的功能是bootstrap支援自定義，根據需要定製，就是選擇你需要的功能，然後根據你的選擇生成最終的css，js。

可以選擇自己需要元件，需要的javascript外掛。

定製好之後，點選最下面的downlaod，這時候下載的檔案就是你定製之後的檔案。

 

你可以直接下載bootstrap提供的zip檔案中的css和js。如果對於預設的css不滿意，你還可以通過下載https://github.com/twitter/bootstrap的原始碼，然後修改less資料夾中的.less檔案，然後配合less.js使用，或者編譯修改的.less檔案，生成自己的css檔案。

本文轉自 virusswb 51CTO部落格，原文連結：http://blog.51cto.com/virusswb/1035793，如需轉載請自行聯絡原作者