Bootstrapcheatsheet

贡献者：BAI

屏幕尺寸

TEXT
0         768          992                1200
'     '     '     '     '     '     '     '     '
<---------^------------^------------------^--------->
     xs         sm              md             lg
   (phone)   (tablet)        (laptop)       (desktop)

Min:

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:

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)

列

SCSS
.container
.container-fluid

SCSS
.col-xs-1
.col-sm-1
.col-md-1
.col-lg-1
.col-md-offset-1

Mixins:

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);

工具类

SCSS
.pull-left
.pull-right

SCSS
.hidden-{xs,sm,md,lg}
.visible-{xs,sm,md,lg}
.visible-{xs,sm,md,lg,print}-{block,inline,inline-block}

SCSS
.center-block  /* margin: auto */
.clearfix
.text-{center,left,right,justify,nowrap}
.text-{lowercase,uppercase,capitalize}

SCSS
.show
.hidden

蒙版

HTML
<a data-toggle="modal" data-target="#new"></a>

MODAL-DIALOG MODAL-LG, MODAL-SM
#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
        ...

Tooltip

HTML
<span
  data-toggle="tooltip"
  title="tooltip"
  data-placement="left|top|bottom|right"
></span>

JS
$(function () {
  $('[data-toogle~="tooltip"]').tooltip();
});