Bootstrap   сетка
Bootsrap сетка (default)                 @gridColumnWidth1200:   70px;разрешение 1200+                 @gridGutterWidth120...
Cетка 115272 / 12 / 24      1128 / 115260 / 12 / 36      1116 / 115248 / 12 / 48      1104 / 1152
Вложенность сетки
Bootstrap переменные  (variables)
Цвета// Grays                               // Accent colors// -------------------------           // --------------------...
Типографика// Typography// -------------------------@sansFontFamily:               "Helvetica Neue", Helvetica, Arial, san...
Bootstrapпримешивания   (mixins)
Border Radius                     CSS                                 LESS.rounded {                                 .roun...
Box shadow                   CSS                                    LESS.shadow {                                    .shad...
Transitions                   CSS                               LESS.transition {                     .transition{  -webki...
Transformations                      CSS                                   LESS.rotate {                                  ...
Цвет placeholder                     CSS                                        LESSinput[type="text"]:-moz-placeholder { ...
Upcoming SlideShare
Loading in …5
×

Bootstrap training. презентация

1,164 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,164
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bootstrap training. презентация

  1. 1. Bootstrap сетка
  2. 2. Bootsrap сетка (default) @gridColumnWidth1200: 70px;разрешение 1200+ @gridGutterWidth1200: 30px; @gridColumns: 12;разрешение 940+ @gridColumnWidth: 60px; @gridGutterWidth: 20px;разрешение 768+ @gridColumnWidth768: 42px; @gridGutterWidth768: 20px;
  3. 3. Cетка 115272 / 12 / 24 1128 / 115260 / 12 / 36 1116 / 115248 / 12 / 48 1104 / 1152
  4. 4. Вложенность сетки
  5. 5. Bootstrap переменные (variables)
  6. 6. Цвета// Grays // Accent colors// ------------------------- // -------------------------@black: #000; @blue: #049cdb;@grayDarker: #222; @blueDark: #0064cd;@grayDark: #333; @green: #46a546;@gray: #555; @red: #9d261d;@grayLight: #999; @yellow: #ffc40d;@grayLighter: #eee; @orange: #f89406;@white: #fff; @pink: #c3325f; @purple: #7a43b6;менять не рекомендую лучше добавлять свои
  7. 7. Типографика// Typography// -------------------------@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;@serifFontFamily: Georgia, "Times New Roman", Times, serif;@customFontFamily: Raleway, sans-serif;@baseFontSize: 14px;@baseFontFamily: @sansFontFamily;@baseLineHeight: 20px;@headingsFontFamily: inherit;@headingsFontWeight: bold;@headingsColor: inherit;
  8. 8. Bootstrapпримешивания (mixins)
  9. 9. Border Radius CSS LESS.rounded { .rounded{ -webkit-border-radius: 12px; .border-radius(12px); -moz-border-radius: 12px; } border-radius: 12px;}.rounded-top { .rounded-top{ -webkit-border-top-right-radius: 12px; .border-top-radius(12px); -moz-border-radius-topright: 12px; } border-top-right-radius: 12px; -webkit-border-top-left-radius: 12px; -moz-border-radius-topleft: 12px; border-top-left-radius: 12px;}
  10. 10. Box shadow CSS LESS.shadow { .shadow{ -webkit-box-shadow: 0px 0px 3px 5px rgba .box-shadow(0px 0px 3px 5px(0, 0, 0, 0.3); rgba(0, 0, 0, 0.3)); -moz-box-shadow: 0px 0px 3px 5px }rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 3px 5pxrgba(0, 0, 0, 0.3);}
  11. 11. Transitions CSS LESS.transition { .transition{ -webkit-transition: width 2s; .transition(width 2s); -moz-transition: width 2s; } -o-transition: width 2s; transition: width 2s;}.transition-delay { .transition-delay{ -webkit-transition-delay: 1s; .transition-delay(1s); -moz-transition-delay: 1s; } -o-transition-delay: 1s; transition-delay: 1s;}
  12. 12. Transformations CSS LESS.rotate { .rotate{ -webkit-transform: rotate(45deg); .rotate(45deg); -moz-transform: rotate(45deg); } -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}.skew { .skew{ -webkit-transform: skew(15deg, -20deg); .skew(15deg, -20deg); -moz-transform: skew(15deg, -20deg); } -ms-transform: skewX(15deg) skewY(-20deg); -o-transform: skew(15deg, -20deg); transform: skew(15deg, -20deg); -webkit-backface-visibility: hidden;}
  13. 13. Цвет placeholder CSS LESSinput[type="text"]:-moz-placeholder { input[type="text"]{ color: #000000; .placeholder(#000);} }input[type="text"]:-ms-input-placeholder { color: #000000;}input[type="text"]::-webkit-input-placeholder { color: #000000;}

×