• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Bootstrap training. презентация
 

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

on

  • 570 views

 

Statistics

Views

Total Views
570
Views on SlideShare
570
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Bootstrap сетка
    • Bootsrap сетка (default) @gridColumnWidth1200: 70px;разрешение 1200+ @gridGutterWidth1200: 30px; @gridColumns: 12;разрешение 940+ @gridColumnWidth: 60px; @gridGutterWidth: 20px;разрешение 768+ @gridColumnWidth768: 42px; @gridGutterWidth768: 20px;
    • Cетка 115272 / 12 / 24 1128 / 115260 / 12 / 36 1116 / 115248 / 12 / 48 1104 / 1152
    • Вложенность сетки
    • Bootstrap переменные (variables)
    • Цвета// 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;менять не рекомендую лучше добавлять свои
    • Типографика// 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;
    • Bootstrapпримешивания (mixins)
    • 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;}
    • 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);}
    • 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;}
    • 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;}
    • Цвет 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;}