使用Bootstrap如何構建Web Page

小編給大家分享一下使用Bootstrap如何構建Web Page，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Bootstrap是著名的社交網站、微博的先驅Twitter在2011年8月推出的開源WEB前端框架，集合CSS和HTML，使用了最新的瀏覽器技術，為快速WEB開發提供了一套前端工具包，包括布局、網格、表格、按鈕、表單、導航、提示等等。使用Bootstrap可以構建出非常優雅的前端界面，而且占用資源非常小。

Bootstrap是由Twitter的Mark Otto和Jacob Thornton開發的。

Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。

Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

早期Twitter的前端工程師幾乎采用了任何自己熟悉的庫來應對前端的開發需求，這樣的造成的問題就是維護和擴展非常困難。最終Bootstrap成為應對這些挑戰的解決方案，并開始在Twitter內部迅速成長，被twitter.com廣泛采用，形成了穩定版本。隨著工程師對其不斷的開發和完善，Bootstrap進步顯著，不僅包括基本樣式，而且有了更為優雅和持久的前端設計模式。

使用Bootstrap構建優雅的Web Page

Bootstrap的核心就是基于Less框架構建的CSS。所以談到Bootstrap，就必須得說說Less。

關于Less

Less是一個動態CSS語言框架，Less擴展了CSS的動態特性，相對于傳統的CSS，Less提供了更為強大的功能和靈活性。基于Less，我們可以在編寫CSS時使用嵌入式申明、變量、混合模式、運算和顏色編輯功能函數等。簡單來說就是Less可以讓你像編程一樣編寫CSS，把程序存儲在后綴為less的文件中，Less提供了框架將其編譯為標準的css文件。

舉個簡單的例子，如果你想為多個樣式設置同一個顏色，可以這樣寫：

@color: #FFFFFF;
h2 {
color: @color;
} 
#sub{
color: @color;
}    
#編譯后
h2 {
  color: #ffffff;
}
#sub {
  color: #ffffff;
}

以上代碼只是Less的最簡應用。除了變量，還可以在CSS進行數學運算、傳參、文件相互引用、規則嵌套等等。可以想象，這種編寫CSS的方式會為前端開發帶來多大的改變。無論是從靈活性、擴展性和可維護性上，Less都讓CSS開發有了大幅提升，動態性增強了。

以上是使用Bootstrap如何構建Web Page的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！