整合 BootStrap 3

CodeCharge Studio 2.x, 3.x, 4.x, 5.x
回覆文章
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

整合 BootStrap 3

文章 由 yehlu »

感謝 Yusuf Akyol
此教學文件由Yusuf Akyol 提供
附加檔案
CCS5-BS3.zip
(501.46 KiB) 已下載 287 次
回頂端
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: 整合 BootStrap 3

文章 由 yehlu »

STEP1

Create a Page Template with Twitter Bootstrap 3(TBS3):

1. Create an CCS5 Blank App.

2. Copy the "Templates" folder from CCS5 installation folder to your app's main folder.

3. Click "Templates" folder at CCS' "Project Explorer".

4. Create "Blank Page".

5. At "HTML Mode", before "</head>" tag, add BS3 CSS files
(for detail info, you may read http://getbootstrap.com/getting-started/)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3 ... "></script>
<script src="https://oss.maxcdn.com/libs/respond.js/ ... "></script>
<![endif]-->

6. At "HTML Mode", before </body> tag, add BS3 js files

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

7. Save as "PageTmpl".

8. At "Project Settings' General" tab, set "New Page Template" as a new created page template

C:\<your app folder>\Templates\PageTmpl.ccp

9. Click OK.

10. You may also add your application's specific definitions to this template.

After all of them, if you create a new page, new page will be created with this template.

如何用Twitter Bootstrap 3來做為頁面樣板:

1. 建立1個CCS5的空專案

2. 拷貝CCS5安裝目錄中的Templates資料夾,到這個專案的根目錄裡.

3. 在專案管理打開Templates資料夾.

4. 建立一空白頁面.

5. 切換到HTML分頁,在</head>的標記前加入下列資料

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3 ... "></script>
<script src="https://oss.maxcdn.com/libs/respond.js/ ... "></script>
<![endif]-->

6. 在</body>加入下列資料

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

7. 存成 "PageTmpl".

8. 在專案設定裡,新頁面樣板選擇這個頁面 "PageTmpl".

C:\<your app folder>\Templates\PageTmpl.ccp

9. 點選OK.

10. 這樣您的專案就會用這個頁面做為樣版.
回頂端
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: 整合 BootStrap 3

文章 由 yehlu »

STEP2

Create Twitter Bootstrap3(TBS3) Vertical Authentication Template For CCS5


1. Open the "Template" folder's subfolder "Record",

2. Right click the "Vertical",

3. Select "CopyTo" from context menu,

4. Set the template name "BS_Vertical",

5. Click the "Save" button.

6. Open the "BS_Vertical" in "HTML Mode".

7. Add this properties to the <form ... > tag:

class="form-horizontal" role="form"

8. Replace 2-13 lines with

<table align="center">
<tr>
<td class="text-center" colspan="2">
<h4>{Title}</h4>
</td>
</tr>

9. If you want to use more larger or smaller tables' header, you may use h3, h5, etc.

10. Replace lines between "<!-- BEGIN Error -->" and "<!-- END Error -->" with

<tr>
<td colspan="2">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>{res:errormsg}</h4>
{Error}
</div>
</td>
</tr>

11. If you don't do this before, add "errormsg" in translations.

12. Replace lines between "<!-- BEGIN ControlContent -->" and "<!-- END ControlContent -->" with

<tr>
<td>{ControlTitle}</td>
<td>{ControlTemplate}</td>
</tr>

13. Replace the lines above "<!-- BEGIN Footer -->"

<tr class="Controls">
<td class="th" colspan="2" align="center">{rememberMe}</td>
</tr>

with

<tr>
<td colspan="2" class="text-center">{rememberMe}</td>
</tr>

14. Replace lines between "<!-- BEGIN Footer -->" and "<!-- END Footer -->" with

<tr>
<td class="text-center" colspan="2">{ClearLink} {Buttons}</td>
</tr>

15. Delete these 3 lines above </form> tag:

</td>
</tr>
</table>




Using Newly Created Bootstrap Vertical Authentication Template:

1. Create a new "Blank Page",

2. Between <body> and </body> tags insert cursor and click "Authentication" at "Builders" tab,

3. At "Select Tab", select "HTML Template From File" and than "BS_Vertical.ccp",

4. For using Bootstrap styling, always select "No Style" and always use "buttons", not "image buttons",

5. Select other application dependent parameters and finish creating your page,

6. Add to all "<label>" tags

class="control-label"

property,

7. Add to all "<input type=text ... >" tags

class="form-control"

property,

8. Add to all <input type=submit ... >" tags

class="btn btn-primary"

property,

9. You may add other TBS3 properties.

10. Save, publish and test your page.

做一個 Twitter Bootstrap3(TBS3) 的 Vertical Authentication Template

1. 開啟Template資料夾中的Record資料夾,

2. 選擇"Vertical",

3. 按右鍵選"CopyTo"

4. 設定檔名為"BS_Vertical",

5. 選"Save"存檔.

6. 開啟"BS_Vertical"在"HTML Mode"分頁.

7. 在<form ... >標記加入下列資料:

class="form-horizontal" role="form"

8. 替換 2-13 列為

<table align="center">
<tr>
<td class="text-center" colspan="2">
<h4>{Title}</h4>
</td>
</tr>

9. 若您想用其他的字體癚可以用 h3, h5, 等.

10. 替換 "<!-- BEGIN Error -->" 到 "<!-- END Error -->" 的資料變為

<tr>
<td colspan="2">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>{res:errormsg}</h4>
{Error}
</div>
</td>
</tr>

11. 您可以在翻選檔中加入 "errormsg" 的翻譯.

12. 替換 "<!-- BEGIN ControlContent -->" 到 "<!-- END ControlContent -->" 的資料為

<tr>
<td>{ControlTitle}</td>
<td>{ControlTemplate}</td>
</tr>

13. 在 "<!-- BEGIN Footer -->" 改為

<tr class="Controls">
<td class="th" colspan="2" align="center">{rememberMe}</td>
</tr>

及

<tr>
<td colspan="2" class="text-center">{rememberMe}</td>
</tr>

14. 替換 "<!-- BEGIN Footer -->" 到 "<!-- END Footer -->" 為

<tr>
<td class="text-center" colspan="2">{ClearLink} {Buttons}</td>
</tr>

15. 刪除在 </form> 前的

</td>
</tr>
</table>

使用 Bootstrap 做的 Vertical Authentication Template

1. 建立空白頁,

2. 將游標停在 <body> 與 </body> 之間,然後使用Authentication Builders"

3. 記得選在 "HTML Template From File" 要選 "BS_Vertical.ccp"

4. 若使用 Bootstrap 的型式,要選"No Style" 及"buttons"不要用"image buttons",

5. 選擇其他相關資料,

6. 在全部 "<label>" 標記加入

class="control-label"

7. 在全部 "<input type=text ... >" 標記加入

class="form-control"

8. 在全部<input type=submit ... >" 標記加入

class="btn btn-primary"

9. 可加入其他的 TBS3 屬性.

10. 存檔,出版及測試頁面.
回頂端
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: 整合 BootStrap 3

文章 由 yehlu »

STEP3

Create Twitter Bootstrap3(TBS3) Vertical Search Template For CCS5


1. Open the "Template" folder's subfolder "Search",

2. Right click the "Vertical",

3. Select "CopyTo" from context menu,

4. Set the template name "BS_Vertical",

5. Click the "Save" button.

6. Open the "BS_Vertical" in "HTML Mode".

7. Add this properties to the <form ... > tag:

class="form-horizontal" role="form"

8. Replace 2-13 lines with

<table align="center">
<tr>
<td class="text-center" colspan="2">
<h4>{Title}</h4>
</td>
</tr>

9. If you want to use more larger or smaller tables' header, you may use h3, h5, etc.

10. Replace lines between "<!-- BEGIN Error -->" and "<!-- END Error -->" with

<tr>
<td colspan="2">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>{res:errormsg}</h4>
{Error}
</div>
</td>
</tr>

11. If you don't do this before, add "errormsg" in translations.

12. Replace lines between "<!-- BEGIN ControlContent -->" and "<!-- END ControlContent -->" with

<tr>
<td>{ControlTitle}</td>
<td>{ControlTemplate}</td>
</tr>

13. Replace lines between "<!-- BEGIN Footer -->" and "<!-- END Footer -->" with

<tr>
<td class="text-center" colspan="2">{ClearLink} {Buttons}</td>
</tr>

14. Delete these 3 lines above </form> tag:

</td>
</tr>
</table>




Using Newly Created Bootstrap Vertical Search Template:

1. Create a new "Blank Page",

2. Between <body> and </body> tags insert cursor and click "Search" at "Builders" tab,

3. At "Select Tab", select "HTML Template From File" and than "BS_Vertical.ccp",

4. For using Bootstrap styling, always select "No Style" and always use "buttons", not "image buttons",

5. Select other application dependent parameters and finish creating your page,

6. Add to all "<label>" tags

class="control-label"

property,

7. Add to all "<input type=text ... >" tags

class="form-control"

property,

8. Add to all <input type=submit ... >" tags

class="btn btn-primary"

property,

9. You may add other TBS3 properties.

10. Save, publish and test your page.

建立 Twitter Bootstrap3(TBS3) Vertical Search 樣版

1. 開啟 "Template" 中的 "Search" 資料夾,

2. 選擇 "Vertical",

3. 按右鍵選 "CopyTo",

4. 檔名設為 "BS_Vertical",

5. 選存檔 "Save" .

6. 開啟 "BS_Vertical" 切換到 "HTML Mode" 分頁.

7. 在 <form ... > 加入:

class="form-horizontal" role="form"

8. 替換 2-13 行為

<table align="center">
<tr>
<td class="text-center" colspan="2">
<h4>{Title}</h4>
</td>
</tr>

9. 也可用別的字體大小如 h3, h5, 等.

10. 替換 "<!-- BEGIN Error -->" 到 "<!-- END Error -->" 為

<tr>
<td colspan="2">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>{res:errormsg}</h4>
{Error}
</div>
</td>
</tr>

11. 可加入"errormsg" 的翻譯.

12. 替換 "<!-- BEGIN ControlContent -->" 到 "<!-- END ControlContent -->" 為

<tr>
<td>{ControlTitle}</td>
<td>{ControlTemplate}</td>
</tr>

13. 替換 "<!-- BEGIN Footer -->" 到 "<!-- END Footer -->" 為

<tr>
<td class="text-center" colspan="2">{ClearLink} {Buttons}</td>
</tr>

14. 刪除 </form> 前3列:

</td>
</tr>
</table>

使用Bootstrap Vertical Search樣板:

1. 建立頁面選 "Blank Page",

2. 在 <body> 與 </body> 使用 "Search Builders",

3. 使用 BS_Vertical.ccp" 樣板,

4. 樣式選 "No Style" 及使用文字的 "buttons",

5.設定其他參數,

6. 在 "<label>" 加入

class="control-label"

7. 在 "<input type=text ... >" 加入

class="form-control"

8. 在 <input type=submit ... >" 加入

class="btn btn-primary"

9. 可加入其他 TBS3 的功能.

10. 存檔,出版及測試頁面.
回頂端
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: 整合 BootStrap 3

文章 由 yehlu »

STEP4

Create Twitter Bootstrap3(TBS3) Tabular Grid Template For CCS5


1. Open the "Template" folder's subfolder "Grid",

2. Right click the "Tabular",

3. Select "CopyTo" from context menu,

4. Set the template name "BS_Tabular",

5. Click the "Save" button.

6. Open the "BS_Tabular" in "HTML Mode".

7. Add this line above <table .... > tag:

<div class="table-responsive">
<h4>{Title}</h4>

8. If you want to use more larger or smaller tables' header, you may use h3, h5, etc.

9. Add this and of the template

</div>

10. Replace 3-15(new) lines

<table cellspacing="0" cellpadding="0" border="0" class="MainTable">
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0" border="0" class="Header">
<tr>
<td class="HeaderLeft">&nbsp;</td>
<td class="th"><strong>{Title}</strong></td>
<td class="HeaderRight">&nbsp;</td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" class="Grid">
<tr class="Row">

with

<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>


11. At line 9(new) delete class="Caption" properties of table row(<tr>)

12. Replace lines between "<!-- BEGIN ControlTitle -->" and "<!-- END ControlTitle -->" with

<th>{Sorter}</th>

13. Replace lines between "<!-- BEGIN Separator -->" and "<!-- END Separator -->" with

<tr class="Separator">
<th colspan="{countControls}">&nbsp;</th>
</tr>

14. After "<!-- END Separator -->" add these lines

</thead>
<tbody>

15. Delete class="Row" attribute of row(<tr>) below <!-- BEGIN Row -->

16. Replace lines between "<!-- BEGIN NoRecords -->" and "<!-- END NoRecords -->" with

<tr>
<td colspan="{countControls}">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"&times;</button>
<h4>{res:Warning}</h4>
{NoRecords}
</div>
</td>
</tr>

17. If you don't do this before, add "Warning" in translations.

18. Replace lines between "<!-- BEGIN Footer -->" and "<!-- END Footer -->" with

<tr>
<td colspan="{countControls}" class="text-center>
{Navigator}
</td>
</tr>

19. Delete last 3 lines:

</td>
</tr>
</table>

20. Add </tbody> tag before </table> tag.


Using Newly Created Bootstrap Tabular Grid Template:

1. Create a new "Blank Page",

2. Between <body> and </body> tags insert cursor and click "Grid" at "Builders" tab,

3. At "Select" tab, select "HTML Template From File" and than "BS_Tabular.ccp",

4. At "Navigation" tab, don't select "Add Page Size Selection", select "Custom" and than click "Modify",
select "Text Links", "Current page only", "Show Total Page" and than click "OK".

5. At "Options" tab, don't select "Display total number of records" and "Alternate records".

6. For using Bootstrap styling, always select "No Style" and always use "buttons", not "image buttons",

7. Finish creating grid.

8. At HTML Mode, delete lines below "<thead>" tag

<tr>
<td colspan="2"></td>
</tr>

9. Delete line below "<!-- BEGIN Navigator Navigator -->"

<span class="Navigator">

10. Add line above "<!-- BEGIN Navigator Navigator -->"

<ul class="pagination">

11. Delete </span> above "<!-- END Navigator Navigator -->"

12. Add line </ul> below "<!-- END Navigator Navigator -->" (if there is Add link, after Add link)

13. Add <li> to beginning of all navigator links and </li> to end of them, like this:

<!-- BEGIN First_On --><li><a href="{First_URL}">{res:CCS_First}</a></li> <!-- END First_On -->
<!-- BEGIN First_Off --><li class="disabled"><a href="#">{res:CCS_First}</a></li> <!-- END First_Off -->

14. "Off links" and "Total Page" must have "class=disabled" attributes.

15. You may not need to do for every newly created page. You may copy and paste from below lines between <!-- BEGIN Navigator Navigator --> and <!-- END Navigator Navigator -->

<!-- BEGIN First_On -->
<li><a href="{First_URL}">{res:CCS_First}</a></li> <!-- END First_On -->
<!-- BEGIN First_Off -->
<li class="disabled"><a href="#">{res:CCS_First}</a></li> <!-- END First_Off -->
<!-- BEGIN Prev_On -->
<li><a href="{Prev_URL}">{res:CCS_Previous}</a></li> <!-- END Prev_On -->
<!-- BEGIN Prev_Off -->
<li class="disabled"><a href="#">{res:CCS_Previous}</a></li> <!-- END Prev_Off -->
<li class="disabled"><a href="#">{Page_Number}&nbsp;{res:CCS_Of}&nbsp;{Total_Pages}</a></li>
<!-- BEGIN Next_On -->
<li><a href="{Next_URL}">{res:CCS_Next}</a></li> <!-- END Next_On -->
<!-- BEGIN Next_Off -->
<li class="disabled"><a href="#">{res:CCS_Next}</a></li> <!-- END Next_Off -->
<!-- BEGIN Last_On -->
<li><a href="{Last_URL}">{res:CCS_Last}</a></li> <!-- END Last_On -->
<!-- BEGIN Last_Off -->
<li class="disabled"><a href="#">{res:CCS_Last}</a></li> <!-- END Last_Off -->

16. You may add other TBS3 properties.

17. Save, publish and test your page.
回頂端
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: 整合 BootStrap 3

文章 由 yehlu »

Create Twitter Bootstrap3(TBS3) Vertical Record Template For CCS5


1. Open the "Template" folder's subfolder "Record",

2. Right click the "Vertical",

3. Select "CopyTo" from context menu,

4. Set the template name "BS_Vertical",

5. Click the "Save" button.

6. Open the "BS_Vertical" in "HTML Mode".

7. Add this properties to the <form ... > tag:

class="form-horizontal" role="form"

8. Replace 2-13 lines with

<table align="center">
<tr>
<td class="text-center" colspan="2">
<h4>{Title}</h4>
</td>
</tr>

9. If you want to use more larger or smaller tables' header, you may use h3, h5, etc.

10. Replace lines between "<!-- BEGIN Error -->" and "<!-- END Error -->" with

<tr>
<td colspan="2">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>{res:errormsg}</h4>
{Error}
</div>
</td>
</tr>

11. If you don't do this before, add "errormsg" in translations.

12. Replace lines between "<!-- BEGIN ControlContent -->" and "<!-- END ControlContent -->" with

<tr>
<td>{ControlTitle}</td>
<td>{ControlTemplate}</td>
</tr>

13. Replace lines between "<!-- BEGIN Footer -->" and "<!-- END Footer -->" with

<tr>
<td class="text-center" colspan="2">{ClearLink} {Buttons}</td>
</tr>

14. Delete these 3 lines above </form> tag:

</td>
</tr>
</table>




Using Newly Created Bootstrap Vertical Record Template:

1. Create a new "Blank Page",

2. Between <body> and </body> tags insert cursor and click "Record" at "Builders" tab,

3. At "Select Tab", select "HTML Template From File" and than "BS_Vertical.ccp",

4. For using Bootstrap styling, always select "No Style" and always use "buttons", not "image buttons",

5. Select other application dependent parameters and finish creating your page,

6. Add to all "<label>" tags

class="control-label"

property,

7. Add to all "<input type=text ... >" tags

class="form-control"

property,

8. Add to all <input type=submit ... >" tags

class="btn btn-primary"

property,

9. You may add other TBS3 properties.

10. Save, publish and test your page.
回頂端
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: 整合 BootStrap 3

文章 由 yehlu »

代碼: 選擇全部

<label
<label class="control-label"

<input type="text"
<input type="text" class="form-control"

<input type="submit"
<input type="submit" class="btn btn-primary"
回頂端
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

Re: 整合 BootStrap 3

文章 由 yehlu »

代碼: 選擇全部

function domfileedit($file){
    echo $file;
    $dom = new DOMDocument();
    @$dom->loadHTMLFile($file);
    $x = new DOMXPath($dom);
    var_dump($x);
    foreach($x->query("//label") as $node)
    {   
        var_dump($node);
        $node->setAttribute("class","control-label");
    }  
    foreach ($x->query('//input') as $node){
        if($node->hasAttributes()) {
            foreach($node->attributes as $attribute) {
                if($attribute->nodeName == 'type' && $attribute->nodeValue == 'text') {
                     var_dump($node);                
                     $node->setAttribute("class","form-control");
                }
                if($attribute->nodeName == 'type' && $attribute->nodeValue == 'submit') {
                     var_dump($node);                
                     $node->setAttribute("class","btn btn-primary");  
                }                
            }
        }              
    }            
    $dom->saveHTMLFile($file);
    echo $dom->saveHTML();
}    

domfileedit("einv_cust/NewPage3.html");
回頂端
Ali Raza
文章: 1
註冊時間: 2014-11-01 14:49:14

Re: 整合 BootStrap 3

文章 由 Ali Raza »

Thank Yusuf Akyol
this teaching documents provided by Yusuf Akyol
Cut down your exam stress by using our latest 220-801 dump and ICDL.We provide updated New York University with 100% pass guarantee along with [url=http://www.youtube.com/user/CIPSuOttawa]Youtube[/url.
回頂端
回覆文章

回到「CodeCharge Studio」