From 排版

h3標題區隔的使用

當頁面只有一個個div.panel 時,高度將會自動展開符合螢幕高度

fieldest 標題

語系欄位

上下編排

We'll never share your email with anyone else.

行內編排

+form_inline
  +form_inline_group
      label.mr-2(for="name3") 一般欄位
      input.form-control(type='text', name='name3')
  +form_inline_group
      label.sr-only(for="name4") 一般欄位
      input.form-control.ml-3(type='text', name='name4',placeholder="隱藏文字")
  +form_inline_group
      label.sr-only(for="name4") 一般欄位
      input.form-control.ml-3(type='text', name='name4',placeholder="隱藏文字")
  +ui_btn_send(class="mb-2 ml-3")

左右編排

+form_group
  +form_group_label('一般欄位','name')
  +form_group_col
      input.form-control(type='text', name='name')
+form_btn_group
  +ui_btn_send
  +ui_btn_reset

編排方式

欄位排版
+form_group
  +form_group_label('自動寬')
  .col-md-auto
      input.form-control(type='text', name='',placeholder='col-md-auto')
+form_group
  +form_group_label('欄位1')
  +form_group_col(1)
      input.form-control(type='text', name='',placeholder='col-sm-2.col-md-1')

特殊編排

+form_row
  .col-md-auto.mb-2.mb-md-0
      input.form-control(type='text', name='',placeholder='')
  .col-md-auto.mb-2.mb-md-0
      input.form-control(type='text', name='',placeholder='')
  .col-md-auto
      select.bs-select.form-control
         option 下拉選單
重量
公斤,
身高
公分。
+form_row
  .col-sm-auto
      +form_row
          .col-auto.form-text 重量
          .col.mb-2
              input.form-control(type='text', name='',placeholder='')
          .col-auto.form-text 公斤,
  .col-sm-auto
      +form_row
          .col-auto.form-text 身高
          .col.mb-2
              input.form-control(type='text', name='',placeholder='')
          .col-auto.form-text 公分。
+form_row
  .col-sm.mb-2
      input.form-control(type='text', name='',placeholder='')
  .col-sm.mb-2
      input.form-control(type='text', name='',placeholder='')
  .col-sm.mb-2
      select.bs-select.form-control
          option 下拉選單
.custom-controls-stacked
  .row.mb-2
      .col-auto
          +form_radio('radio6-1','radio6','持續不停')
  .row.mb-2
      .col-auto
          +form_radio('radio6-2','radio6','於')
  .col-auto
      input.form-control.ml-2.col-auto.form-control-sm.datepicker-birthdate(type='text', name='', value='')
.row.mb-2
  .col-auto
      +form_radio('radio6-3','radio6','重複')
  .col-auto
      input.form-control.form-control-sm(type='text', name='')
  .col-auto 次
# 屬性 價格 刪除
1
2
+datatables_nop('product_table')
  thead.thead-default
      tr.text-center
          th #
          th 屬性
          th 價格
          th 刪除
  tbody
      tr
          td.text-center(scope='row') 1
          td.text-center
              select.bs-select.form-control(data-style='btn-outline-light btn-sm')
                  option 請選擇
                  option 台灣
          td
              input.form-control.form-control-sm(type='text')
          td.text-center.text-nowrap
              button.btn.btn-danger.btn-sm(type='button', data-repeater-delete='')
                  i.icon-cross
              button.btn.btn-primary.btn-sm(type='button', data-repeater-create='')
                  i.icon-plus
1
2
3
4
header.mb-3
  ul#myTab.nav.nav-tabs(role='tablist')
      li.nav-item
          a#tab-1.nav-link.active(data-toggle='tab', href='#tab-pane-1', role='tab', aria-controls='tab-pane-1', aria-selected='true') 日
#myTabContent.tab-content
  #tab-pane-1.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='tab-1') 1

檔案上傳

+form-file-up('fileUp','檔案上傳')
button.btn.btn-secondary(type='button',data-target="#modal_file",data-toggle="modal")
  i.icon-pictures
  |  媒體庫
+ui_form_fileUp('3','1','1')
+ui_form_fileUp('3','2','1')

欄位屬性

input.form-control.form-control-lg(type='text', name=
input.form-control.form-control-sm(type='text', name='name')
單存文字
.form-text 單存文字
select.form-control.form-control
  option Large select
select.form-control.form-control-lg
  option Large select
select.form-control.form-control-sm
  option Large select
nput.form-control-plaintext(type='text', readonly='', id='', value='email@example.com')
input.form-control(type='text', name='')
input.form-control(type='password', id='', placeholder='Password')
備註區塊
input.form-control(type='text', name='',aria-describedby="note")
+form_help('note')
  | 備註區塊
input.form-control(type='text', name='',readonly, placeholder='readonly')
input.form-control(type='text', name='',disabled, placeholder='disabled')
input.form-control(type='email', name='')
input.form-control(type='search', name='',value="serch")
input.form-control(type='tel', name='',value="0987000588")
input.form-control(type='Number', name='',value="12345")
input.form-control(type='datetime-local', name='',value="2011-08-19T13:45:00")
input.form-control(type='url', name='',value="http://xxx")
input.form-control(type='date', name='',value="2011-08-19")
input.form-control(type='week', name='',value="2011-W33")
input.form-control(type='month', name='',value="2011-08")
input.form-control(type='time', name='',value="13:45:00")
input.form-control(type='text',maxlength="40",name="")
input.form-control(type='text',minlength="2" ,name="")
textarea.form-control(rows="5" name="description")
textarea.form-control.editor(rows="5" name="editor" id="offlineMessage")
   +form_checkbox('rememberMe','記住我')(checked='checked')
a.btn.btn-warning.btn-sm(role='button', href='#')
  i.icon-exclamation-triangle.mr-1
  span 連線
a.btn.btn-success.btn-sm(role='button', href='#')
  i.icon-check.mr-1
  span 連線成功

選擇

單選複選基本樣式
+form_checkbox_df('id1','id1','項目')
+form_checkbox_inline_df('id1','id1','項目')
+form_radio_df('radio1-1','radio1','項目')
+form_radio_inline_df('radio2-1','radio2','項目')
+form_checkbox_no_df('checkbox3','checkbox3','請選擇','main')
+form_radio_no_df('radio2','radio2','請選擇')
複選
+form_checkbox_inline('id7-1','id7','項目')(checked='checked')
+form_checkbox_inline('id9','id9','項目')(disabled)
單選
+form_radio('radio3-1','radio3','項目')(checked='checked')
+form_radio_inline('radio4-1','radio4','項目')(checked='checked')
+form_radio_inline('radio6','radio6','項目')(disabled)
群組
.input-group.mb-3
  .input-group-prepend
      .input-group-text
          input(type='checkbox', aria-label='Checkbox for following text input')
  input.form-control(type='text', aria-label='Text input with checkbox')
核取方塊和選項按鈕
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>
.btn-group-toggle(data-toggle='buttons')
  label.btn.btn-secondary.active
      input(type='checkbox', checked='', autocomplete='off') Checked
      |  Checked
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio
    </label>
</div>
.btn-group.btn-group-toggle(data-toggle='buttons')
  label.btn.btn-secondary.active
       input#option1(type='radio', name='options', autocomplete='off', checked='')
        |  Active
  label.btn.btn-secondary
      input#option2(type='radio', name='options', autocomplete='off')
      |  Radio
  label.btn.btn-secondary
     input#option3(type='radio', name='options', autocomplete='off')
        |  Radio

input 群組

@
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">@</span></div>
  <input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
@example.com
<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append"><span class="input-group-text" id="basic-addon2">@example.com</span></div>
</div>
https://example.com/users/
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">https://example.com/users/</span></div>
  <input class="form-control" id="basic-url" type="text" aria-describedby="basic-addon3">
</div>
$
.00
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">$</span></div>
  <input class="form-control" type="text" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append"><span class="input-group-text">.00</span></div>
</div>
With textarea
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">With textarea</span></div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

大小

Small
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-sm">Small</span></div>
  <input class="form-control" type="text" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
Default
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default">Default</span></div>
  <input class="form-control" type="text" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
Large
<div class="input-group input-group-lg mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-lg">Large</span></div>
  <input class="form-control" type="text" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>

Multiple inputs

First and last name
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="">First and last name</span></div>
  <input class="form-control" type="text">
  <input class="form-control" type="text">
</div>

按鈕附加元件

$0.00
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div>
  <input class="form-control" type="text" aria-label="Amount (to the nearest dollar)">
</div>
$0.00
<div class="input-group mb-3">
  <input class="form-control" type="text" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div>
</div>

多附加組件

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input class="form-control" type="text" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input class="form-control" type="text" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

帶下拉式選單的按鈕

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a></div>
  </div>
  <input class="form-control" type="text" aria-label="Text input with dropdown button">
</div>
<div class="input-group mb-3">
  <input class="form-control" type="text" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a></div>
  </div>
</div>

分段按鈕

<div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Action</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
    <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a></div>
</div>
<div class="input-group mb-3">
  <input class="form-control" type="text" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Action</button>
    <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
    <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a></div>
  </div>
</div>

下拉

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect04">
    <option selected="">Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

檔案上傳

上傳
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">上傳</span></div>
  <div class="custom-file">
    <input class="custom-file-input" id="inputGroupFile01" type="file">
    <label class="custom-file-label" for="inputGroupFile01">選取檔案</label>
  </div>
</div>
上傳
<div class="input-group mb-3">
  <div class="custom-file">
    <input class="custom-file-input" id="inputGroupFile02" type="file">
    <label class="custom-file-label" for="inputGroupFile02">選取檔案</label>
  </div>
  <div class="input-group-append"><span class="input-group-text" id="">上傳</span></div>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <div class="custom-file">
    <input class="custom-file-input" id="inputGroupFile03" type="file">
    <label class="custom-file-label" for="inputGroupFile03">選取檔案</label>
  </div>
</div>
<div class="input-group mb-3">
  <div class="custom-file">
    <input class="custom-file-input" id="inputGroupFile04" type="file">
    <label class="custom-file-label" for="inputGroupFile04">選取檔案</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

常用內容

主要設定
+ui_fieldset_title_base
+ui_form_category
+ui_form_category_select
+ui_form_category_select_multiple
+ui_form_subject
+ui_form_note
+ui_form_editor
+ui_form_windows
+ui_form_starEndDate
+ui_form_url
+ui_form_link
淑芬
+ui_form_author_text
xxx@gamil.com
+ui_form_mail_text
+ui_form_addrInt('國際性地址')
+ui_form_addr('台灣地址')
起始
,結束於
+ui_form_dateStarEnd('日期起訖')
檔案管理
+ui_fieldset_title_media
+ui_form_fileUp('3','1','1')
附加資訊 (Metadata)
(Metadata Description) 填寫網頁描述可以讓搜尋引擎幫我們適當的顯示在介紹頁面上
(Metadata Keywords) 設定搜尋關鍵字將有助於搜尋引擎精準的找到網頁內容
如果需要給予頁面名稱,請輸入
+ui_form_seo
進階選項
+ui_fieldset_title_control
如果需要在未來期限到後自動上架刊登,請在此設定一form_radio_inline個日期
如果需要在有效期限過後自動下架刊登,請在此設定一個日期
+ui_form_dateset
啟用此選項文章將被優先排序到最前面
+ui_form_tiptop
索引值越小表示越優先排序
+ui_form_sortIndex
+ui_form_enable
+ui_btn