bootstrap學習之路2

時間 2019-12-11

原文原文鏈接

上一次簡單介紹了一下bootstrap這個開源框架，此次繼續bootstrap深刻之路，從Less提及。。。。javascript

關於less

less是一門預處理語言，是對css的擴展，它使得css語言了動態語言的一些特性，如變量，繼承，運算，函數等，使得css更加靈活強大，less的語言很簡單，學習了css的朋友對於less的語法，上手基本沒有難度。如今來看看less的如下特性：css

　　less中這樣定義變量：@fontsize：14px；使用變量，h3{font-size:@fontsize}，編譯後的css就是h3{font-size：14px;}java

　　利用less能夠將一個定義好的類A引入類B中，從而實現類B對類A的繼承git

　　.A{font-size=15px;border:1px 0px;padding:15px;10px;}github

　　#header{ color：red;.A;}bootstrap

　　less能夠建立一個函數，從而實現css更大的靈活性框架

　　.A(@color:#fffff){font-size=15px;border:1px 0px;padding:15px;10px;color：@color}less

　　#header{.A(#ccccc)}編輯器

　　編譯後#header{font-size=15px;border:1px 0px;padding:15px;10px;color：#cccccc}函數

　　在less中能夠對屬性進行四則運算

　　@my-border:1px;

　　@my-color:#cccccc；

　　#header{border：（@my-border * 2）;

　　　　　　　font-color：（@my-color+#acbcfc）；

　　　　　　}

LESSCSS的使用是很容易的，首先，使用你最常使用的代碼編輯器，按LESSCSS的語法規則寫好.less文件，接下來，使用編譯工具它編譯成.css，最後再引入頁面便可。

　客戶端的less使用，先在頁面中引入.less樣式表----<link rel="stylesheet/less" type="text/css" href="styles.less" />（注意：rel是"stylesheet/less"）

　　而後下載less.js並引入到頁面<head> </head>之中，<script src="less.js" type="text/javascript"></script>(注意：要先加載樣式表)

　　關於less的更多語言細節及使用能夠訪問http://less.bootcss.com/features/或者上github上去fork一個看一下， github地址：https://github.com/less/less.js

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。