bootstrap: update

bootstrap.md

@@ -1,69 +1,99 @@
 ---
 title: Bootstrap
+layout: 2017/sheet
+prism_languages: [scss, haml, html]
+weight: -1
 ---
 
 ### Screen sizes
 
+```
          768          992                1200
-    '     '     '     '     '     '     '     '     '
+'     '     '     '     '     '     '     '     '
-    <---------^------------^------------------^--------->
+<---------^------------^------------------^--------->
      xs         sm              md             lg
    (phone)   (tablet)        (laptop)       (desktop)
+```
 
 Min:
 
-    @media (min-width: @screen-sm-min) { // >= 768px (small tablet)
+```scss
-    @media (min-width: @screen-md-min) { // >= 992px (medium laptop)
+@media (min-width: @screen-sm-min) // >= 768px (small tablet)
-    @media (min-width: @screen-lg-min) { // >= 1200px (large desktop)
+@media (min-width: @screen-md-min) // >= 992px (medium laptop)
+@media (min-width: @screen-lg-min) // >= 1200px (large desktop)
+```
 
 Max:
 
-    @media (max-width: @screen-xs-max) { // < 768px (xsmall phone)
+```scss
-    @media (max-width: @screen-sm-max) { // < 992px (small tablet)
+@media (max-width: @screen-xs-max) { // < 768px (xsmall phone)
-    @media (max-width: @screen-md-max) { // < 1200px (medium laptop)
+@media (max-width: @screen-sm-max) { // < 992px (small tablet)
+@media (max-width: @screen-md-max) { // < 1200px (medium laptop)
+```
 
 ### Columns
 
-    .container
+```scss
-    .container-fluid
+.container
+.container-fluid
+```
 
-    .col-xs-1
+```scss
-    .col-sm-1
+.col-xs-1
-    .col-md-1
+.col-sm-1
-    .col-lg-1
+.col-md-1
-    .col-md-offset-1
+.col-lg-1
+.col-md-offset-1
+```
 
-    .make-xs-column(12)
+Mixins:
-    .make-sm-column(6)
-    .make-md-column(3)
-    .make-lg-column(3)
 
-    .make-sm-column-offset(1)
+```scss
-    .make-sm-column-push(1)
+@include make-xs-column(12);
-    .make-sm-column-pull(1)
+@include make-sm-column(6);
+@include make-md-column(3);
+@include make-lg-column(3);
+```
+
+```scss
+@include make-sm-column-offset(1);
+@include make-sm-column-push(1);
+@include make-sm-column-pull(1);
+```
 
 ### Utilities
 
-    .pull-left
+```scss
-    .pull-right
+.pull-left
+.pull-right
+```
 
-    .hidden-{xs,sm,md,lg}
+```scss
-    .visible-{xs,sm,md,lg}
+.hidden-{xs,sm,md,lg}
-    .visible-{xs,sm,md,lg,print}-{block,inline,inline-block}
+.visible-{xs,sm,md,lg}
+.visible-{xs,sm,md,lg,print}-{block,inline,inline-block}
+```
 
-    .center-block  /* margin: auto */
+```scss
-    .clearfix
+.center-block  /* margin: auto */
-    .text-{center,left,right,justify,nowrap}
+.clearfix
-    .text-{lowercase,uppercase,capitalize}
+.text-{center,left,right,justify,nowrap}
+.text-{lowercase,uppercase,capitalize}
+```
 
-    .show
+```scss
-    .hidden
+.show
+.hidden
+```
 
 ### Modal
 
-    <a data-toggle='modal' data-target='#new'>
+```html
+<a data-toggle='modal' data-target='#new'>
+```
 
-    #new.modal.fade(role='dialog')
+```haml
+#new.modal.fade(role='dialog')
   .modal-dialog // .modal-lg, .modal-sm
     .modal-content
       .modal-header
@@ -75,16 +105,20 @@ Max:
         ...
       .modal-footer
         ...
+```
 
 ### Modal via ajax (Rails)
 
-    %button.btn{data: { |
+```haml
+%button.btn{data: { |
   toggle: 'modal', |
   target: '#chooseTheme', |
   remote: '/path/to/remote'}
   Change Theme
+```
 
-    .modal.fade#chooseTheme
+```haml
+.modal.fade#chooseTheme
   .modal-dialog.modal-xl
     .modal-content
       .modal-header
@@ -93,19 +127,27 @@ Max:
       .modal-body
         .spinner-panel.-lg
           %i
+```
 
 ### Tooltip
 
+```html
+<span
   data-toggle='tooltip'
   title='tooltip'
-    data-placement='left|top|bottom|right'
+  data-placement='left|top|bottom|right'>
+```
 
-    $(function () {
+```js
-      $('[data-toogle~="tooltip"]').tooltip();
+$(function () {
-    });
+  $('[data-toogle~="tooltip"]').tooltip()
+})
+```
 
 ### Input groups
 
-    .input-group
+```haml
+.input-group
     input.form-control(type='text')
     .input-group-addon years
+```