內容

內容

主內容

主內容

輔助內容

右側內容

頁面寬度 1440

<div class="container-xl">
  <!-- Content here -->
</div>

頁面寬度 1140

<div class="container">
  <!-- Content here -->
</div>

頁面寬度 1024

<div class="container-lg">
  <!-- Content here -->
</div>

頁面寬度 800

<div class="container-md">
  <!-- Content here -->
</div>

頁面寬度 500

<div class="container-sm">
  <!-- Content here -->
</div>

內容

+panel_wp
  +panel_heading
      +panel_heading_title('內容')
  +panel_body

表單

+panel_wp
  +panel_heading
      +panel_heading_title('表單')
      +panel_heading_right
          +ui_panel_btn_back
          +ui_panel_btn_len
  +panel_body

表格

新增
+panel_wp
  +panel_heading
      +panel_heading_title('表格')
      +panel_heading_right
          +ui_panel_btn_add
          +ui_panel_btn_action
          +ui_panel_btn_len
  +panel_body

panel 功能按鈕

新增 匯入
新增 匯入
+ui_panel_btn_back
+ui_panel_btn_add
+ui_panel_btn_action
+ui_panel_btn_import
+ui_panel_btn_len
+panel_btn('更多樣式','icon-link','btn-outline-default','uiPanel'+linkfile)

文字排版 (Typography)

標題

h1.h1

h2.h2

h3.h3

h4.h4

h5.h5
h6.h6

顯示標題

.display-1

.display-2

.display-3

.display-4

前導主題

添加一個 .lead,讓一個段落突出。

p.lead 添加一個 .lead,讓一個段落突出。

行內文本元素

You can use the mark tag to mark.highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

p You can use the mark tag to
  mark highlight
  |  text.
p
  del This line of text is meant to be treated as deleted text.
p
  s This line of text is meant to be treated as no longer accurate.
p
  ins This line of text is meant to be treated as an addition to the document.
p
  u This line of text will render as underlined
p
  small This line of text is meant to be treated as fine print.
p
  strong This line rendered as bold text.
p
  em This line rendered as italicized text.

縮寫

attr HTML

p
  abbr(title='attribute') attr
  abbr.initialism(title='HyperText Markup Language') HTML

引用

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

blockquote.blockquote
  p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

引用來源

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

p.mb-0
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  footer.blockquote-footer
      | Someone famous in
      cite(title='Source Title') Source Title

反轉排版

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

blockquote.blockquote.blockquote-reverse
  p.mb-0
  |    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  footer.blockquote-footer
      | Someone famous in
      cite(title='Source Title') Source Title

列表-無樣式

  • Lorem ipsum
ul.list-unstyled
  li Lorem ipsum

列表-行內

  • Lorem ipsum
  • Phasellus iaculis
ul.list-inline
  li.list-inline-item Lorem ipsum
  li.list-inline-item Phasellus iaculis

列表-行內

Description lists
A description list is perfect for defining terms.
Description lists
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
dl.row
  dt.col-sm-3 Description lists
  dd.col-sm-9 A description list is perfect for defining terms.
  dt.col-sm-3 Description lists
  dd.col-sm-9
      dl.row
          dt.col-sm-4 Nested definition list
          dd.col-sm-8 Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

表格功能

圖片 內容摘要 發佈日期 排序 狀態 動作
圖片名稱

文章標題文章標題文章標題文章標題文章標題文章標題今日異動置頂

簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容文章分類

2018/08/05
1
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
圖片名稱

文章標題文章標題文章標題文章標題文章標題文章標題今日異動置頂

簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容文章分類

2018/08/05
2
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
篩選
+table_toolbar
  +table_toolbar_left
      +table_toolbar_serch
          option(value='detail.subject') 標題名稱
          option(value='detail.content') 所有內容
  +table_toolbar_right
      +table_toolbar_filter
          +t_filter_select('category','ture')
              option(selected='selected') 分類全部
              option(value='13') ├典藏雕塑
              option(value='40') ├-中型雕塑
      +t_filter_select
          option(selected='selected') 標籤全部
      +t_filter_select
          option(selected='selected') 屬性全部
+ui_t_filter_select_status
th
+table('tableList2')
  thead
      tr
          +ui_table_thead_selectall('tableList')
          +ui_th_pic
          +ui_th_title
          +ui_th_date 發佈日期
          +ui_th_sort
          +ui_th_status
          +ui_th_action
td
tbody
  tr
      td
          +ui_t_inputselect('0')
      +ui_td_pic
          +t_pic('531047179','圖片名稱')
      td
          +t_title_a('articlNewsEdit','文章標題文章標題文章標題文章標題文章標題文章標題')
              +ui_t_todayEdit
              +ui_t_top
          +t_p('簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容簡述內容')
              +ui_t_category('文章分類')
      td 2018/08/05
      +ui_td_sort
          +ui_talbe_sort('1')
      td
          +ui_t_status('y')
      +ui_td_action
          +ui_t_btn_del
          +ui_t_btn_view
          +ui_t_btn_edit(href=currentUrl+'Edit'+linkfile)
          +ui_t_btn_sub
          +ui_t_btn_mail
          +ui_t_btn_record
          +ui_t_btn_userRecord
          +ui_t_btn_done

datatables 表格

設定值: 更多資訊請至 https://datatables.net/
圖片 內容摘要 發佈日期 排序 狀態 動作
質感也太

質感也太今日異動置頂

外層材質則是採用..最新消息

2017-11-05
0
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
機器人會寫鬼故事? 考驗讀者膽量笑點

機器人會寫鬼故事? 考驗讀者膽量笑點置頂

人工智慧能做的事情越..最新消息

2017-11-25
1
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
AlphaGo不只會玩棋 還要幫電力公司配電

AlphaGo不只會玩棋 還要幫電力公司配電

根據開發AlphaGo的谷歌DeepMind團隊的說法,下遍天下已無敵手的AlphaGo目標並不只是玩圍棋,未來它也可以協助運算如何運送電力,開展更多任務..活動資訊

2017-09-25
2
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
RapaQ上線 首創一站式設計智造平台 解決市場3大痛點

RapaQ上線 首創一站式設計智造平台 解決市場3大痛點

串聯台灣設計、製造2大產業優勢,首創一站式設計智造平台RapaQ正式上線。執行長陳錦源表示,RapaQ透過網路科技與思維,提供從設計、資金、製造、通路、市..課程資訊

2017-09-28
3
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
沙烏地「新未來城」…機器人將比人多

沙烏地「新未來城」…機器人將比人多

沙烏地阿拉伯王儲賓.沙爾曼(Mohammed bin Salman)宣布將斥資5,000億美元在紅海岸的沙漠地區築起一座新城市,稱為「Neom」(意為「新未來」)。..系統公告

2017-01-28
4
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
沙烏地「新未來城」…機器人將比人多

沙烏地「新未來城」…機器人將比人多置頂

沙烏地阿拉伯王儲賓.沙爾曼(Mohammed bin Salman)宣布將斥資5,000億美元在紅海岸的沙漠地區築起一座新城市,稱為「Neom」(意為「新未來」)。..活動資訊

2016-01-28
5
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
「喜極而泣」是最受蘋果用戶歡迎的表情符號

「喜極而泣」是最受蘋果用戶歡迎的表情符號

為了要在保持隱私的狀態下搜集用戶的數據,蘋果先前發表了一個稱為「差別隱私(differential privacy)的科技,可在合法(至少目前還沒有重大問題)技術。最近,蘋果則是..活動資訊

2014-06-07
6
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
幾可亂真的視覺體驗-32-吋曲面電競顯示器動手玩

幾可亂真的視覺體驗-32-吋曲面電競顯示器動手玩

相信熱愛電競遊戲的玩家一定都知道,要體驗最極致的電競效果,除了要具備高規的處理器、主機板、顯示卡,甚至大容量的記憶體之外,螢幕也是讓電競體驗更,它不僅配備大尺寸的曲面螢..課程資訊

2017-06-05
7
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
iX帶頭 擴增實境手機出貨將爆發

iX帶頭 擴增實境手機出貨將爆發

擴增實境(AR)受到iPhone X帶動,未來將被視為是高階智慧手機的「必備」。元大投顧分析師蒲得宇指出,行動AR即將起飛,搭載AR的智慧手機出貨量會從2018年1.99億支,大更上看500億美元..系統公告

2017-12-05
8
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
臉書AR特效濾鏡淘金 啟雲在台首發

臉書AR特效濾鏡淘金 啟雲在台首發

啟雲於2014年1月成立,第一支行動應用產品3D拍拍(Insta3D)在2015年4月拿下全球App Store免費下載App第一名;2016年推出3D人偶動態貼圖產生器3D貼貼(Insta3D GifMoji)..最新消息

2017-06-05
9
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
低頭族最常見的三種酸痛狀況 四招健身操讓你擺脫不適

低頭族最常見的三種酸痛狀況 四招健身操讓你擺脫不適

智慧手機盛行,讓現代人愈來愈容易腰痠背痛、骨骼退化,趕快來學幾招,強化肩頸、腹肌,甩開疼痛。臺大醫院復健部主治醫師、好心肝門診中心特聘醫師..最新消息

2017-08-05
10
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
機器人會寫鬼故事? 考驗讀者膽量笑點

機器人會寫鬼故事? 考驗讀者膽量笑點置頂

人工智慧能做的事情越來越多,像是羞辱棋王,擦地掃地,當導覽員,還有成為沙烏地的公民。不過,會講鬼故事的機器人,大概領教過的人就不多了..活動資訊

2017-11-25
11
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
AlphaGo不只會玩棋 還要幫電力公司配電

AlphaGo不只會玩棋 還要幫電力公司配電

根據開發AlphaGo的谷歌DeepMind團隊的說法,下遍天下已無敵手的AlphaGo目標並不只是玩圍棋,未來它也可以協助運算如何運送電力,開展更多任務..系統公告

2017-09-25
12
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
RapaQ上線 首創一站式設計智造平台 解決市場3大痛點

RapaQ上線 首創一站式設計智造平台 解決市場3大痛點

串聯台灣設計、製造2大產業優勢,首創一站式設計智造平台RapaQ正式上線。執行長陳錦源表示,RapaQ透過網路科技與思維,提供從設計、資金、製造、通路、市..

2017-09-28
13
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
「喜極而泣」是最受蘋果用戶歡迎的表情符號

「喜極而泣」是最受蘋果用戶歡迎的表情符號

為了要在保持隱私的狀態下搜集用戶的數據,蘋果先前發表了一個稱為「差別隱私(differential privacy)的科技,可在合法(至少目前還沒有重大問題)的前的技術。最近,蘋果則是..最新消息

2014-06-07
14
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
幾可亂真的視覺體驗-32-吋曲面電競顯示器動手玩

幾可亂真的視覺體驗-32-吋曲面電競顯示器動手玩

相信熱愛電競遊戲的玩家一定都知道,要體驗最極致的電競效果,除了要具備高規的處理器、主機板、顯示卡,甚至大容量的記憶體之外,螢幕也是讓電競體驗更加卓越不可或缺的一環。這次要為大家帶來的產..

2017-06-05
15
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入
iX帶頭 擴增實境手機出貨將爆發

iX帶頭 擴增實境手機出貨將爆發

擴增實境(AR)受到iPhone X帶動,未來將被視為是高階智慧手機的「必備」。元大投顧分析師蒲得宇指出,行動AR率達27%,市場規模更上看500億美元..

2017-12-05
16
刪除瀏覽編輯子項目發送郵件紀錄登入紀錄加入

table 表格

添加 table.table

# First Last
1 Mark Otto
2 Jacob Thornton

添加 table.table-dark

# First Last
1 Mark Otto
2 Jacob Thornton

表格 head

添加 thead.thead-dark

# First Last
1 Mark Otto
2 Jacob Thornton

添加 thead.thead-light

# First Last
1 Mark Otto
2 Jacob Thornton

條紋行

添加 table.table-striped

# First Last
1 Mark Otto
2 Jacob Thornton

添加 table.table-striped.table-dark

# First Last
1 Mark Otto
2 Jacob Thornton

帶框

添加 table.table-bordered

# First Last
1 Mark Otto
2 Jacob Thornton

添加 table.table-bordered.table-dark

# First Last
1 Mark Otto
2 Jacob Thornton

滑過顏色

添加 table.table-hover

# First Last
1 Mark Otto
2 Jacob Thornton

添加 table.table-hover.table-dark

# First Last
1 Mark Otto
2 Jacob Thornton

小表格

添加 table.table-sm

# First Last
1 Mark Otto
2 Jacob Thornton

添加 table.table-sm.table-dark

# First Last
1 Mark Otto
2 Jacob Thornton

儲存格上色

添加於td or tr

Class Heading Heading
default Cell Cell
primary Cell Cell
secondary Cell Cell
success Cell Cell
info Cell Cell
warning Cell Cell
danger Cell Cell
light Cell Cell
dark Cell Cell
main Cell Cell

添加 table.table-sm.table-dark

Class Heading Heading
default Cell Cell
primary Cell Cell
secondary Cell Cell
success Cell Cell
info Cell Cell
warning Cell Cell
danger Cell Cell
light Cell Cell
dark Cell Cell
main Cell Cell

響應式表格

添加 .table-responsive

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell

添加 .table-responsive-sm

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell

添加 .table-responsive-md

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell

添加 .table-responsive-lg

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
table-responsive
  table.table
    thead
        tr
          th(scope='col') #
          th(scope='col') First
          th(scope='col') Last
    tbody
        tr
          th(scope='row') 1
          td Mark
          td Otto
        tr
          th(scope='row') 2
          td Jacob
          td Thornton

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

bootstrap-sweetalert 彈跳視窗

設定值: 更多資訊請至 bootstrap-sweetalert
data-title - 標題 (Text)
data-message - 內容 (Text)
data-type - 訊息種類 (success / error / warning / info)
data-show-confirm-button - 確認按鈕 (true / false)
data-confirm-button-class - 確認按鈕 - 樣式 (Text)
data-show-cancel-button - 取消按鈕 (true / false)
data-cancel-button-class -取消按鈕 - 樣式 (Text)
data-close-on-confirm - 確認按鈕 - 關閉視窗狀態 (true / false)
data-close-on-cancel - 取消按鈕 - 關閉視窗狀態 (true / false)
data-confirm-button-text - 確認按鈕 - 文字 (Text)
data-cancel-button-text - 取消按鈕 - 文字 (Text)
data-popup-title-success - 成功訊息 - 標題 (Text)
data-popup-message-success- 成功訊息 - 內容
data-popup-title-cancel - 取消訊息 - 標題
data-popup-message-cancel -取消訊息 - 內容
基本
button.btn.btn-outline-default.mt-sweetalert(data-title='訊息標題', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-default') 基本彈跳
訊息狀態
button.btn.btn-outline-default.mt-sweetalert(data-title='成功訊息', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-default', data-type='success') 成功訊息
button.btn.btn-outline-default.mt-sweetalert(data-title='警告訊息', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-default', data-type='warning') 警告訊息
button.btn.btn-outline-default.mt-sweetalert(data-title='錯誤訊息', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-default', data-type='error') 錯誤訊息
button.btn.btn-outline-default.mt-sweetalert(data-title='資訊訊息', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-default', data-type='info') 資訊訊息
確認按鈕
button.btn.btn-outline-default.mt-sweetalert(data-title='確認按鈕', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-default', data-type='info', data-confirm-button-text='我同意') 我同意
button.btn.btn-outline-default.mt-sweetalert(data-title='取消按鈕', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-default', data-type='error', data-confirm-button-text='取消') 取消
button.btn.btn-outline-default.mt-sweetalert(data-title='取消', data-message='訊息內容內容內容', data-allow-outside-click='true', data-confirm-button-class='btn-danger', data-cancel-button-class='btn-default', data-type='info', data-show-confirm-button='true', data-show-cancel-button='true', data-cancel-button-text='取消', data-confirm-button-text='確認') 選擇按鈕
選擇後訊息
button.btn.btn-outline-default.mt-sweetalert(data-title='是否確認執行', data-message='訊息內容內容內容', data-type='info', data-show-confirm-button='true', data-confirm-button-class='btn-danger', data-show-cancel-button='true', data-cancel-button-class='btn-outline-default', data-close-on-confirm='false', data-close-on-cancel='false', data-confirm-button-text='確認', data-cancel-button-text='取消', data-popup-title-success='成功', data-popup-message-success='已確認執行成功', data-popup-title-cancel='Cancelled', data-popup-message-cancel='您取消此動作') 取消確認訊息
button.btn.btn-outline-default.mt-sweetalert(data-title='是否確認執行', data-message='訊息內容內容內容', data-type='info', data-show-confirm-button='true', data-confirm-button-class='btn-danger', data-show-cancel-button='true', data-cancel-button-class='btn-outline-default', data-close-on-confirm='false', data-confirm-button-text='確認', data-cancel-button-text='取消', data-popup-title-success='成功', data-popup-message-success='已確認執行成功') 取消直接關掉
           常用
button.btn.btn-outline-secondary.btn-sm.mt-sweetalert(type='button', data-title='是否確認刪除', data-message='您將刪除此筆內容,一但刪除將會放置垃圾桶,若需還原請至垃圾桶區還原', data-type='info', data-show-confirm-button='true', data-confirm-button-class='btn-danger', data-show-cancel-button='true', data-cancel-button-class='btn-outline-default', data-close-on-confirm='false', data-confirm-button-text='確認', data-cancel-button-text='取消', data-popup-title-success='刪除完成', data-popup-message-success='您的項目已丟進垃圾桶區')
  i.icon-trash
  span.text-hide  刪除 

bootstrap-colorpicker 顏色點選

div.colorpicker-component
div.colorpicker-changeColor,設定更改的div名稱dateName=".changeColor-bg"(自行定義)
測試區塊
div.colorpicker-changefont,設定更改的div名稱dateName=".changeColor-font"(自行定義)
測試區塊

daterangepicker 日期

input.datepicker-birthdate
input.datepicker-birthdateTime
input.datepicker-reportrange
input.datepicker-datefilter
input.datepicker-timepicker
input.datepicker-limit,inputminDate="06/01/2015" maxDate="06/30/2015" dateLimit="6"

inputmask.js 欄位格式

其他相關設定了解:https://github.com/RobinHerbots/Inputmask

inputdata-inputmask="'alias': 'yyyy/mm/dd'"
inputdata-inputmask="'mask': '99-999[9]-9999'"
inputdata-inputmask="'mask': '9999 9999 9999 9999'"

Modal視窗

nestable.js 拖曳排序

  1. Item 13
  2. Item 14
  3. Item 15
    1. Item 16
    2. Item 17
    3. Item 18

Validation.js 表單驗證

Validation.js,form加入class="validate",相關設定:https://jqueryvalidation.org/

data-msg="自行定義的錯誤內容"

bootstrap-validator.js 增加欄位

其他相關設定了解:http://briandetering.net/repeater

div.repeater> data-repeater-list="repeater-group"> data-repeater-item

下拉選單 bootstrap-select.js

Multiple Select 複選清單

特效 vendors/multiselect、vendors/quicksearch-master class="multiSelect",相關設定:http://loudev.com/#usage

dropdown 下拉選單

樣式

分離按鈕的下拉選單

尺寸

方向

Toggle Dropleft

圖片取點

x1
y1
x2
y2
w
h
標點清單
# 資料 控制
1
dyson 無線吸塵器(85,108,205,211,120,103)
http://google.com.tw

資訊說明框

edfault 標題

css樣式為 note note-edfault內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字內容說明文字

note note-default

note note-primary

note note-secondary

note note-success

note note-info

note note-warning

note note-danger

note note-light

note note-dark

note note-main

alert文字

一般

連結顏色

額外的內容

關閉

badge標籤

一般

default primary secondary success info warning danger light dark main

圓角

default primary secondary success info warning danger light dark main

連結

defaultprimarysecondarysuccessinfowarningdangerlightdarkmain

button 按鈕

按鈕
按鈕框線
使用型態 Link
<a class="btn btn-main" href="#" role="button">Link</a>
<button class="btn btn-main" type="submit">Button</button>
<input class="btn btn-main" type="button" value="Input">
<input class="btn btn-main" type="submit" value="Submit">
<input class="btn btn-main" type="reset" value="Reset">
a.btn.btn-main(href='# ', role='button ') Link
button.btn.btn-main(type='submit ') Button
input.btn.btn-main(type='button ', value='Input ')
input.btn.btn-main(type='submit ', value='Submit ')
input.btn.btn-main(type='reset ', value='Reset ')
按鈕大小 Link Large Link Small Link Large Link Small
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<a class="btn btn-main btn-lg mx-1" href="# " role="button ">Link Large </a>
<a class="btn btn-main btn-sm mx-1" href="# " role="button ">Link Small </a>
<button class="btn btn-outline-primary btn-lg" type="button ">Large button</button>
<button class="btn btn-outline-primary btn-sm" type="button ">Small button</button>
<a class="btn btn-outline-main btn-lg mx-1" href="# " role="button ">Link Large </a>
<a class="btn btn-outline-main btn-sm mx-1" href="# " role="button ">Link Small </a>
button.btn.btn-primary.btn-lg(type='button ') Large button
button.btn.btn-primary.btn-sm(type='button ') Small button
a.btn.btn-main.btn-lg.mx-1(href='# ', role='button ') Link Large 
a.btn.btn-main.btn-sm.mx-1(href='# ', role='button ') Link Small 
button.btn.btn-outline-primary.btn-lg(type='button ') Large button
button.btn.btn-outline-primary.btn-sm(type='button ') Small button
a.btn.btn-outline-main.btn-lg.mx-1(href='# ', role='button ') Link Large 
a.btn.btn-outline-main.btn-sm.mx-1(href='# ', role='button ') Link Small 
滿寬
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
button.btn.btn-primary.btn-lg.btn-block(type='button') Block level button
啟用狀態 Primary linkLink Primary linkLink
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
a.btn.btn-primary.btn-lg.active(href='#', role='button', aria-pressed='true') Primary link
a.btn.btn-secondary.btn-lg.active(href='#', role='button', aria-pressed='true') Link
button.btn.btn-lg.btn-primary(type='button', disabled='') Primary button
button.btn.btn-secondary.btn-lg(type='button', disabled='') Button
a.btn.btn-primary.btn-lg.disabled(href='#', role='button', aria-disabled='true') Primary link
a.btn.btn-secondary.btn-lg.disabled(href='#', role='button', aria-disabled='true') Link
切換狀態
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
button.btn.btn-primary(type='button', data-toggle='button', aria-pressed='false', autocomplete='off') ingle toggle

導覽 (Navs)

分頁 (Pagination)

分頁
分頁圖示
禁用
尺寸
對齊

tab切換

collapse折疊

折疊

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

多個目標

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

卡片折疊

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

彈出提示框 (Popovers)

Popovers
四個方向

常用內容

主要設定
淑芬
xxx@gamil.com
起始
,結束於
檔案管理
附加資訊 (Metadata)
(Metadata Description) 填寫網頁描述可以讓搜尋引擎幫我們適當的顯示在介紹頁面上
(Metadata Keywords) 設定搜尋關鍵字將有助於搜尋引擎精準的找到網頁內容
如果需要給予頁面名稱,請輸入
進階選項
如果需要在未來期限到後自動上架刊登,請在此設定一form_radio_inline個日期
如果需要在有效期限過後自動下架刊登,請在此設定一個日期
啟用此選項文章將被優先排序到最前面
索引值越小表示越優先排序