From dd9f82752d7aa68253622fe887a586f93052cca9 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Mon, 4 Sep 2017 09:29:00 +0800
Subject: [PATCH] bootstrap: update

---
 bootstrap.md | 184 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 113 insertions(+), 71 deletions(-)

diff --git a/bootstrap.md b/bootstrap.md
index 2a3ea0c26..d60195e3f 100644
--- a/bootstrap.md
+++ b/bootstrap.md
@@ -1,111 +1,153 @@
 ---
 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)
+```
+         768          992                1200
+'     '     '     '     '     '     '     '     '
+<---------^------------^------------------^--------->
+     xs         sm              md             lg
+   (phone)   (tablet)        (laptop)       (desktop)
+```
 
 Min:
 
-    @media (min-width: @screen-sm-min) { // >= 768px (small tablet)
-    @media (min-width: @screen-md-min) { // >= 992px (medium laptop)
-    @media (min-width: @screen-lg-min) { // >= 1200px (large desktop)
+```scss
+@media (min-width: @screen-sm-min) // >= 768px (small tablet)
+@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)
-    @media (max-width: @screen-sm-max) { // < 992px (small tablet)
-    @media (max-width: @screen-md-max) { // < 1200px (medium laptop)
+```scss
+@media (max-width: @screen-xs-max) { // < 768px (xsmall phone)
+@media (max-width: @screen-sm-max) { // < 992px (small tablet)
+@media (max-width: @screen-md-max) { // < 1200px (medium laptop)
+```
 
 ### Columns
 
-    .container
-    .container-fluid
+```scss
+.container
+.container-fluid
+```
 
-    .col-xs-1
-    .col-sm-1
-    .col-md-1
-    .col-lg-1
-    .col-md-offset-1
+```scss
+.col-xs-1
+.col-sm-1
+.col-md-1
+.col-lg-1
+.col-md-offset-1
+```
 
-    .make-xs-column(12)
-    .make-sm-column(6)
-    .make-md-column(3)
-    .make-lg-column(3)
+Mixins:
 
-    .make-sm-column-offset(1)
-    .make-sm-column-push(1)
-    .make-sm-column-pull(1)
+```scss
+@include make-xs-column(12);
+@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
-    .pull-right
+```scss
+.pull-left
+.pull-right
+```
 
-    .hidden-{xs,sm,md,lg}
-    .visible-{xs,sm,md,lg}
-    .visible-{xs,sm,md,lg,print}-{block,inline,inline-block}
+```scss
+.hidden-{xs,sm,md,lg}
+.visible-{xs,sm,md,lg}
+.visible-{xs,sm,md,lg,print}-{block,inline,inline-block}
+```
 
-    .center-block  /* margin: auto */
-    .clearfix
-    .text-{center,left,right,justify,nowrap}
-    .text-{lowercase,uppercase,capitalize}
+```scss
+.center-block  /* margin: auto */
+.clearfix
+.text-{center,left,right,justify,nowrap}
+.text-{lowercase,uppercase,capitalize}
+```
 
-    .show
-    .hidden
+```scss
+.show
+.hidden
+```
 
 ### Modal
 
-    <a data-toggle='modal' data-target='#new'>
+```html
+<a data-toggle='modal' data-target='#new'>
+```
 
-    #new.modal.fade(role='dialog')
-      .modal-dialog // .modal-lg, .modal-sm
-        .modal-content
-          .modal-header
-            %h4.modal-title hello
-            %button.close{type: 'button', data: { dismiss: 'modal' }}
-              %span{'aria-hidden' => true}!= "&times;"
-              %span.sr-only Close
-          .modal-body
-            ...
-          .modal-footer
-            ...
+```haml
+#new.modal.fade(role='dialog')
+  .modal-dialog // .modal-lg, .modal-sm
+    .modal-content
+      .modal-header
+        %h4.modal-title hello
+        %button.close{type: 'button', data: { dismiss: 'modal' }}
+          %span{'aria-hidden' => true}!= "&times;"
+          %span.sr-only Close
+      .modal-body
+        ...
+      .modal-footer
+        ...
+```
 
 ### Modal via ajax (Rails)
 
-    %button.btn{data: { |
-      toggle: 'modal', |
-      target: '#chooseTheme', |
-      remote: '/path/to/remote'}
-      Change Theme
+```haml
+%button.btn{data: { |
+  toggle: 'modal', |
+  target: '#chooseTheme', |
+  remote: '/path/to/remote'}
+  Change Theme
+```
 
-    .modal.fade#chooseTheme
-      .modal-dialog.modal-xl
-        .modal-content
-          .modal-header
-            %h4.modal-title Choose a theme
+```haml
+.modal.fade#chooseTheme
+  .modal-dialog.modal-xl
+    .modal-content
+      .modal-header
+        %h4.modal-title Choose a theme
 
-          .modal-body
-            .spinner-panel.-lg
-              %i
+      .modal-body
+        .spinner-panel.-lg
+          %i
+```
 
 ### Tooltip
 
-    data-toggle='tooltip'
-    title='tooltip'
-    data-placement='left|top|bottom|right'
+```html
+<span
+  data-toggle='tooltip'
+  title='tooltip'
+  data-placement='left|top|bottom|right'>
+```
 
-    $(function () {
-      $('[data-toogle~="tooltip"]').tooltip();
-    });
+```js
+$(function () {
+  $('[data-toogle~="tooltip"]').tooltip()
+})
+```
 
 ### Input groups
 
-    .input-group
-        input.form-control(type='text')
-        .input-group-addon years
+```haml
+.input-group
+    input.form-control(type='text')
+    .input-group-addon years
+```