不知道從哪裏來的

時間 2019-11-11

標籤不知道哪裏來的简体版

原文原文鏈接

Bootstrap—由less來架構Bootstrap

分類： css 2012-12-11 15:39 3363人閱讀評論(0) 收藏舉報

目錄(?)[+]css

衆所周知，less是一種動態樣式語言， bootstrap基於less來編寫是爲了讓bootstrap可以繼承less的優點，如變量，繼承，運算，函數。若是你們想了解或者回顧下less能夠看下之前蘇河介紹的lessnode

用less編寫bootstrap

爲何使用less？

Bootstrap的核心是用less來編寫的，這裏容許我介紹下less的做者：Alexis Sellier（他的我的網站貌似被牆了）。Less讓咱們編寫css代碼更具樂趣，更加方便和迅速。css3

Less包含什麼？

Less包含變量，混合，對可重用代碼的繼承以及一些數學的簡單操做，甚至是一些顏色的函數。git

學習更多

若是你想學習更多，能夠直接去官方網站了解http://lesscss.org ，（附中文官網：http://www.lesscss.net/ ）web

less的特性

變量

如何管理網站的主體顏色和主體容器的高度和寬度切實讓人有點頭疼，你們必定有不斷的作ctrl+c和ctrl+v的操做來反覆替換這些常量吧，可是一旦咱們用了less來管理這些變量，就能達到牽一髮而動全身的效果，管理起來很是方便bootstrap

混合

還記得你寫border-radius須要申明冗餘的相似-moz-border-radius和-webkit-border-radius等屬性吧，可是若是我用混合的特徵來管理border-radius來達到重用的效果，那麼，代碼看起來就會很是簡潔了。跨域

函數

針對一些複雜的操做，好比柵格佈局，數學的加減乘除計算，顏色的變化等等，咱們均可以用函數來進行瀏覽器

介紹完less部分，該介紹主體的部分了，既然bootstrap繼承less，那麼它有哪些特色呢？
bootstrap對less進行了二次封裝，提供了不少基礎的less變量和函數，我的以爲很是有用，下面就來具體看下bootstrap爲咱們提供了哪些經常使用的變量和函數吧。css3動畫

Bootstrap變量

基礎設置

`@bodyBackground`	`@white`	頁面背景色
`@textColor`	`@grayDark`	默認的文字顏色
`@linkColor`	`#08c`	默認的連接顏色
`@linkColorHover`	`darken(@linkColor, 15%)`	默認連接hover樣式

頁面柵格

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

字體

`@sansFontFamily`	「Helvetica Neue」, Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, 「Courier New」, monospace
`@baseFontSize`	13px	以像素爲單位
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	以像素爲單位
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

表格tables

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

冷色調

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

暖色調

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

組件

按鈕buttons

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

表單Forms架構

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

表單Form提示背景及文字顏色

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

導航欄

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

下拉Dropdowns

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

Hero unit

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Bootstrap混合

關於混合

基礎的混合
混合就是將一段須要進行合併的樣式經過less的一種申明方式寫到一塊兒，它能夠方便的被其餘樣式調用，從而達到可以重用的目的。

 
         .element { 
        
         .clearfix(); 
        
         }

帶參數的混合
這種混合和基礎混合比較相似，它增長接受參數的功能，固然若是你不傳任何參數，它會提供一個默認值

 
         .element { 
        
         .border-radius( 
         4px 
         ); 
        
         }

易於擴展
全部的混合都是存儲在mixins.less中的，若是各位有什麼須要增長的混合能夠直接集成到utilities.less中，方便調用。

bootstrap包含的混合

經常使用混合

混合	參數	用途
`.clearfix()`	none	清除浮動
`.tab-focus()`	none	自動聚焦
`.center-block()`	none	居中，至關於`margin: auto`
`.ie7-inline-block()`	none	讓IE6,7支持`display: inline-block`
`.size()`	`@height @width`	設置容器寬高
`.square()`	`@size`	設置該容器爲正方形，參數爲邊長
`.opacity()`	`@opacity`	設置容器透明度

表單forms

混合	參數	用途
`.placeholder()`	`@color: @placeholderText`	設置輸入框的默認文案

字體

混合	參數	用途
`#font > #family > .serif()`	none	設置這個元素的字體爲有襯線字體
`#font > #family > .sans-serif()`	none	設置這個元素的字體爲無襯線字體
`#font > #family > .monospace()`	none	設置這個元素的字體爲等寬字體
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	簡單的設置字體的大小粗細等等
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	設置該字體爲有襯線字體，並設置字體的大小粗細等等
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	設置該字體爲無襯線字體，並設置字體的大小粗細等等
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	設置該字體爲等寬字體，並設置字體的大小粗細等等

柵格系統
相關的less代碼在mixins.less中

混合	參數	用途
`.container-fixed()`	none	指定該容器爲居中
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	初始化柵格系統，參數傳遞分別爲柵格的列寬和柵格之間的距離
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	初始化柵格系統，參數傳遞分別爲每一個柵格的所佔柵格總寬度的百分比和柵格之間的距離所佔柵格總寬度的百分比
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	生成`input`相關元素的柵格佈局，參數傳遞分別爲柵格的列寬和柵格之間的距離
`.makeColumn`	`@columns: 1, @offset: 0`	在柵格系統中初始化一個佔幾列的div容器，columns爲該容器跨域的列數，offset爲改容器的左偏移

css3屬性

混合	參數	用途
`.border-radius()`	`@radius`	css3圓角，參數爲圓角像素
`.box-shadow()`	`@shadow`	css3陰影
`.transition()`	`@transition`	css3動畫，(如, `all .2s linear`)
`.rotate()`	`@degrees`	旋轉一個元素，參數爲旋轉的度數
`.scale()`	`@ratio`	縮放元素，參數爲縮放後和元尺寸的比列
`.translate()`	`@x, @y`	在平面上移動元素，參數對應分別爲相對於x軸和y軸的移動距離
`.background-clip()`	`@clip`	背景裁剪，傳入clip，clip選擇border \| padding \| content
`.background-size()`	`@size`	經過css3來控制背景圖片的尺寸
`.box-sizing()`	`@boxmodel`	改變容器的盒模型，例如咱們能夠改變相似input button的盒模型爲傳統的IE模型，即設置第一個參數爲border-box就能夠達到全部瀏覽器兼容的目的
`.user-select()`	`@select`	用來控制內容的可選擇性
`.backface-visibility()`	`@visibility: visible`	css3D動畫效果是否隱藏內容的背面，
`.resizable()`	`@direction: both`	讓元素能夠進行向右和向下的拉伸縮放
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	讓容器具備css3的屬性content-count和column-gap，第一個參數爲列數，第二個參數爲列數之間的間距

背景和漸變

混合	參數	用途
`#translucent > .background()`	`@color: @white, @alpha: 1`	給元素半透明的背景色，第一個參數爲背景色，第二個參數爲透明度
`#translucent > .border()`	`@color: @white, @alpha: 1`	給元素半透明的邊框色，第一個參數爲邊框顏色，第二個參數爲透明度
`#gradient > .vertical()`	`@startColor, @endColor`	讓一個容器從自上而下顏色漸變，兼容任何瀏覽器，第一個參數是開始的顏色，第二個參數是結束的顏色
`#gradient > .horizontal()`	`@startColor, @endColor`	讓一個容器從自左而右顏色漸變，兼容任何瀏覽器，第一個參數是開始的顏色，第二個參數是結束的顏色
`#gradient > .directional()`	`@startColor, @endColor, @deg`	讓一個容器按照一個角度進行漸變，第一個參數是開始的演示，第二個參數是結束的顏色，第三個參數是進行漸變的角度
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	讓一個容器按照開始顏色和中間顏色以及結束顏色進行漸變，第一個參數是開始的顏色，第二個參數是中間的顏色，第三個參數是中間漸變結束的位置，最後一個參數是漸變結束的顏色
`#gradient > .radial()`	`@innerColor, @outerColor`	讓一個容器放射性漸變，第一個參數是容器中心的顏色，第二個參數是容器最外層的顏色
`#gradient > .striped()`	`@color, @angle`	條紋漸變，第一個參數爲漸變的顏色，第二個參數爲漸變的角度
`#gradientBar()`	`@primaryColor, @secondaryColor`	主要用於按鈕和提示框的垂直顏色漸變

關於less的編譯

若是你從githib上下載了源碼並對bootstrap進行了修改，你必須針對bootstrap進行編譯。關於less的編譯我有話要說，如今針對less的編譯已經有不少工具了，http://less.cnodejs.net/tools 你們能夠訪問中文官網對這些工具逐一認識，我的推薦simpleless，很是方便。

相關標籤/搜索

每日一句

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