bootstrap: update
This commit is contained in:
Rico Sta. Cruz
parent
b342002a7b
commit
dd9f82752d
184
bootstrap.md
184
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}!= "×"
|
||||
%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}!= "×"
|
||||
%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
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in New Issue