bootstrap.md

   1 ---
   2 title: Bootstrap
   3 layout: 2017/sheet
   4 prism_languages: [scss, haml, html]
   5 weight: -1
   6 category: CSS
   7 description: |
   8   .container .row .col-md-6, @screen-sm-min, .form-control, grids, .modal-content, tooltips, and other Bootstrap CSS examples.
   9 ---
  10
  11 ### Screen sizes
  12
  13 ```
  14          768          992                1200
  15 '     '     '     '     '     '     '     '     '
  16 <---------^------------^------------------^--------->
  17      xs         sm              md             lg
  18    (phone)   (tablet)        (laptop)       (desktop)
  19 ```
  20
  21 Min:
  22
  23 ```scss
  24 @media (min-width: @screen-sm-min) // >= 768px (small tablet)
  25 @media (min-width: @screen-md-min) // >= 992px (medium laptop)
  26 @media (min-width: @screen-lg-min) // >= 1200px (large desktop)
  27 ```
  28
  29 Max:
  30
  31 ```scss
  32 @media (max-width: @screen-xs-max) { // < 768px (xsmall phone)
  33 @media (max-width: @screen-sm-max) { // < 992px (small tablet)
  34 @media (max-width: @screen-md-max) { // < 1200px (medium laptop)
  35 ```
  36
  37 ### Columns
  38
  39 ```scss
  40 .container
  41 .container-fluid
  42 ```
  43
  44 ```scss
  45 .col-xs-1
  46 .col-sm-1
  47 .col-md-1
  48 .col-lg-1
  49 .col-md-offset-1
  50 ```
  51
  52 Mixins:
  53
  54 ```scss
  55 @include make-xs-column(12);
  56 @include make-sm-column(6);
  57 @include make-md-column(3);
  58 @include make-lg-column(3);
  59 ```
  60
  61 ```scss
  62 @include make-sm-column-offset(1);
  63 @include make-sm-column-push(1);
  64 @include make-sm-column-pull(1);
  65 ```
  66
  67 ### Utilities
  68
  69 ```scss
  70 .pull-left
  71 .pull-right
  72 ```
  73
  74 ```scss
  75 .hidden-{xs,sm,md,lg}
  76 .visible-{xs,sm,md,lg}
  77 .visible-{xs,sm,md,lg,print}-{block,inline,inline-block}
  78 ```
  79
  80 ```scss
  81 .center-block  /* margin: auto */
  82 .clearfix
  83 .text-{center,left,right,justify,nowrap}
  84 .text-{lowercase,uppercase,capitalize}
  85 ```
  86
  87 ```scss
  88 .show
  89 .hidden
  90 ```
  91
  92 ### Modal
  93
  94 ```html
  95 <a data-toggle='modal' data-target='#new'>
  96 ```
  97
  98 ```haml
  99 #new.modal.fade(role='dialog')
 100   .modal-dialog // .modal-lg, .modal-sm
 101     .modal-content
 102       .modal-header
 103         %h4.modal-title hello
 104         %button.close{type: 'button', data: { dismiss: 'modal' }}
 105           %span{'aria-hidden' => true}!= "&times;"
 106           %span.sr-only Close
 107       .modal-body
 108         ...
 109       .modal-footer
 110         ...
 111 ```
 112
 113 ### Modal via ajax (Rails)
 114
 115 ```haml
 116 %button.btn{data: { |
 117   toggle: 'modal', |
 118   target: '#chooseTheme', |
 119   remote: '/path/to/remote'}
 120   Change Theme
 121 ```
 122
 123 ```haml
 124 .modal.fade#chooseTheme
 125   .modal-dialog.modal-xl
 126     .modal-content
 127       .modal-header
 128         %h4.modal-title Choose a theme
 129
 130       .modal-body
 131         .spinner-panel.-lg
 132           %i
 133 ```
 134
 135 ### Tooltip
 136
 137 ```html
 138 <span
 139   data-toggle='tooltip'
 140   title='tooltip'
 141   data-placement='left|top|bottom|right'>
 142 ```
 143
 144 ```js
 145 $(function () {
 146   $('[data-toogle~="tooltip"]').tooltip()
 147 })
 148 ```
 149
 150 ### Input groups
 151
 152 ```haml
 153 .input-group
 154     input.form-control(type='text')
 155     .input-group-addon years
 156 ```