ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î


ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
1³â Àü
ºÎÆ®½ºÆ®·¦¿¡¼­ »ç¿ëÇÏ´Â class¸íÀ» Á¤¸®ÇØ º¸¾Ò½À´Ï´Ù. ºÎÆ®½ºÆ®·¦À» ¾È¾²´õ¶óµµ °³ÀÎÀûÀ¸·Î ÇÁ·ÎÁ§Æ® ÇÒ¶§ class¸í ³×Àֽ̹à ³Ê¹« ±«·Î¿ö¼­ Âü°í¸¦ Çϱâ À§Çؼ­ Á¤¸®Çϴ°͵µ ÀÖ½À´Ï´Ù.
ÃÖ´ëÇÑ °£´ÜÇÏ°Ô Á¤¸®Çϱâ À§ÇØ Á¨ÄÚµù ¹æ½ÄÀ¸·Î ÀÛ¼ºÇÑ Á¡ Âü°íÇØÁÖ¼¼¿ä.
ºÎÆ®½ºÆ®·¦ ³×À̹ÖÀº ½Ã¸ÇƽÇؼ­ ³×Àָ̹¸ ºÁµµ ÀÌÇØ´Â °¡³ª »ý¼ÒÇѰ͵µ À־ ¼³¸íÀ» °£´ÜÇÏ°Ô Àû¾î³ù½À´Ï´Ù.
·¹À̾ƿô
.container (°íÁ¤µÈ ³Êºñ)
.container-fluid (³Êºñ°¡ 100%ÀÎ ÄÁÅ×À̳Ê)
±×¸®µå
ºÎ¸ð¿ä¼Ò : .row
ÀڽĿä¼Ò : .col-*-*
¤¤ ù¹ø° * : .xs, .sm, .md, .lg
¤¤ µÎ¹ø° * : Ä÷³ ¼ýÀÚ(ÃÖ´ë 12±îÁöÀÓ)
ŸÀÌÆ÷±×·¡ÇÇ / ÅؽºÆ®
h1 ~ h6
small
mark
abbr
blockquote
dl > dt + dd
code
kbd
pre
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger
.lead : ´Ü¶ôÀ» µ¸º¸ÀÌ°Ô ¸¸µë
.text-left, .text-center, .text-right, .text-justfiy, .text-nowrap, .text-lowercase, .text-uppercase, .text-capitalize(¾Õ ±ÛÀÚ¸¦ ´ë¹®ÀÚ·Î ¹Ù²ãÁÜ)
.list-unstyled
.list-inline
.dl-horizontal
.pre-scrollable
Å×À̺í
.table
.table tr.success, .danger, .info, .warning, .active
.table-striped
.table-bordered
.table-hover
.table-condensed
.table-responsive
À̹ÌÁö
.img-rounded
.img-circle
.img-thumbnail
.img-responsive
Responsive Embeds
div.embed-responsive.embed-responsive-16[4]by9[3] > .embed-responsive-item (16[4]by9[3] Àº ¿µ»ó ºñÀ²À» ¶æÇÕ´Ï´Ù.)
Jumbotron / Page Header
div.jumbotron > h1 + p
div.page-header > h1
Wells (ȸ»ö¹è°æ°ú ¾à°£ÀÇ Æеù°ú µÕ±Ù Å׵θ® µðÀÚÀÎ)
.well
.well.well-sm, .well-lg
Alerts
.alert
.alert.alert-success, .alert-info, .alert-warning, .alert-danger
.alert > .alert-link
.alert.alert-dismissible > a[data-_][aria-_]
.alert.alert-dismissible.fade.in
¹öÆ°
¹öÆ° ½ºÅ¸ÀÏ
.btn
.btn.btn-default
.btn.btn-primary
.btn.btn-success
.btn.btn-info
.btn.btn-warning
.btn.btn-danger
.btn.btn-link
¹öÆ° »çÀÌÁî
.btn.btn-lg | sm | xs
ºí·Ï ·¹º§ ¹öÆ°
.btn.btn-block
active / disabled ¹öÆ°
.btn.active | disabled
¹öÆ°±×·ì
div.btn-group > .btn
div.btn-group.btn-group-lg | sm | xs > .btn
¼öÁ÷ ¹öÆ° ±×·ì
div.btn-group-vertical > .btn
¾çÂÊ Á¤·Ä ¹öÆ° ±×·ì
.div.btn-group.btn-group-justified > .btn | .btn-group
Badges and Labels
.badge
.btn > .badge
Labels
.label.label-default | primary | success | info | warning | danger
Progress Bars
.progress > .progress-bar
.progress > .progress-bar.progress-bar-success | info | warning | danger
.progress > .progress-bar.progress-bar-striped
ÇÁ·Î±×·¡½º¹Ù ½ºÆ®¶óÀÌÇÁ ¾Ö´Ï¸ÞÀ̼Ç
.progress > .progress-bar.progress-bar-striped.active
Stacked Progress Bars
.progress > .progress-bar + .progress-bar
Pagination
.pagination > a
.pagination > .active
.pagination > .disabled
.pagination.pagination-lg || .pagination-sm
Breadcrumbs
.breadcrumb > .active
Pager
.pager
Align Buttons
.pager > .previous || .next
List Groups
.list-group > .list-group-item
.list-group > .list-group-item.active || .disabled
.list-group > .list-group-item > .badge
.list-group > .list-group-item.list-group-item-success || info || warning || danger
Panels
.panel.panel-default > .panel-body
.panel.panel-default > .panel-heading + .panel-body + .panel-footer
.panel-group > .panel.panel-default > .panel-body
.panel.panel-default || primary || success || inof || warning ||danger > .panel-body
Dropdowns
.dropdown > .btn.btn-primary.dropdown-toggle[data-toggle="dropdown"] + .dropdown-menu
.dropdown-menu > .divider
.dropdown-menu > .dropdown-header
.dropdown-menu > .active || .disabled
Collapse
button[data-toggle="collapse"][data-target="#demo"] + div#demo.collapse
Æîħ»óÅÂ
div#demo.collapse.in
PanelÄÄÆ÷³ÍÆ®¿Í °áÇÕÇÏ¿© »ç¿ëÀÌ °¡´É
¸¶Å©¾÷ Âü°í link

ÅÇ
.nav.nav-tabs > .active > a[data-toggle="tab"]
.tab-content > div.tab-pane.fade.in.active
Navigation Bar
.nav navbar-nav > .active
Form Layouts
Vertical Form (default)
.form-group > input.form-control
Inline Form
.form-inline > .form-group > label + input.form-control
Horizontal Form Å×À̺í ó·³ Á¦¸ñ:³»¿ë Çü½Ä
.form-horizontal > .form-group > .control-label + .col-- > input.form-control
Form Inputs
input, textarea
.form-group > input.form-control
checkbox
div.checkbox > label > input
label.checkbox-inline > input
radio button
div.radio > label > input
label.radio-inline > input
select list
.form-group > label + select.form-control
°Ë»ö¿µ¿ª
.input-group > input.form-control + div.input-group-btn > .btn > i( ¾ÆÀÌÄÜ)
Input Sizing
input.input-sm || .input-lg
Media Object
.media > .media-left.media-top || .media-middle || .media-bottom + media-body > .media-heading

ÃßõÃßõ : 59 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
425
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
424
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
423
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
421
ºÎÆ®½ºÆ®·¦ CSS
420
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
419
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
418
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
417
[CSS] ¹Ú½º ¼¼·Î °¡¿îµ¥ Áß¾Ó Á¤·Ä 6°¡Áö
416
CSS Layout ¼öÆò & ¼öÁ÷ Á¤·Ä
415
[JQuery] textbox focus on offÀ϶§ ¼ýÀÚ ÄÞ¸¶ º¸¿©ÁÖ±â
414
[HTML5] <video> - DOMÀ¸·Î Á¦¾îÇϱâ
413
HTML5 video ű׿¡¼­ ¿µ»ó Á¿ì¹ÝÀü
412
ÅؽºÆ® ÁٹٲÞ, ±ÛÀÚÀÚ¸£±â CSS
411
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
410
jQuery Mobile¿¡¼­ À¯¿ëÇÑ ÄÚµå 10°¡Áö.
409
[jQuery]¹öÆ° È°¼ºÈ­, ºñÈ°¼ºÈ­
408
jQuery show() / hide() / toggle() »ç¿ë¹ý
407
jquery ¿©·¯°¡Áö À̺¥Æ®
406
³×À̹ö ¿ÀÇÂAPI À½¼ºÇÕ¼º API »ç¿ëÇÏ´Â PHP »ùÇÃÄÚµå
405
[CSS] - Input clear `X ` ¹öÆ° Á¦°Å ( IE, Chrome, Firefox )
404
[Mobile] - ¸ð¹ÙÀÏÀ¥ Href ű׼Ӽºµé
403
jQuery ¿À¸¥ÂÊ ¿µ¿ªÀÇ ³ôÀ̸¦ ¿ÞÂÊ ¿µ¿ªÀÇ ³ôÀÌ¿Í µ¿ÀÏÇÏ°Ô Çϱâ
402
jquery¿¡¼­ Å×ÀÌºí¿¡ ¸¶¿ì½º ¿À¹ö½Ã ÇØ´ç ÇàÀÇ ¹è°æ»ö»ó º¯°æÇϱâ
401
jquery ½ºÅ©¸³Æ®³» ƯÁ¤°ª È®ÀÎÇϱâ (µð¹ö±ë)
400
jquery cookie (jquery.cookie.js)
399
jquery ´Ù¸¥¹öÀü Ãß°¡ »ç¿ë½Ã Ãæµ¹ ¹æÁö (Ä«Æä24 ½º¸¶Æ®µðÀÚÀÎ ±âº»³»Àå jquery 1.4.4 ¹öÀü°ú Ãæµ¹½Ã ÇØ°á¹æ¹ý)
398
[jQuery] animate()¿¡¼­ stop()ÀÇ Á߿伺
397
javascript audioÆÄÀÏ Àç»ý
396
[jQuery.$ajax]mysql + php ¼­¹ö¿¡¼­ json µ¥ÀÌÅÍ ¾ò¾î¿À±â
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.