ÈçºÎѧϰbootstrap¿ò¼Ü

ʱ¼ä£º2018.07.29 ·¢²¼ÈË£ºdaxiahuawe

ÈçºÎѧϰbootstrap¿ò¼Ü

Òѽâ¾öÎÊÌâ

¹È¸èdaxiahuaweÓû§ÔÚ2018.07.29Ìá½»Á˹ØÓÚ¡°ÔÀÔÆÅôÆ­»éÈçºÎѧϰbootstrap¿ò¼Ü¡±µÄÌáÎÊ£¬»¶Ó­´ó¼ÒÓ¿Ô¾·¢±í×Ô¼ºµÄ¹Ûµã¡£Ä¿Ç°¹²ÓÐ1¸ö»Ø´ð£¬×îºó¸üÐÂÓÚ2025-03-26T18:54:51¡£Ï£Íû´ó¼ÒÄܹ»°ïÖúËý¡£

ÏêϸÎÊÌâÃèÊö¼°ÒÉÎÊ£ºÆÚ´ýÄúµÄ´ð°¸£¬¸ÐлÄã,ÎÒ»á¼ÇµÃÄã¶ÔÎÒµÄºÃµÄ £¡

Ï£ÍûÒÔϵĻشð£¬Äܹ»°ïÖúÄã¡£

µÚ1¸ö»Ø´ð

Óû§Ãû£ºvltfz  

È«¾ÖÑùʽ
1
BootstrapÖÐÓõ½Ò»Ð©h**TMLÔªËØºÍCSSÊôÐÔÐèÒª½«Ò³ÃæÉèÖÃΪh**TML5ÎĵµÀàÐÍ£¬¼´ÔÚÒ³Ãæ¶¥²¿Ìí¼Ó¡°<!DOCTYPEhtml>¡±
2
²¼¾ÖÀ´×ÔÈÝÆ÷£ºBootstrapÐèÒªÎªÒ³ÃæÄÚÈݺÍÕ¤¸ñϵͳ°ü¹üÒ»¸ö.container»úÌâÓëÌḴ»òcontainer-fluid£¨Õ¼¾ÝÈ«²¿ÊÓ¿ÚviewportµÄÈÝÆ÷£©ÈÝÆ÷¡£
3
Õ¤¸ñϵͳ£¬³ÖƤÏʹ󰡹غâÀÍBootstrapÌṩÁËÒ»Ì××î¶à12ÁеÄÁ÷ʽդ¸ñϵͳ£¬Í¨¹ý.row±íʾÐкÍ.col-xs-4ÕâÖÖ±íʾ¿í¶ÈµÄÁпìËÙ´´½¨Õ¤¸ñ²¼¾Ö¡£

4
BootstrapÅŰ桢Á´½ÓÑùʽÉèÖÃÁË»ù±¾331215ÎÊ´ðµÄÈ«¾ÖÑùʽ¡£
font-sizeÉèÖÃΪ14px£¬line-heightÉèÖÃΪ1.428¡£
<p>£¨¶ÎÂä£©ÔªËØ»¹±»ÉèÖÃÁ˵ÈÓÚ1/2Ðи¨¼´10px£©µÄµ×²¿Íâ±ß¾àÖúǿԲµ£µ÷¶È£¨margin£©¡£

»ù´¡Ñùʽ
¡¾ÅŰ桿£¬
1.±êÌ⣬¿ÉÒÔÓÃÀ´.h1µ½.h6Àà¸øÄÚÁªÊôÐÔµÄÎı¾¸³Óè±êÌâÑùʽ£¬±êÌâÄÚͨ¹ý<**all>±êÇ©»ò´ø.**allÀàµÄÔªËØ±ê¼Ç¸±±êÌâ¡£
Ö÷ÌåÎı¾£º.leadÀàÈöÎÂäÍ»³öÏÔʾ¡£
2.ÄÚÁªÎı¾£¬Ê¹ÓÃ<mark>±êÇ©±íʾ±ê×¢Îı¾£¬<del>ɾ³ý£¬<s>ÎÞÓã¬<ins>²åÈ룬<u>Ï»®Ï¬<**all>СºÅ£¨¸¸ÈÝÆ÷ʾÐÌÓ¦Éõ´ÙË¼ÖØ¶ÁЭµ÷°û×ÖÌå´óСµÄ85%£©£¬<strong>×ÅÖØ£¬<em>бÌå¡£
3.Îı¾¶ÔÆëÀ࣬text-left£¬text-center£¬text-right£¬text-justify£¬text-nowrap
4.Îı¾´óСдÀ࣬text-lowercase£¬text-uppercase£¬text-capitalize
5¸´×°.ËõÂÔÓïÀ࣬Ϊ<abbr>ÔªËØÉèÖÃtitleÊô¼¤ÐÔ²¢Ê¹ÓÃ.initiali**ÀàÈÃfont-size±äµÃÉÔ΢СЩ¡£Àý£º<abºÚ°û¼¦ÒÂËûbrtitle="attribute"class="initiali**">attr</abbr>
6.µØÖ·£¬ÒÔÈÕ³£Ê¹Óõĸñʽ³ÊÓñÑÔËß¹¹ÆøÊµ¿íÍÆÐËÏÖ£¬ÔÚÐнáβ¼Ó<br>±£ÁôÐèºõ¿ÎÐÂÏØ¶À°ËÒªµÄÑùʽ¼´¿É¡£
7.ÒýÓ㬽«h**TMLÔªËØ°ü¹üÔÚ<blockquote>Öм´¿É±íÏÖΪÒýÓÃÑùʽ¡£¶ÔÓÚÖ±½ÓÒýÓ㬽¨ÒéÓÃ<p>±ê½µÌ«ÑÛʿǩ¡£
8.ÁÐ±í£¬list-unstyledÀàÒÆ³ýĬÈÏlist-styleÑùʽºÍ×ó²àÍâ±ß¾àµÄÒ»×éÔªËØ£¨Ö»Õë¶ÔÖ±½Ó×ÓÔªËØ£©¡£list-inlineÀàͨ¹ýÉèÖÃdisplay:inline-block;²¢Ìí¼ÓÉÙÁ¿µÄÄÚ²¹£¨padding£©£¬½«ËùÓÐÔªËØ·ÅÖÃÓÚͬһÐС£dl-horizontaÎóºâÔ²Ò**é×Ö¼¦ÄÃlÀàÈÃ<dl>ÄڵĶÌÓï¼°ÆäÃèÊöÅÅÔÚÒ»ÐС£
¡¾´úÂë¡¿
<co½Ó³ý±¶µ¥¸´ÖÖ¶Óde>±êÇ©°ü¹üÄÚÁªÑùʽµÄ´úÂëÆ¬¶Î£¬
<kbd>±êÇ©±ê´ø¹¤¼ÇÓû§Í¨¹ý¼üÅÌÊäÈëµÄÄÚÈÝ£¬
<pÏàѽre>չʾ´úÂë¿é¡£¿ÉÓÃpre-scrollableÀàÉèÖÃ×î¸ß350px´ø´¹Ö±¹ö¶¯ÌõÊö×°¶¨¹©È·Í£ÆøÀ§ÒÂÔ¼¡£
<var>±êÇ©±ê¼Ç±äÁ¿£¬
<samp>±êÇ©±ê¼Ç³ÌÐòÊä³öµÄÄÚÆ÷ʽ¼ÃÈÝ¡£
¡¾±í¸ñ¡¿
.tableÀàÖ¸¶¨»ù±¾Ñùʽ£¬
.table-stripedÌõÎÆÑùʽ£¬
.table-borderedÀàΪ±ß¿òÑùʽ£¬
.table-hoverÀà´øÊó±êÐüÍ£Ñùʽ£¬
.table-condensedÀà½ô´ÕÑùʽ¡£
״̬Àà(Ðлòµ¥Ôª¸ñÉèÖÃÑÕÉ«)£ºactive£¬success£¬info£¬warning£¬info¡£

½«ÈκÎ.tableÔªËØ°ü¹üÔÚ.table-responsiveÔªËØÄÚ£¬¼´¿É´´½¨ÏìӦʽ±í¸ñ£¬Æä
ÏìӦʽ±í¸ñ:»áÔÚСÆÁÄ»É豸ÉÏ£¨Ð¡ÓÚ768px£©Ë®Æ½¹ö¶¯¡£µ±ÆÁÄ»´óÓÚ768px¿í¶Èʱ£¬Ë®Æ½¹ö¶¯ÌõÏûʧ¡£
¡¾±íµ¥¡¿
1.»ù±¾ÊµÀý£¬ËùÓÐÉèÖÃÁË.form-controlÀàµÄ<input>¡¢<textarea>ºÍ<select>ÔªËØ¶¼½«±»Ä¬ÈÏÉèÖÿí¶ÈÊôÐÔΪwidth:100%;¡£½«labelÔªËØºÍÇ°ÃæÌáµ½µÄ¿Ø¼þ°ü¹üÔÚ.form-groupÖпÉÒÔ»ñµÃ×îºÃµÄÅÅÁС£

²»Òª½²±íµ¥×éÖ±½ÓºÍÊäÈë¿ò×é»ìºÏʹÓ᣽¨Ò齫ÊäÈë¿ò×éǶÌ×µ½±íµ¥×éÖÐʹÓá£
form-group£¬input-group£¬control-group£¬

2.ÄÚÁª±íµ¥£¬<form>ÔªËØÌí¼Ó.form-inlineÀà¿ÉʹÆäÄÚÈÝ×ó¶ÔÆë²¢ÇÒ±íÏÖΪinline-block¼¶±ðµÄ¿Ø¼þ¡£Ö»ÊÊÓÃÓÚÊÓ¿Ú£¨viewport£©ÖÁÉÙÔÚ768px¿í¶Èʱ£¨ÊÓ¿Ú¿í¶ÈÔÙСµÄ»°¾Í»áʹ±íµ¥ÕÛµþ£©¡£
ÔÚÄÚÁª±íµ¥Öе¥Ñ¡/¶àÑ¡¿ò¿Ø¼þµÄ¿í¶ÈÉèÖÃΪwidth:auto;
Èç¹ûÄãûÓÐΪÿ¸öÊäÈë¿Ø¼þÉèÖÃlabel±êÇ©£¬ÆÁÄ»ÔĶÁÆ÷½«ÎÞ·¨Õýȷʶ±ð¡£¶ÔÓÚÕâЩÄÚÁª±íµ¥£¬Äã¿ÉÒÔͨ¹ýΪlabelÉèÖÃ.sr-onlyÀཫÆäÒþ²Ø¡£
3.ˮƽÅÅÁÐµÄ±íµ¥
ͨ¹ýΪ±íµ¥Ìí¼Ó.form-horizontalÀà¸Ä±ä.form-groupµÄÐÐΪ£¬Ê¹Æä±íÏÖΪդ¸ñϵͳÖеÄÐУ¨row£©
4.¶àÑ¡ºÍµ¥Ñ¡¿ò
.radio¡¢.radio-inline¡¢.checkbox¡¢.checkbox-inline¡£
5.¾²Ì¬¿Ø¼þ
ˮƽ²¼¾ÖµÄ±íµ¥ÖУ¬ÈçÐ轫һÐд¿Îı¾ºÍlabelÔªËØ·ÅÖÃÓÚͬһÐУ¬Îª<p>ÔªËØÌí¼Ó.form-control-staticÀ༴¿É¡£
6.¿Ø¼þ״̬
.disabledÀà½ûÓÿؼþ£¬Îª<fieldset>ÉèÖÃdisabledʱÔò½ûÓðüº¬µÄËùÓпؼþ¡£
a±êÇ©²»ÊÜ´ËÀàÓ°Ïì¡£
readonlyÊôÐÔ¿ÉÒÔ½ûÖ¹Óû§ÊäÈë
.has-warning¡¢.has-error»ò.has-successÀൽÕâЩ¿Ø¼þµÄ¸¸ÔªËؼ´¿É¡£Èκΰüº¬ÔÚ´ËÔªËØÖ®ÄÚµÄ.control-label¡¢.form-controlºÍ.help-blockÔªËØ¶¼½«½ÓÊÜÕâЩУÑé״̬µÄÑùʽ¡£
Ä㻹¿ÉÒÔÕë¶ÔУÑé״̬ΪÊäÈë¿òÌí¼Ó¶îÍâµÄͼ±ê£¨×¢ÒâÒÀÀµÓÚlabel±êÇ©£©¡£Ö»ÐèÉèÖÃÏàÓ¦µÄ.has-feedbackÀಢÌí¼ÓÕýÈ·µÄͼ±ê¼´¿É¡£
7.¿Ø¼þ³ß´ç
ͨ¹ý.input-lg.input-**ÀàËÆµÄÀà¿ÉÒÔΪ¿Ø¼þÉèÖø߶ȣ¬Í¨¹ý.col-lg-*ÀàËÆµÄÀà¿ÉÒÔΪ¿Ø¼þÉèÖÿí¶È
ͨ¹ýÌí¼Ó.form-group-lg»ò.form-group-**À࣬Ϊ.form-horizontal°ü¹üµÄlabelÔªËØºÍ±íµ¥¿Ø¼þ¿ìËÙÉèÖóߴ硣
ÓÃÕ¤¸ñϵͳÖеÄÁУ¨column£©°ü¹üÊäÈë¿ò»òÆäÈκθ¸ÔªËØ£¬¶¼¿ÉºÜÈÝÒ×µÄΪÆäÉèÖÿí¶È¡£
8.**Îı¾
help-blockÀ࣬Õë¶Ô±íµ¥¿Ø¼þµÄ¡°¿é£¨block£©¡±¼¶**Îı¾¡£
¡¾°´Å¥¡¿
1.»ù±¾Ñùʽ£¬btn¡¢btn-default¡¢btn-primary¡¢btn-success¡¢btn-info¡¢btn-warning¡¢btn-danger¡¢active
2.Õ¹ÏÖÐÎʽ£¬btn-link¡¢btn-block¡¢close
3.³ß´çÑùʽ£¬.btn-lg¡¢.btn-**¡¢.btn-xs¡£
¿Éͨ¹ý<a>¡¢<button>»ò<input>ÔªËØÓ¦Óð´Å¥À࣬µ«½¨ÒéÓÃ<button>ÔªËØÀ´»ñµÃÔÚ¸÷¸öä¯ÀÀÆ÷ÉÏ»ñµÃÏàÆ¥ÅäµÄ»æÖÆÐ§¹û¡£
6
¡¾Í¼Æ¬¡¿
ͼƬÐÎ×´£¬img-rounded£¬img-circle£¬img-thumbnail£¬IE8²»Ö§³ÖCSS3ÖеÄÔ²½ÇÊôÐÔ¡£
7
¡¾**¡¿
text-muted¡¢text-primary¡¢text-success¡¢text-info¡¢text-warning¡¢text-danger
bg-primary¡¢bg-success¡¢bg-info¡¢bg-warning¡¢bg-danger¡¢
Èý½Ç·ûºÅ£¬caret
¸¡¶¯
¾ÓÖÐ

×é¼þÑùʽ

¡¾Í¼±ê¡¿
200¸öÀ´×ÔGlyphiconh**alflingsµÄ×ÖÌåͼ±ê£¬
ͼ±êÀàÖ»ÄÜÓ¦ÓÃÔÚ¿ÕÔªËØÉÏ£¬ÇÒ²»¿ÉÓëÆäËü×é¼þÁªºÏʹÓá£
<spanclass="glyphiconglyphicon-search"></span>

¡¾²Ëµ¥¡¿
½«ÏÂÀ­²Ëµ¥´¥·¢Æ÷ºÍÏÂÀ­²Ëµ¥¶¼°ü¹üÔÚ.dropdownÀï
²Ëµ¥¶ÔÆë£ºÄ¬ÈÏÇé¿öÏ£¬ÏÂÀ­²Ëµ¥×Ô¶¯ÑØ×Ÿ¸ÔªËصÄÉÏÑØºÍ×ó²à±»**Ϊ100%¿í¶È¡£Îª.dropdown-me**Ìí¼Ó.dropdown-me**-rightÀà¿ÉÒÔÈò˵¥ÓÒ¶ÔÆë
²Ëµ¥·Ö×飺dropdown-header±íÃèÊöÏ.disabled±í½ûÓÃÏî
ÏòÉϳö£º.dropupÀà¾ÍÄÜʹ´¥·¢µÄÏÂÀ­²Ëµ¥³¯ÉÏ·½´ò¿ª

¡¾°´Å¥×é¡¿
°´Å¥×é.btn-group£¬Í¨¹ý.btn-group-*Ö¸¶¨×éÖа´Å¥³ß´ç¡£
°´Å¥À¸.btn-toolbar
Å¥´¹Ö±¶ÑµþÅÅÁÐÏÔʾbtn-group-vertical
Á½¶Ë¶ÔÆëÅÅÁеİ´Å¥×ébtn-group-justified

¡¾µ¼º½¡¿
±êǩҳ.n**-tabsÀàÒÀÀµ.n**»ùÀà¡£
½ºÄÒʽ±êǩҳ.n**-pillsÀ࣬Ìí¼Ó.n**-stackedÀà¸ÄΪ´¹Ö±¶Ñµþ¡£
.n**-justifiedÀà¿ÉÒÔºÜÈÝÒ×µÄÈñêǩҳ»ò½ºÄÒʽ±êÇ©³ÊÏÖ³öͬµÈ¿í¶È¡£
n**barn**bar-default

¶ÔÓÚ²»°üº¬ÔÚ<form>ÖеÄ<button>ÔªËØ£¬¼ÓÉÏ.n**bar-btnºó£¬¿ÉÒÔÈÃËüÔÚµ¼º½ÌõÀï´¹Ö±¾ÓÖС£
½«±íµ¥·ÅÖÃÓÚ.n**bar-formÖ®ÄÚ¿ÉÒÔ³ÊÏֺܺõĴ¹Ö±¶ÔÆë£¬
.n**bar-text
.n**bar-link
.n**bar-leftºÍ.n**bar-right¹¤¾ßÀàÈõ¼º½Á´½Ó¡¢±íµ¥¡¢°´Å¥»òÎı¾¶ÔÆë¡£
.n**bar-fixed-topÀà¿ÉÒÔÈõ¼º½Ìõ¹Ì¶¨ÔÚ¶¥²¿
.n**bar-fixed-bottomÀà¿ÉÒÔÈõ¼º½Ìõ¹Ì¶¨Ôڵײ¿
.n**bar-static-topÀà¿ÉÈõ¼º½ÌõËæ×ÅÒ³ÃæÏòϹö¶¯¶øÏûʧ¡£
.n**bar-inverseÀà¿ÉÒԸı䵼º½ÌõµÄÍâ¹Û¡£
breadcrumb´´½¨´øÓвã´ÎµÄµ¼º½½á¹¹£¨Ãæ°üм£©¡£

¡¾·ÖÒ³¡¿
pagination£¬²¢¸ù¾ÝÇé¿ö¶ÔÒ³ÂëʹÓÃ.disabledÀà¡¢.activeÀà¡£
.pagination-lg»ò.pagination-**ÀàÌṩÁ˶îÍâ¿É¹©Ñ¡ÔñµÄ³ß´ç¡£
pagerÉÏÒ»Ò³ºÍÏÂÒ»Ò³µÄ¼òµ¥·­Ò³¡£²¢¿Éͨ¹ýprevious£¬nextÀà±êʾ¡£

¡¾±êÇ©¡¿
label±êÇ©»ùÀ࣬¿Éͨ¹ýlabel-default,label-primary,label-success,label-info,label-warning,label-danger¸Ä±ä±êÇ©µÄÍâ¹Û¡£
badge£¬¿ÉÒÔºÜÐÑÄ¿µÄչʾеĻòδ¶ÁµÄÐÅÏ¢ÌõÄ¿¡£

7
¡¾ÆäËü¡¿
ËõÂÔͼ
Ìáʾ¿ò
½ø¶ÈÌõ
ýÌå¶ÔÏóµÈ

¶¨ÖÆÑùʽ
1
BootStrapÌṩÁ˸ù¾Ý×Ô¼ºÐèÒªµÄ×é¼þ¼°jquery²å¼þ½øÐж¨ÖÆ£¬Ê¹ÓÃÕßÒ²¿ÉÒÔÖ±½ÓÐÞ¸ÄLessÔ´Âë¡£
END
×ܽá
1
±¾Æª¾­Ñé½ö´ÓÈ«¾Ö¼òµ¥½éÉÜBootstrapµÄÄÚÈÝ£¬Ï¸½Ú²¿·Ö²¢²»¾ßÌ壬BootstrapµÄʹÓ÷dz£Áé»î£¬¿ÉÒÔ¶Ô¸÷ÖÖ×é¼þ½øÐкϲ¢Ê¹Óã¨È磺Ϊ±êǩҳÏîÌí¼Ó´øÏÂÀ­²Ëµ¥£©£¬½¨ÒéʹÓùý³ÌÖÐʵʱ²Î¿¼¹Ù·½Îĵµ£¬¹Ù·½ÎĵµÓиüÏêϸµÄÏÂÔØ¼°Ê¹ÓÃ˵Ã÷£¬Õë¶Ô¾ßÌåÑùʽÓÐÖ±¹ÛÑùÀý£¬¶øÇÒÓзḻµÄÖ÷Ìâ°¸Àý¡£