bootstrap less是一個CSS預處理器,讓CSS具有動態性;其中bootstrap.less檔案中導入了一些其他的less文件,該文件中沒有任何程式碼,而forms.less檔包含了表單佈局、輸入框類型的樣式等等。
本教學操作環境:windows10系統、bootstrap3.0,本文適用於所有品牌的電腦。
推薦:《bootstrap教程》
Bootstrap LESS
Less 是CSS 預處理器,讓CSS 具有動態性。
另一方面,Bootstrap 是一個快速開發 Web App 和網站的工具包。
在本教程中,我們將討論了有關使用帶有 Less CSS 的 Bootstrap 知識。這樣,您可以在 CSS 中使用 Bootstrap 的 Less 變數、混合(mixins)和巢狀( nesting)。
取得Bootstrap 與Less CSS
Bootstrap 官網:http://getbootstrap.com/
Less 官網:http://lesscss.org /
包含哪些內容
下載Bootstrap,解壓縮檔案。 Bootstrap 的 Less 元件位於 'lib' 目錄下。自 Bootstrap v1.4.0 版本起,就包含九個 less 檔案。下面我們一起來看看這九個文件分別包含什麼。
bootstrap.less
這是主要的 Less 檔案。該文件中導入了一些其他的 less 檔案。該文件中沒有任何程式碼。
forms.less
這個 Less 檔案包含了表單佈局、輸入框類型的樣式。
mixins.less
這個 Less 檔案讓 CSS 程式碼可重複使用。
patterns.less
這個 Less 檔案包含了重複的使用者介面元素的 CSS 程式碼,不會被位於 scaffolding Less 檔案中的基本樣式覆蓋。
reset.less
這個 Less 檔案包含了 CSS 重置。這是 Eric Meyer 的 CSS 重置的一個更新。一些 HTML 元素例如 dfn、samp 等的重置被免除。
scaffolding.less
這個 Less 檔案保存了建立網格系統、結構化佈局、頁面範本所需的基本樣式。
tables.less
這個 Less 檔案包含了建立表格的樣式。
type.less
這個 Less 檔案下可找到排版相關的樣式。標題、段落、清單、程式碼等的樣式位於這個文件裡邊。
variables.less
這個 Less 檔案包含了要自訂 Bootstrap 外觀和感觀的變數。
如何使用
如果要使用它,請在您的HTML 頁麵包含下面程式碼:
<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" /> <script src="js/less-1.1.5.min.js"></script>
請注意,less-1.1.5.min.js 不在js資料夾內,您需要下載並將它放置在指定的資料夾下。
以上是bootstrap less是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!