bootstrap 相關資訊 & RWD簡易範例

繁體中文社群

https://kkbruce.tw/bs3

Bootstrap TouchSpin

http://www.virtuosoft.eu/code/bootstrap-touchspin/

其中一項JS設定

 

<input id="demo_vertical" type="text" value="" name="demo_vertical">
<script>
    $("input[name='demo_vertical']").TouchSpin({
      verticalbuttons: true
    });
</script>

呈現效果之一如下

 

 

 

 

介紹關於 Bootstrap RWD相關資訊

https://miumiu33.gitbooks.io/3-12-rwd-/content/bootstrapde_pai_ban_ji_qiao.html

bootstrap排版相關範例

<div class="row">
<div class="col-xs-12  col-sm-5 col-sm-offset-1 col-md-4 col-md-offset-2">
<h3 class="post-title">
日期
</h3>
<input type="text" name="Date" id="Date" placeholder="日期"  class="form-control"/>
</div>
<div class="col-xs-12  col-sm-5 col-md-4">
<h3 class="post-title">
託運單號
</h3>
<input type="text" name="TtrSno" id="TtrSno" placeholder="單號"  class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-xs-12  col-sm-5 col-sm-offset-1 col-md-4 col-md-offset-2">
<h3 class="post-title">
收件人姓名
</h3>
<input type="text" name="Name" id="Name" placeholder="收件人姓名"  class="form-control"/>
</div>
<div class="col-xs-12  col-sm-5 col-md-4">
<h3 class="post-title">
收件人電話
</h3>
<input type="text" name="Phone" id="Phone" placeholder="收件人電話"  class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-xs-12  col-sm-2 col-sm-offset-1 col-md-2 col-md-offset-2">
<h3 class="post-title">
國別
</h3>
<input type="text" name="Name" id="Name" placeholder="國別"  class="form-control"/>
</div>
<div class="col-xs-12  col-sm-4 col-md-3">
<h3 class="post-title">
省縣市
</h3>
<input type="text" name="Counties" id="Counties" placeholder="省縣市"  class="form-control"/>
</div>
<div class="col-xs-12  col-sm-4 col-md-3">
<h3 class="post-title">
城市
</h3>
<input type="text" name="City" id="City" placeholder="城市"  class="form-control"/>
</div>
<div class="col-xs-12  col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<h3 class="post-title">
地址
</h3>
<input type="text" name="Address" id="Address" placeholder="地址"  class="form-control"/>
</div>
</div>

MD呈現樣式

SM呈現樣式(跟MD差異在此看不太出差異)

XS呈現樣式(寬度小於768px)(較常在於手機上出現)