Bootstrap筆記《一》

像教授發表於2017-11-26
boot筆記

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. 

  2. <link href=“assets/css/bootstrap-responsive.css” rel=“stylesheet”> 
    3. 



就是根據客戶端的不同，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，如需轉載請自行聯絡原作者










相關文章