²Ä7¦¸§@·~

 

1.ÃD¥Ø¡G«Ø¥ß¤@­Ó²©öºô¯¸¡A¨Ã¤W¶Ç¨ìºô¯¸ªÅ¶¡¡C§¹¦¨¶µ¥Ø¦p¤U¡G

 

¡]1¡^¤U¸üÅTÀ³¦¡ºô­¶¼ÒªOºô¯¸(Bootstrap 4)

¨Ó·½¡G¼ÒªO¤ý

 

¡]2¡^­×§ïºô¯¸ªºtitle¡A½s½X¡A¼ÐÃD¡Aª©ÅvÁn©ú¡A

 

¡]3¡^«Ø¥ßºô¯¸ªº6­Ó¶W³sµ²¡G

 

¡]3-1¡^­º­¶index.htm

 

¡]3-2¡^²Ä1ÃD¡GÀH¾÷¶Ã¼Æ

ª`·N¡G¦]¬°¼ÒªO¬Obootstrap 4ª©¥»¡A©Ò¥H¥²¶·¨ìBootstarp 4ºô¯¸¬d¸ß«ü¥O

²£¥Í0¡ã1¤§¶¡¶Ã¼Æ¡GMath.random()

²£¥Í1¡ã10¤§¶¡¶Ã¼Æ(1)¡GMath.ceil(Math.random()*10)

²£¥Í1¡ã10¤§¶¡¶Ã¼Æ(2)¡GMath.floor(Math.random()*10) + 1

 

BootstrapªºªÅ¶¡±Æª©ªº°Ñ¼Æ³]©w¡Gcontainer¡Xrow¡Xcol-n¡]1¡ã12¡^

<div class="container">

<div class="row">

< div  class=" col-5">²£

<div col-6 offset-1">  

</div>

ª`·N¡G¤@¦Crow³Ì¦hªºÄæ¦ìcol¬°12­Ó¡]col-12¡^¡A

¨C­Ó¤¸¥ó©Ò¦û¼e«×col-3¡]¥Nªí¦û¾Ú3­ÓªÅ¶¡¡^

¨C­Ó¤¸¥ó¶ZÂ÷«e­±¤@­Ó¤¸¥óªºªÅ¶¡offset-3¡]¥Nªí»P«e­±¤@­Ó¤¸¥ó¶ZÂ÷3­ÓªÅ¶¡¡^

 

Bootstrap4¦p¦ó³]©wªÅ¶¡±Æª©

 

 

 

¡]3-3¡^²Ä2ÃD¡G©â¼³§JµP

¤U¸ü¼³§JµP¹Ï¤ù

 

¡]3-4¡^²Ä3ÃD¡Gª±®a²ø®a¤ñ¼³§JµP

±Æª©³]©w

1.¨â­Órow:

<div class=¡¨row¡¨>

<div class=¡¨row¡¨>

 

2.±±¨î¹Ï¤ù¦ì¸m

<img class=¡¨col-3 offset-1¡§

<img class=¡¨col-3 offset-4¡§

col-3¡Gªí¥Ü¤¸¥ó¼e«×3®æ

offset-1¡Gªí¥Ü»P«e­±°¾²¾1®æ

 

3.javascriptªºÅܼƦ³2ºØ¡G

°Ï°ìÅܼÆn1

¥þ°ìÅÜ¼Æ var n1

 

 

¡]3-5¡^²Ä4ÃD¡G»s§@¦h­Ó§éÅ|°T®§

 

°Ñ¦Ò¡GBootstrap§éÅ|¤¸¥ó

°Ñ¦Ò¤@­Ó§éÅ|¤¸¥óªº°µªk¡AµM«á§â¥¦°µ¦¨2­Ó§éÅ|°T®§¤¸¥ó

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">

                ¥xÆW¤H¤f¼Æ¡H

</a>

</p>

<div class="collapse" id="collapseExample1">

  <div class="card card-body">

    ¥xÆW¤H¤f¦³2300¸U¤H

  </div>

 

 

 

¡]4¡^§âºô¯¸¤W¶Ç¨ì¦Û¤vªºgoogle¶³ºÝµwºÐºô¯¸ªÅ¶¡

§A¥Ø«eªºgoogle¶³ºÝµwºÐ¡A¥u¬OµwºÐ¡A¤£¬Oºô¯¸ªÅ¶¡¡A

¥²¶·¸g¹L2¨BÆJÂà´«¡A¤~¯àÅܦ¨ºô¯¸ªÅ¶¡¡G

 

1¨BÆJ1¡G±N§A°µ¦nªººô¯¸(§t¥Ø¿ý)¤W¶Ç¨ìgoogle¶³ºÝµwºÐ

¨Ã¥B·Æ¹«¥kÁä¦@¥Î¤@¯ë¦s¨úÅvª¾¹Dºô§}ªº¥ô¦ó¤H

 

2¨BÆJ2¡G¨Ï¥ÎÂà´«¤u¨ãdrw.tw¡]¥i¥H§â¶³ºÝµwºÐÂনºô¯¸¡^

ºô§}drv.tw¡Ghttps://www.drv.tw/

¿ï¾Ügoole±b¸¹¡A§Y§¹¦¨Âà´«

§Aªº­Ó¤Hºô¯¸¡Ghttps://xvjnbud2edusyypwayaabw.on.drv.tw/web/

 

3.¨BÆJ3¡G­Y¶ûºô§}¤Óªø¡A¥i¥H¥Îµuºô§}¤u¨ã¡A

¨Ò¦pgg.gg¡Ghttp://gg.gg/

¡]¥i¥H¦Û­qºô§}¦WºÙ¡^

 

¡]5¡^§âºô§}¡A¶K¨ìzuvio

±Nºô§}¡A¶K¦bzuvioªº§@·~°Ï¡A§¹¦¨§@·~