参照http://v3.bootcss.com/css/ 文档与源代码
colors
比较全面定义总结有意义的颜色。所有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/14
padding与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源码的初步理解与感悟,都是自己感觉重要与技巧的总结;如有不足之处请多多指教。
最后在前端的道路上蹒跚前行着。