Scriptcase Blank/Grid 應用 Bootstrap 的 Badges (徽章)

在 Scriptcase上應用 Bootstrap：

GRID:

1. 在 Events 的 onScriptInit 裡，加上 Bootstrap 的引入連結，可以在Bootstrap 官網上，複製過來即可：

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

2. 在要顯示的欄位定義裡，套用Badges 的定義即可。

// Check for record
$check_sql = "SELECT count(*) "
   . " FROM orders"
   . " WHERE employeeid = " . {employeeid};
sc_lookup(rs, $check_sql);

if (isset({rs[0][0]})) { //found
    $v_orders_count = {rs[0][0]};
} else {
    $v_orders_count = 0;
}

if ( $v_orders_count > 100 ) {
	{ordcount} = "" . $v_orders_count . "";
} else {
	{ordcount} = "" . $v_orders_count . "";
}

Bootstrap 5 的 iframe Embeded Youtube 影片做法改變了

https://getbootstrap.com/docs/5.0/helpers/ratio/#example 

<div class="ratio ratio-16x9">

  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>

</div>

Bootstrap 3 跳出式視窗 modal 如何做？

參考：

https://getbootstrap.com/docs/3.3/javascript/#modals

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

然後，如何讓這個 modal 在載入網頁時，自動彈出？

 <script type="text/javascript">
    $(document).ready(function(){
        $('#myModal').modal('show');
    });
  </script>

透過這段 javascript 讓網頁一開啟時，就自動 show出來。

Code Charge 裡的 Login builder 如何套 Bootstrap

這兩日試著研究 BootStrap ，並要用 Code Charge 來套用。

首先，制作應用Bootstrap 的 Master Page，將它放在一個Design下，Bootstrap 需要的所有 CSS、js 等都放在適當的目錄下。讓程式可以抓得到。

Code Charge 有一個 LOGIN Page的自動 Builder，修改個 Form Template，拿Code Charge內建的 /Template/Authentication 裡面的 Vertical 來改。像這樣：新檔名為：bs_vertical

<form id="formId" role="form" method="post" name="{HTMLFormName}" action="{Action}">
<fieldset><legend>{Title}</legend>
<div class="panel panel-default">
<ul class="list-group">
        <!-- BEGIN Error -->
  <li class="list-group-item">{Error}</li>
        <!-- END Error -->
</ul>
</div>
          <!-- BEGIN ControlContent -->
<div class="form-group">
{ControlTitle}
{ControlTemplate}
</div>
          <!-- END ControlContent -->
<div class="checkbox">
<label><input type="checkbox"> {rememberMe}</label>
</div>
          <!-- BEGIN Footer -->
<button type="submit" class="btn btn-default">{Buttons}</button>
          <!-- END Footer -->
</fieldset>
</form>

由於Bootstrap 的 Submit 用 <botton>來做，而CodeCharge內建的用 <input>來做，所以，在套用時，需再將 HTML 中移除<input>，因為我們用自己的<botton>！

產生出來以後，還要修改一下產生的 HTML 內容，主要是 Login name以及 password這兩個 <input>裡面要多加 class="form-control"，而 maxlength="100" size="20" 刪除這樣就差不多完成了！

我找到在 Code Charge 裡面產生 Login Page Builder 的程式，可以要去改他，還真麻煩，算了。隨便亂動 Code Charge 所付的程式，萬一怎樣，還真麻煩，還是不要亂動原本的程式較妙。

那就只好產生出來以後，再手動略加修改一下囉。