摘要:參照文檔與源代碼比較全面定義總結有意義的顏色。柵格系統最核心的就是柵格系統。創造了類的樣式。添加列偏移列排序,計算各個的寬度最后是調用在里包含了以上是看源碼的初步理解與感悟,都是自己感覺重要與技巧的總結如有不足之處請多多指教。
colors參照http://v3.bootcss.com/css/ 文檔與源代碼
比較全面定義總結有意義的顏色。所有uI要用的顏色,都先從已定義的讀,這樣保證樣式的同一性,而且方便以后開發主題庫。(建議想自己寫css模塊的,可以參考一下bootstrap里顏色定義)
語義顏色(四鐘顏色)
有含義的顏色,當然也可以不止這四種,如:disabled、empty
@brand-success: #5cb85c; // 成功顏色 @brand-info: #5bc0de; // 信息顏色 @brand-warning: #f0ad4e; // 警告顏色 @brand-danger: #d9534f; // 危險顏色
灰度顏色
主要包含文本、文字、背景色等。
@gray-base: #000; // 基本的灰度 @gray-darker: lighten(@gray-base, 13.5%); // #222 @gray-dark: lighten(@gray-base, 20%); // #333 @gray: lighten(@gray-base, 33.5%); // #555 @gray-light: lighten(@gray-base, 46.7%); // #777 @gray-lighter: lighten(@gray-base, 93.5%); // #eee
文字、背景色、鏈接狀態
@body-bg: #fff; @text-color: @gray-dark; @link-color: @brand-primary; @link-hover-color: darken(@link-color, 15%); @link-hover-decoration: underline;字體
字體大小必須是在已有基礎上,做計算。從h1~h4間隔都是6px;h5~h6分別是14px、12px;而14是基礎字體。
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14px; @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px @font-size-h1: floor((@font-size-base * 2.6)); // ~36px @font-size-h2: floor((@font-size-base * 2.15)); // ~30px @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px @font-size-h5: @font-size-base; @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px行高
但是它不僅局限在行高上,可以推算出高度,已知字體大小與行高時
如:@line-height-computed: floor((@font-size-base * @line-height-base));//20px
一些通用的組件屬性都需要這個值,margin、padding、top、height、line-height...
所以定義好字體大小與行高的重要性不言而喻了吧。
//"line-height" for use in components like buttons. @line-height-base: 1.428571429; // 20/14padding與border-radius
bootstrap 有關尺寸命名的格式"-xs-" 有四種尺寸: xs、small、base、large。
而上下、左右的是:-vertical-、-horizontal-
@padding-base-vertical: 6px; @padding-base-horizontal: 12px; @padding-large-vertical: 10px; @padding-large-horizontal: 16px; @padding-small-vertical: 5px; @padding-small-horizontal: 10px; @padding-xs-vertical: 1px; @padding-xs-horizontal: 5px; @line-height-large: 1.33; @line-height-small: 1.5; @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px;Z-index
有時關于設置z-index時,我們會亂掉,只要不遮蓋就行,但是有問題時,難修改、難排查;一般我們uI上有bug,會先從js上排查,最后才到css;即使找到了,發現需要一層一層的往父級找。因此可以在最初時寫的時候避免它,先定義好,再使用。
@zindex-navbar: 1000; @zindex-dropdown: 1000; @zindex-popover: 1060; @zindex-tooltip: 1070; @zindex-navbar-fixed: 1030; @zindex-modal: 1040;操作偽類
有用戶操作動作的,需要定義偽類樣式如:active,hover,focus,disabled。
有些組件有可能是多個或者是一個的偽類,最好在定義基礎樣式時,預先定好。
不一定只有偽類定義,也可以定義類似偽類的類如:.active,.hover,.focus,.disabled。
//buttons .btn { display: inline-block; margin-bottom: 0; // For input.btn font-weight: @btn-font-weight; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid transparent; white-space: nowrap; .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); .user-select(none); &, &:active, &.active { &:focus, &.focus { .tab-focus(); } } &:hover, &:focus, &.focus { color: @btn-default-color; text-decoration: none; } &:active, &.active { outline: 0; background-image: none; .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } &.disabled, &[disabled], fieldset[disabled] & { cursor: @cursor-disabled; pointer-events: none; // Future-proof disabling of clicks .opacity(.65); .box-shadow(none); } }柵格系統
bootstrap最核心的就是柵格系統。
創造了.col-xs-1~.col-xs-12、.col-sm-1~.col-sm-12、.col-md-1~.col-md-12、.col-lg-1~.col-lg-12類的樣式
。
.make-grid-columns() { // 先循環出.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } //再把.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,與之后的遞增的類拼接起來形成 // .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, //.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn"t a typo @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } //最后把4*12 = 48 個類的樣式統一設置 .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); } } .col(1); // kickstart it }
為每個帶col-xs-x, .col-sm-x, .col-md-x, .col-lg-x;添加浮動。
.float-grid-columns(@class) { .col(@index) when (@index = 1) { // initial @item: ~".col-@{class}-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general @item: ~".col-@{class}-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { float: left; } } .col(1); // kickstart it }
添加列偏移列排序,計算各個的寬度
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { .col-@{class}-@{index} { width: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { .col-@{class}-push-@{index} { left: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { .col-@{class}-push-0 { left: auto; } } .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { .col-@{class}-pull-@{index} { right: percentage((@index / @grid-columns)); } } .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { .col-@{class}-pull-0 { right: auto; } } .calc-grid-column(@index, @class, @type) when (@type = offset) { .col-@{class}-offset-@{index} { margin-left: percentage((@index / @grid-columns)); } }
最后是調用
@grid-columns:12; // Basic looping in LESS .loop-grid-columns(@index, @class, @type) when (@index >= 0) { .calc-grid-column(@index, @class, @type); // next iteration .loop-grid-columns((@index - 1), @class, @type); } // Create grid for specific class .make-grid(@class) { .float-grid-columns(@class); .loop-grid-columns(@grid-columns, @class, width); .loop-grid-columns(@grid-columns, @class, pull); .loop-grid-columns(@grid-columns, @class, push); .loop-grid-columns(@grid-columns, @class, offset); } .make-grid-columns(); .make-grid(xs); @media (min-width: @screen-sm-min) { .make-grid(sm); } @media (min-width: @screen-md-min) { .make-grid(md); } @media (min-width: @screen-lg-min) { .make-grid(lg); }mixins border-radius
.border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius; } .border-right-radius(@radius) { border-bottom-right-radius: @radius; border-top-right-radius: @radius; } .border-bottom-radius(@radius) { border-bottom-right-radius: @radius; border-bottom-left-radius: @radius; } .border-left-radius(@radius) { border-bottom-left-radius: @radius; border-top-left-radius: @radius; }backgrounds
.bg-variant(@color) { background-color: @color; a&:hover { background-color: darken(@color, 10%); } }center-block
.center-block() { display: block; margin-left: auto; margin-right: auto; }clearfix
.clearfix() { &:before, &:after { content: " "; // 1 display: table; // 2 } &:after { clear: both; } }hide-text
.hide-text() { font: ~"0/0" a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }img-responsive、.img-retina
.img-responsive(@display: block) { display: @display; max-width: 100%; // Part 1: Set a maximum relative to the parent height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching } .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("@{file-2x}"); background-size: @width-1x @height-1x; } }opacity
.opacity(@opacity) { opacity: @opacity; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; }text-overflow
.text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }Vendor Prefixes
在vendor-prefixes.less里包含了
Animations、Backface visibility
Box shadow
Box sizing
Content columns
Hyphens
Placeholder text
Transformations
Transitions
User Select
以上是看bootstrap源碼的初步理解與感悟,都是自己感覺重要與技巧的總結;如有不足之處請多多指教。
最后在前端的道路上蹣跚前行著。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90251.html
摘要:參照文檔與源代碼比較全面定義總結有意義的顏色。柵格系統最核心的就是柵格系統。創造了類的樣式。添加列偏移列排序,計算各個的寬度最后是調用在里包含了以上是看源碼的初步理解與感悟,都是自己感覺重要與技巧的總結如有不足之處請多多指教。 參照http://v3.bootcss.com/css/ 文檔與源代碼 colors 比較全面定義總結有意義的顏色。所有uI要用的顏色,都先從已定義的讀,這樣保...
摘要:參照文檔與源代碼比較全面定義總結有意義的顏色。柵格系統最核心的就是柵格系統。創造了類的樣式。添加列偏移列排序,計算各個的寬度最后是調用在里包含了以上是看源碼的初步理解與感悟,都是自己感覺重要與技巧的總結如有不足之處請多多指教。 參照http://v3.bootcss.com/css/ 文檔與源代碼 colors 比較全面定義總結有意義的顏色。所有uI要用的顏色,都先從已定義的讀,這樣保...
摘要:引擎會在代碼執行前進行詞法分析,所以事實上,運行分為此法分析和執行兩個階段。詞法作用域所謂詞法作用域是說,其作用域為在定義時詞法分析時就確定下來的,而并非在執行時確定。 先來看個常見的面試題如下: var a = 10; function test(){ alert(a); //undefined var a = 20; alert(a); //20 } te...
閱讀 1106·2021-11-23 10:05
閱讀 1785·2021-11-12 10:36
閱讀 1853·2019-08-30 15:56
閱讀 1684·2019-08-29 12:32
閱讀 3043·2019-08-28 18:04
閱讀 3428·2019-08-26 12:17
閱讀 2502·2019-08-26 11:35
閱讀 1240·2019-08-23 15:11