²Ä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ӪŶ¡¡^
¡]3-3¡^²Ä2ÃD¡G©â¼³§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®§
°Ñ¦Ò¤@Ó§éÅ|¤¸¥óªº°µª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¡GY¶ûºô§}¤Óªø¡A¥i¥H¥Îµuºô§}¤u¨ã¡A
¨Ò¦pgg.gg¡Ghttp://gg.gg/
¡]¥i¥H¦Ûqºô§}¦WºÙ¡^
¡]5¡^§âºô§}¡A¶K¨ìzuvio
±Nºô§}¡A¶K¦bzuvioªº§@·~°Ï¡A§¹¦¨§@·~